使用egg.js + Vue实现一个简书（二）---前端搭建

前端UI基本上照搬了简书的，如图。


登录页

首页、文章列表
游戏模块
设置页面

前端页面搭建，使用了vue技术栈，elementui作为ui框架，vuex作为状态管理框架，路由模块使用了vue-router，很常规的搭配。接下来展开讲讲前端搭建的过程。

点我进入代码仓库

项目安装运行

首先保证已经安装了nodejs
我们使用vue-cli快速跑起一个vue项目

  1. 全局安装vue-cli
npm install -g @vue/cli

可以使用命令 vue --version 检查是否已经安装成功

  1. 创建项目，并根据提示选择配置
vue create vueblog

也可以使用 vue ui 命令，通过可视化配置创建项目
注意，create后面跟的是项目名称，如上面示例，package.json里面的name属性将为vueblog。同时也会在当前目录下创建vueblog的文件夹，为创建的项目的文件夹。

选择项目配置

如图，我选择了vue 2的默认配置，添加了babel和eslint语法校验

  1. 启动项目
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

  1. 首先安装vue-router和vuex
npm i -S vue-router
npm i -S vuex
  1. 在根目录创建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
  1. 以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模块的写法

前端代码搭建完毕，下一篇我们讲讲后端代码的搭建

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容