前端UI基本上照搬了简书的，如图。
登录页
首页、文章列表
游戏模块
设置页面
前端页面搭建，使用了vue技术栈，elementui作为ui框架，vuex作为状态管理框架，路由模块使用了vue-router，很常规的搭配。接下来展开讲讲前端搭建的过程。
项目安装运行
首先保证已经安装了nodejs
我们使用vue-cli快速跑起一个vue项目
- 全局安装vue-cli
npm install -g @vue/cli
可以使用命令 vue --version 检查是否已经安装成功
- 创建项目，并根据提示选择配置
vue create vueblog
也可以使用 vue ui 命令，通过可视化配置创建项目
注意，create后面跟的是项目名称，如上面示例，package.json里面的name属性将为vueblog。同时也会在当前目录下创建vueblog的文件夹，为创建的项目的文件夹。
选择项目配置
如图，我选择了vue 2的默认配置，添加了babel和eslint语法校验
- 启动项目
cd vueblog
npm run serve
初始化后的目录
初始化后的首页
接下来我们将改造当前项目
页面分析
参考简书，页面有一个头部，上面有logo，tabs，以及登录注册区域
所以App.vue的代码如下
<template>
<div>
<u-top></u-top>
<div class="container index">
<router-view></router-view>
</div>
</div>
</template>
<script>
import UTop from './components/u-top/u-top.vue'
export default {
components: {
UTop
}
}
</script>
实际展示效果参见前面的效果图展示，或者进入我的博客。
vue的入口文件是main.js
import Vue from 'vue'
// 引入elementui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import moment from 'moment'
import router from './router'
import store from './store'
import App from './App.vue'
Vue.use(ElementUI)
Vue.config.productionTip = false
// 全局filter，用于将时间戳转成字符串
Vue.filter('format', function (value, formatStr) {
if (!value) return ''
return moment(value).format(formatStr)
})
// 创建vue实例，挂载到public/index.html中id="app"的div
new Vue({
store, // 将vuex配置传给Vue
router, // 将vue-router配置传给Vue
render: h => h(App)
}).$mount('#app')
功能模块
讲一讲我的功能模块的文件结构
模块文件结构讲解
目前有三个模块：article、game、user。我在src目录下创建一个module文件夹，然后分别创建模块文件夹，以上图结构创建文件。
引入vue-router和vuex
- 首先安装vue-router和vuex
npm i -S vue-router
npm i -S vuex
- 在根目录创建router.js和store.js文件
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import { routes as ariticle } from './module/article/router'
import { routes as user } from './module/user/router'
import { routes as game } from './module/game/router'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
...ariticle,
...user,
...game,
{
path: '/',
redirect: '/article/list'
}
]
})
收集各个模块中的router配置，合并到一起后，作为参数传入new VueRouter中，并将其暴露出去。
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import { store as user } from './module/user/store'
import { store as article } from './module/article/store'
import { loginApi } from './module/user/api/api.js'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userInfo: localStorage.getItem('userInfo') || '{}',
isLogin: !!localStorage.getItem('isLogin') || false,
token: localStorage.getItem('token') || ''
},
modules: {
user,
article
},
mutations: {
CHANGE_LOGIN_STATUS: (state, { isLogin, token, userInfo }) => { // 更改登录状态
state.isLogin = isLogin
state.token = token
state.userInfo = userInfo
}
},
actions: {
LOG_OUT: ({ commit, state }, params) => {
localStorage.removeItem('userInfo')
localStorage.removeItem('isLogin')
localStorage.removeItem('token')
commit('CHANGE_LOGIN_STATUS', {
isLogin: false,
token: '',
userInfo: null
})
},
DO_LOGIN: ({ commit, state, rootState }, params) => {
return loginApi(params).then((data) => {
if (data.status === 200) {
// 将登录信息写入localStorage中
localStorage.setItem('isLogin', true)
localStorage.setItem('token', data.result.token)
localStorage.setItem('userInfo', JSON.stringify(data.result.data))
return commit('CHANGE_LOGIN_STATUS', {
isLogin: true,
token: data.result.token,
userInfo: JSON.stringify(data.result.data)
})
}
})
}
}
})
- store.js也是一样，收集各个模块的store.js，传到modules配置项中，最后暴露出一个new Vuex.Store()
- state中的字段是全局state，可以看到userInfo、isLogin、token都是登录状态相关的。
- 首先去localStorage中去找有没有相应的值，如果没有则赋给默认值，说明没有登录，如果有值，则是已经登录了。这是为了应对页面刷新后，state丢失的问题
- 登录时给state赋值且写入localStorage，登出给state赋默认值且清除掉localStorage
- 以user模块为例，看一下router.js和store.js的写法
// router.js
export const routes = [
{
name: 'home',
path: '/home/:id',
component: () => import('./views/home.vue')
},
{
name: 'setting',
path: '/setting',
component: () => import('./views/setting.vue')
},
{
name: 'register',
path: '/user/register',
meta: {
noTop: true
},
component: () => import('./views/register.vue')
},
{
name: 'login',
path: '/user/login',
meta: {
noTop: true
},
component: () => import('./views/login.vue')
}
]
登录注册页面不需要头部，可以在meta中设置noTop字段，然后在头部的组件中通过判断this.$route.meta.noTop来决定组件是否显示
// store.js
import { checkCodeApi, registerApi, getProfileConfig, saveUserInfo, getVerifyCode } from './api/api.js'
export const store = {
state: {
},
mutations: {
},
actions: {
CHECK_CODE: ({ commit, state }, params) => {
return checkCodeApi(params)
},
REGISTER_USER: ({ commit, state }, params) => {
return registerApi(params)
},
GET_PROFILE: ({ commit, state }, params) => {
return getProfileConfig(params)
},
SAVE_USER_INFO: ({ commit, state }, params) => {
return saveUserInfo(params)
},
GET_VERIFY_CODE: ({ commit, state }, params) => {
return getVerifyCode(params)
}
}
}
- store中，actions中是异步方法，调接口的处理写在这里，如果要根据结果操作state，则使用commit方法调用mutations中的同步方法。可以参考根目录中store.js的写法
- 页面中如何调用actions调用的方法？以CHECK_CODE方法为例
const res = await this.$store.dispatch('CHECK_CODE')
由于CHECK_CODE方法是直接将接口返回不作处理的return出去，所以res就是接口的返回 - store还可以定义namespaced参数，如果设置为true，则用dispatch调用actions方法的时候，要在前面加上store的名称。
article模块中定义了一个GET_INVITE_CODE的action，调用它写法如下
const res = await this.$store.dispatch('article/GET_INVITE_CODE')
具体可以下载完整代码，参考article模块的写法
前端代码搭建完毕，下一篇我们讲讲后端代码的搭建
