导航
导航
文章目录
  1. 预览地址: http://hzzly.net/xyy-vue/
  2. Github地址: https://github.com/hzzly/xyy-vue
  • 功能说明
  • 公共组件
  • 目录结构
  • 主要难点
    1. 总结
  • 进阶vue全家桶

    有人说只会vue不会vuex还只是个切图仔,所以本项目将带领你进阶vue全家桶。前端结合Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目,从前端flex布局到前端vue以及组件分离的使用,再到后端Node以及Leancloud的结合,是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题,可以给我留言,我们互相学习讨论,一起进步。注:本项目为开源项目,非本人同意不能用于商业应用。

    预览地址: http://hzzly.net/xyy-vue/

    Github地址: https://github.com/hzzly/xyy-vue

    欢迎大家的star啦~

    功能说明

    • 首页轮播图
    • 首页热门活动
    • 约跑步活动列表
    • 约出行活动列表
    • 个人中心
      • 查看个人活动
      • 学生认证(待开发)
      • 学生信息修改
      • 消息通知(后台接口待开发)
      • 选择高校(待开发)
    • 登录
    • 注册
    • 活动详情
      • 活动报名
    • 活动发布
      • 时间选择组件
      • 地址选择组件
      • 文件上传
    • axios的封装
    • ……

    公共组件

    • 弹出文字组件
    • 弹出框组件
    • loading组件
    • toast组件
    • 时间选择器组件
    • 地址选择器组件
    • ……

    xyy-vue

    目录结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    |——xyy-vue/
    | |——build/
    | |——confg/
    | |——node_modules/
    | |——src/
    | | |——assets/ //静态文件
    | | |——components/ //公共组件
    | | |——fetch/
    | | | |——api.js //axios封装与api
    | | |——pages/ //存放项目页面
    | | | |——Detail.vue //活动详情页面
    | | | |——Home.vue //首页
    | | | |——Login.vue //登录页面
    | | | |——Navbar.vue //我的发布
    | | | |——NotFound.vue //出错页面
    | | | |——Post.vue //发布活动页面
    | | | |——Regist.vue //注册页面
    | | | |——Set.vue //设置页面
    | | | |——Sport.vue //约跑步活动列表页面
    | | | |——Travel.vue //约出行活动列表页面
    | | | |——User.vue //个人中心页面
    | | | |——UserInfo.vue //个人详情页面
    | | | |——UserMsg.vue //消息列表页面
    | | |——router/
    | | | |——index.js //页面路由
    | | |——util //公用方法
    | | |——vuex / //存放vuex代码
    | | | |——modules / //数据模块
    | | | |——store.js //vuex主入口
    | | | |——types.js //vuex的types文件
    | | |——App.vue //父组件
    | | |——main.js //入口文件
    | |——static/
    | |——.babelrc
    | |——.editorconfig
    | |——.gitgnore
    | |——index.html
    | |——package.json
    | |——README.md

    主要难点

    1.各个组件数据的共享

    传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。而且也会导致代码难以维护

    解决方法:采用vuex进行状态管理,把所有事件和状态存储在store对象中,在组件中通过计算属性获得事件,因此就有了实时性。

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    每一个 Vuex 应用的核心就是 store(仓库)。”store” 基本上就是一个容器,它包含着应用中大部分的状态(state)。

    Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

    你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化。

    代码如下(以一个user module为例):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    //vuex/modules/user.js
    import api from '../../fetch/api'
    import * as types from '../types'

    const state = {
    // 用户登录状态
    loginStatus: JSON.parse(localStorage.getItem('loginStatus')) || false,
    }

    const actions = {
    /**
    * 用户登录
    */
    setUserInfo({ commit }, res) {
    localStorage.setItem('loginStatus', true)
    commit(types.SET_LOGIN_STATUS, true)
    },
    /**
    * 退出登录
    */
    setSignOut({ commit }) {
    localStorage.removeItem('loginStatus')
    commit(types.SET_LOGIN_STATUS, false)
    },
    }

    const getters = {
    loginStatus: state => state.loginStatus
    }

    const mutations = {
    [types.SET_LOGIN_STATUS](state, status) {
    state.loginStatus = status
    }
    }

    export default {
    state,
    actions,
    getters,
    mutations
    }


    //User.vue
    <template>
    <div class="user">
    <div v-if="!loginStatus">
    ...
    </div>
    <div v-else>
    ...
    </div>
    </div>
    </template>

    <script>
    import { mapGetters } from 'vuex'
    export default {
    computed: {
    ...mapGetters([
    'loginStatus'
    ])
    }
    }
    </script>

    2.时间选择组件(要可选择时间段)

    规则:

    • 默认值为:开始日期在后天,结束日期在第六天
    • 今天以前不可选择
    • 点击某个日子,则将最近的节点移动过
    • 如果离两个节点一样,则将开始日期移动过去
    • 两个节点也可选到1天里;显示为各一半

    一开始打算在github上搜索一个然后直接拿来用,发现都是不符合我的设计,所以打算自己撸一个,(不要怂,撸起袖子就是干)。
    终于经过几个晚上的奋战写出来了(期间遇到了各种坑)。
    代码就不贴出来了 代码传送门

    总结

    虽然只是做了个小小的个人开源项目,但是我感觉收获还是很大的,很多知识点掌握得更加的牢固,对 vue全家桶 的理解又更深了一些。这个项目还没有完成,后期将不定期更新,敬请期待。。

    如果觉得还行,欢迎star
    项目地址: https://github.com/hzzly/xyy-vue

    好了,溜了溜了。。。

    支持一下
    谢谢你请我吃糖果