api地址:https://www.showdoc.com.cn/aoaoe?page_id=5696507784013382
这些字段做项目时候需要跟后端说这几个字段是必须的。
顶部是一级菜单，侧边是二级菜单参考链接:https://www.jianshu.com/p/44a9511bda9a
1.首先下载该模板https://gitee.com/PanJiaChen/vue-admin-template
├── build # 构建相关1
├── mock # 项目mock 模拟数据
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
2.下载好了以后，打开vue.config.js文件注释掉before: require('./mock/mock-server.js'),关闭eslint
image.png
image.png
3.打开router文件夹下的index.js，删除多余的路由，改成这样
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
4.删除views文件夹内的form、nested、table、tree文件夹，清空api文件夹内的文件，新建index.js
5.修改store/modules/user.js内的import { login, logout, getInfo } from '@/api/user',user改成index
image.png
6.在vue.config.js配置反向代理
image.png
proxy: {
//配置跨域
'/api': {
target: "http://localhost:8888", //测试服接口地址
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
7.然后在.env.deveplopment文件内 VUE_APP_BASE_API = '/dev-api'改成VUE_APP_BASE_API = '/api',然后，重启项目，否则不生效
8.在api/index.js内把登录接口和获取用户详情和获取动态路由（侧边栏）接口配置好
import request from '@/utils/request'
//登录接口
export function login(data) {
return request({
url: '/admin/api/login',
method: 'post',
data
})
}
// 获取用户详情
export function getInfo(data) {
return request({
url: '/admin/api/boss/detail',
method: 'post',
data
})
}
// 动态路由
export function DongtRouter() {
return request({
url: `/aoaoe/api/getMoveRouter`,
method: 'get',
})
}
9.修改store/modules/user.js内的import { login, logout, getInfo } from '@/api/index' 改成 import { login, DongtRouter, getInfo } from '@/api/index'
10.修改src/utils/request.js中的config.headers['X-Token'] = getToken(),把 X-Token改成后端需要的key值，这里根据实际情况需要改成token，config.headers['token'] = getToken()
image.png
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
上面这段代码，根据实际情况改，主要就是修改code值，如果，后端返回的code成功状态值是200，那么这里就改成200。if (res.code === 50008 || res.code === 50012 || res.code === 50014)这里也根据后端返回的code按照实际情况来改，目前我没有动。
重点部分:开始了！！！
11.接下来，打开views/login/index.vue，注释掉loginRules内的校验，你也可以根据实际情况来自定义校验，我懒省事，直接注释掉了
image.png
12.这时候打开项目，点击登录，提示该用户不存在，注意，本模版默认传给后端的是key值是username、password，而后端要求的key是loginame、password，把loginForm对象内的username改成loginame，
改成
在需要修改store/modules/user.js，把actions中的login方法修改成下面这样：
// user login
login({ commit }, userInfo) {
const { loginame, password } = userInfo
return new Promise((resolve, reject) => {
login({ loginame: loginame.trim(), password: password }).then(response => {
commit('SET_TOKEN', response.token)
setToken(response.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
13.这时候打开项目，点击登录，提示账号密码错误，说明接口已经跑通。
image.png
14.我们输入正确的账号密码 admin 123456 ，点击登录,登录成功是这样的
image.png
可以看到，因为还没请求获取动态路由的接口，所以侧边栏是空的，头像也是裂的，下面我们就来解决这些问题。
15.头像裂是因为，我们还没请求用户信息，现在来操作
首先打开store/modules/user.js,把getInfo这个方法改造成这样：(因为后台我没设计头像，存个死值，各位老表自己根据自己后端实际返回的来存)
image.png
然后，头像就正常了
16.下面做渲染侧边栏，请求动态路由，请求接口之前，要先做一些配置:
(1)先在router这个目录下新建两个js文件，开发环境和生产环境导入组件的方式略有不同
_import_development.js
// 开发环境导入组件
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+
_import_production.js
// 生产环境导入组件
module.exports = file => () => import('@/views/' + file + '.vue')
(2)在src/permission.js中引入文件
import Layout from "@/layout";
const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法
(3)在await store.dispatch('user/getInfo')下面写这段代码
(4)在最底部新写一个方法
这时候点击登录，报错，别着急。继续往下走
(5)打开store/modules/user.js，在actions中新建一个方法,请求路由表
(6)在getDefaultState中，新增menus: "",mutations中新增 SET_MENUS: (state, menus) => { state.menus = menus }
(7)在getters.js中新增 menus: state => state.user.menus
这时候点击登录，会报这个错：
意思就是找不到vue文件，根据实际情况，新建文件:
(8)在views下新建：system文件夹，文件夹内新建三个文件夹，分别是 menu 、 roles 、user ，三个文件夹下分别新建index.vue
这时候在点击登录，不报错，进来了，但是侧边栏还是没东西，还差一步：
(9)打开layout/components/Sidebar/index.vue，计算属性中，把routes改成
这时候在刷新页面，完美展示：
17.下面准备开始开发菜单管理页面。老规矩，先把接口地址配置好。
在api文件夹下，新建system文件夹，内新建index.js，
里面这样写：
import request from '@/utils/request'
// 获取菜单列表接口
export function getMenuList(params) {
return request({
url: '/aoaoe/api/getMenuList',
method: 'get',
params
})
}
// 新增菜单
export function addMenu(data) {
return request({
url: '/aoaoe/api/menu/add',
method: 'post',
data
})
}
// 修改菜单
export function updateMenu(id,data) {
return request({
url: `/aoaoe/api/menu/update/${id}`,
method: 'put',
data
})
}
// 删除菜单
export function delMenu(id) {
return request({
url: `/aoaoe/api/menu/delete/${id}`,
method: 'delete',
})
}
把红圈中的封装成一个组件，方便复用
在components/System下新建一个Toobar.vue文件，里面这样写:
搜索
重置
新增
props: { AddBtnAuth: { type: Array, }, },这段代码是接收的父组件传过来的添加按钮权限，后面会讲到
在main.js内引入，让其成为全局组件
Vue.component('toolbar', () => import('@/components/System/toolbar.vue'))
在menu/index.vue内使用，出现说明成功，但是太大了，在main.js配置
import Cookies from 'js-cookie'
Vue.use(ElementUI, {size: Cookies.get('size') || 'mini' // set element-ui default size})
这样就好了
18.在components下新建System/menu/dialogMenu.vue;
里面暂时这样写：
目录
菜单
按钮
是
否
{{this.formData}}
19.views/system/menu/index.vue里这样写：
打印按钮
>
{{ scope.row.permissions == "" ? "--" : scope.row.hidden }}
--
{{
scope.row.component == undefined ? "--" : scope.row.component
}}
目录
菜单
按钮
{{ scope.row.date | formatDate }}
编辑
删除
20.因为用到e-icon-picker选择图标的插件，所以要安装下:
image.png
21.菜单就可以了。
image.png