vue cli3 搭建一个通用中台（二）

前文

上一文中已经完成了项目的创建和环境的配置
本文将完成以下几点

• 用户登录页面
• mock数据模拟请求
• 动态路由构建

开始

先安装我们需要的依赖
npm i element-ui axios mockjs vuex-persistedstate vue-particles -S
介绍
mockjs --> 用来模拟请求
element-ui --> 本项目中使用的ui库
axios --> ajax请求
vuex-persistedstate --> vuex状态持久化插件
vue-particles --> 星空效果，仅使用在登录页

新建 api文件夹 来官理我们的所有请求

>> src/api
> http.js  用来封装 axios 请求
> index.js 管理所有的请求接口封装

>> 举个例子
import {get,post} from './http'
//登录
export const login_hick = (params) => post('/users/index', params)

登录页

登录页 使用了 vue-particles 让页面看起来更加好看一些
mock 来模拟请求接口

实现两种模式登录

介绍mock.js 的使用（官方文档）

>> src/mock
const Mock = require('mockjs')

const Random = Mock.Random;

const usersData = function () {
  let users = {
    intro: Random.csentence(5, 30)
    imgPath: Random.dataImage('40x40', 'mock的图片'), 
    name: Random.cname(), 
    date: Random.date() + ' ' + Random.time() 
  }
  return users
}

Mock.mock('/users/index', 'post', usersData)

//引入mock
>> main.js
requrie('./mock/mock-login')

登录提交时调用 api/index 中定义好的接口

import {login_hick} from '../../api'

login_hick(params)
		.then(res=>{
			 setTimeout(()=>{
					this.loading.close()
			        localStorage.setItem('register', JSON.stringify(res.data))
			        this.$message.success('登录成功')
			        this.$router.push('/views')
			 },1000)
		})

动态路由

前台展示路由由后台数据提供
通过 mock.js 创建一组路由数据

const Mock = require('mockjs')

const Random = Mock.Random;

const routeData = function () {
  let route = [
    {
      id:'00001',
      label:'系统设置',
      icon:'',
      children:[
        {
          path:'setting',   //跳转地址
          name:'setting',  //路由别名
          label:'路由设置',  //展示名称
          icon:'',   //展示图标
          location:'sys/setting',  //文件所在位置
        }
      ]
    }
  ]
  return route
}

 Mock.mock('/route/index', 'post', routeData)

除上一文中在 _imports 还要在 router.js 做一些操作

import Vue      from 'vue'
import Router   from 'vue-router'
import _imports from './router/index'  //上一文中文件引入封装

Vue.use(Router)

import { route_list } from "./api";

let route = { //一个路由集合， 所有添加的路由都在views的children中
  path : '/views',
  name : 'views',
  component : () => _imports('views'),
  children: []
}

//固定路由 login 与 报错 404 等
const router = new Router({
  // mode: 'history',
  base : process.env.BASE_URL,
  routes : [
    {
      path : '/login',
      name : 'Login',
      component : () => _imports('user/login')
    },
    {
      path : '/404',
      name : 'found-404',
      component : () => import(/* webpackChunkName: "utils" */ '@views/utils/404')
    }
  ]
})

/*
* 路由元  用来解析请求数据中的路由
* */
function routeElement ( route ) {
  let rElement = route
  rElement[ 'component' ] = () => _imports(route.location)
  return rElement
}
/*
* 本地存储路由信息
* 如果本地路由信息不存在则调用接口获取
* 扩展可以在每次添加新的路由时清空 KEY:menuList 来重新获取新的路由数据
* */
if ( !localStorage.getItem('menuList') ) {  
  const menu = new Promise(( resolve ) => {
    route_list()
      .then(res => {
        let list = res.data
        localStorage.setItem('menu', JSON.stringify(res.data))
        let menuList = []
        //编辑路由数据
        function pushRoute ( routes ) {
          for ( let i = 0 ; i < routes.length ; i++ ) {
            const listElement = routes[ i ];
            if ( listElement.children ) {
              for ( let j = 0 ; j < listElement.children.length ; j++ ) {
                const childElement = listElement.children[ j ];
                menuList.push(routeElement(childElement))
                if ( childElement.children ) {
                  pushRoute(childElement.children)
                }
              }
            } else {
              menuList.push(routeElement(listElement))
            }
          }
        }
        
        pushRoute(list)
        resolve(menuList)
      })
  })
  menu.then(menus => {
    route['children'] = [...menus]
    //routes中还没有获取到的路由信息， 需要添加， 否则刷新时会空白
    router.options.routes = [...router.options.routes, ...[route]]
    router.addRoutes([route])
    localStorage.setItem('menuList', JSON.stringify(route))
  })
} else {
  let menuList = JSON.parse(localStorage.getItem('menuList')).children
  menuList.map(item=>{
    item['component'] = () => _imports(item.location)
    return item
  })
  route['children'] = [...menuList]
  // 我们在初始化本地存储不在路由信息时已经把路由添加的 router 下的routes中所以这里只是动态添加所有路由进入router对象
  router.addRoutes([route])
  localStorage.setItem('menuList', JSON.stringify(route))
}


router.beforeEach(( to, from, next ) => {
  //登录中 访问页面不存在
  if ( localStorage.getItem('register') && to.name == null ) {
    next('/404')
  }
 
  next()
})
router.afterEach(( to, from ) => {
  // console.log('route after', router)
})

export default router

ps : 介绍的不是很全面项目可以参考
github 项目地址