上一文中已经完成了项目的创建和环境的配置 本文将完成以下几点
先安装我们需要的依赖 npm i element-ui axios mockjs vuex-persistedstate vue-particles -S 介绍 mockjs --> 用来模拟请求 element-ui --> 本项目中使用的ui库 axios --> ajax请求 vuex-persistedstate --> vuex状态持久化插件 vue-particles --> 星空效果,仅使用在登录页
>> src/api
> http.js 用来封装 axios 请求
> index.js 管理所有的请求接口封装
>> 举个例子
import {get,post} from './http'
//登录
export const login_hick = (params) => post('/users/index', params)
登录页 使用了 vue-particles 让页面看起来更加好看一些 mock 来模拟请求接口
>> 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')
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)
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 项目地址