首先搭建前端页面，接着写后端接口，然后前端api添加方法，组件调用api里面的方法
404报错
前端的请求路径与后端的路径没有匹配上
500报错
- 后端服务没有开启
- 后端报错（在终端中会有报错信息）
登录功能
在表单校验规则中，validate显示未被定义的bug，首先我对照表单名字是否不一致，发现并不是这个问题，而是再给表单添加标识的时候ref，设置成：ref（动态绑定）这样会引起ref后面的名字是动态的，就会在data中寻找ref，然而我们并没有设置，只是把ref写死，作为唯一标识。
右侧导航菜单 动态渲染
要想进行动态渲染，所以不能用template，需要用render函数，首先在elememt-UI中使用导航菜单，然后我们在src目录下创建config文件夹，在文件夹中写menuConfig.js，里面提供所有所需要的配置项 ，例如：名字、路由地址、图标，作为要匹配判断的文件，然而这些配置文字等要动态的渲染出来，vue为我们创建creatElement方法，但是很麻烦，所以vue提供另一种方法，就是在vue中使用react的jsx语法，使用之前我们要安装babel插件，然后在方法中return下就可以书写jsx语法
角色管理中创建角色
在添加角色中，第一次输入的角色名，第二次重新点击添加角色的按钮，里面仍保留第一次所输入的数据，我们通过element-UI中表单里的重置方法，resetFileds（）方法，但还是报错（找不到添加方法），但是我们已经确定方法书写没有问题，原因是，当我们这个添加角色的弹窗弹出来的时候，我们的表单还没有加载进来，所以就会undefined，从而获取不到，所以调用这个方法就调用不了，解决办法：思路：当我们弹窗弹出来之后，等到所有DOM元素都加载完成，再调用这个重写方法，VUE为我们提供了$nextTick()方法，里面传进去一个回调函数，作用就是当我们DOM元素全部执行完成之后，会自动调用回调函数，我们在回调函数里面重置表单
.map方法
根据条件，将当前数组生成另一个数组
树型控件中给角色设置权限
树形控件勾选/取消勾选后的回调函数
handleCheckChange(data,checked,indeterminate){
if(checked){
this.checkedkeys.push(data.index)
}else{this.checkedkeys 数组
splice 这个api的作用是从数组中删除元素 参数一 是从那个下标开始删除 参数二 删除几个
数组的.indexOf 这个api 的作用是传入元素获取这个元素在数组中的索引
this.checkedkeys.splice(this.checkedkeys.indexOf(data.index),1)
这里有一个bug 当选中二级菜单项时 例如 选择school 他的父组件也会进入判断 但是父组件的checked为false 所以会进入到else中 然后进入数组中删除 但是数组中没有 /students 所以indexOf返回的是-1 然而数组第一个参数返回的是-1 代表从倒数第一个开始删除 这样就将数组中的最后一个删除掉了
解决办法
判断如果当前选项在数组中才删除 也就是让indexOf不在返回-1
if(this.checkedkeys.indexOf(data.index) != -1){
this.checkedkeys.splice(this.checkedkeys.indexOf(data.index),1)
}再我们为一个角色设置权限之后，点击另一个角色设置的时候，显示的是上一个角色的名字和权限
原因：当我们点击设置权限时，弹出弹窗，加载auth的组件，加载完毕之后，我们点击取消或者确定 关闭弹窗之后，这个子组件并没有销毁，等到我们再一次设置（再一次显示的时候），在mounted中设置，没有重新进行调用，也就是没有通过父组件重新props获取值，所以不会变。
解决方式：
1.设置一个监听器，当role这个值发生变化时，我们就重新赋值，这样会很麻烦。
2.关闭设置权限窗口，组件就会销毁：首先想到的是利用生命周期，利用destroy进行销毁，也会很麻烦。
3.最后通过在auth用v-if里面添加判断——roleAuthVisible看它为true还是false，true就是改变了，我们就将数据加载进来，反之就销毁，总而言之，就是改变这个子组件。
<Auth :role="currentRow" ref="auth" v-if="roleAuthVisible"/>
更新用户数据的接口
在用户管理模块中，编辑用户功能，在更新密码选项密码，如果我不想修改密码，只是修改用户数据，这样完成之后，密码会再次被md5加密
// 先根据id查询用户 然后判断密码是否修改了 如果修改了就加密
UserModel.findOne({ _id: user._id }).then(data => {
// 证明密码被修改了
if (data.password != user.password) {
// 将新密码进行加密
user.password = md5(password)
}用户管理中删除用户
当我们的数据有一页以上时，假定我们有6条数据，每页显示5条，则有一条数据单独显示在第二页上，当我们点击删除第二页的数据时，正常会回到第一页上，然而并没有，删除数据后，数据确实删除了，页面上也没有删除的这条数据的信息，但是页面上是空的，也就是currentpage并没有变
解决方法：
首先在data中定义totalPage（总页数）这样一个属性，记录一共我们有多少页，然后我们用总条数除以每页有多少条 计算出总共有多少页，在获取数据之前（fetchUser）发送请求之前，我们判断一下我们当前的页码是否已经大于了总页码，如果大于了总页码，我们就向上取整，
获取数据完成之后，我们赋值 （用总条数除以一页显示多少条），每一次删除之后，我们要重新赋值（用总条数-1 再除以当前的页码）
fetchUsers(){
// 如果当前查询的页码大于了总页数 就让页码等于总页数(最后一页)
if(this.currentPage > Math.ceil(this.totalPage)){
this.currentPage = Math.ceil(this.totalPage)
}
userApi.getUserList(this.currentPage,this.pageSize).then(response=>{
const resp = response.data;
if(resp.status==0){
this.users = resp.data.data
this.total = resp.data.total
this.roleOptions = resp.data.roles
// 计算总页数
this.totalPage = this.total / this.pageSize
}
})
},如何根据不同角色权限，展现不同的导航菜单
在AppNavbar组件中的getMenuNodes方法是用于生成menu菜单项的，里面.map方法中的
item为每一项，但是当前这个item是否要生成为菜单需要取决于当前登录用户的权限列表中
是否存在
首先由于新添加用户如果没有选择没有添加权限的角色，默认也应该需要展示首页，所以为/home添加isPublic:true/公开的属性
判断当前用户需要展示的菜单项
创建判断对应的item是否有权限方法
首先在components/AppNavbar中methods添加hasAuth方法
hasAuth(item) {
const { index, isPublic } = item;
// 当前登录用户的权限列表
const menus = memoryUtils.user.role.menus;
const username = memoryUtils.user.username;
// 1.如果当前用户admin 全部通过
// 2.如果当前item是公开的
// 3.如果当前用户有此item的权限 index是否在menus中
if (username == "admin" || isPublic || menus.indexOf(index) != -1) {
return true;
} else if (item.children) {
// 4.如果当前用户有此item的某个子item的权限
// 查看当前item子节点中的index时在用户权限列表中存在
// find方法会返回对应的元素 但是需要的时布尔值 所以两次取反强制转换
return !!item.children.find(
(child) => menus.indexOf(child.index) != -1
);
}
},然后在getMenuNodes方法中创建菜单前进行判断是否有item对应的权限
//根据导航菜单配置文件生成导航菜单项
getMenuNodes(menuList) {
return menuList.map((item) => {
//如果当前用户有item对应权限，才需要显示对应的菜单项
if (this.hasAuth(item)) {
if (!item.children) {
return (
<el-menu-item index={item.index}>
<i class={item.icon}></i>
<span slot="title">{item.title}</span>
</el-menu-item>
);
} else {
return (
<el-submenu index={item.index}>
<template slot="title">
<i class={item.title}></i>
<span>{item.title}</span>
</template>
{this.getMenuNodes(item.children)}
</el-submenu>
);
}
}
});
},
当前用户权限被修改处理
如果当前用户操作任何功能过程中发现权限被修改需重新登录获取最新权限
首先后端写好获取权限列表接口
然后在封装的xios对象中添加获取最新权限列表方法，并在请求拦截器中调用方法
const getMenus = () =>{
if(memoryUtils.user.role_id){
// 当前登录用户的角色id
const roleId = memoryUtils.user.role_id
// 当前登录用户的权限列表
const userMenus = memoryUtils.user.role.menus
// 根据当前登录角色id调用接口查看角色权限列表
request({
url:'/menus',
method:'post',
data:{
roleId
}
}).then(response=>{
const resp = response.data
if(resp.status==0){
// 后端返回的最新的权限列表
const menus = resp.data.menus
// 如果最新的权限列表数组长度和本地存储的用户权限列表数组长度一致 证明有可能没被修改
if(userMenus.length == menus.length){
// 判断两个数组中的内容是否相同 遍历权限列表数组中 遍历的同时看每一项是否都在新的权限列表数组中存在 如果不存在证明被修改了
userMenus.forEach(item=>{
if(menus.indexOf(item)==-1){
memoryUtils.user = {}
storageUtils.removeUser()
Message({
message:'当前用户权限被修改 请重新登录',
type:'warning'
})
window.location.href = '/login'
}
})
}else{
memoryUtils.user = {}
storageUtils.removeUser()
Message({
message:'当前用户权限被修改 请重新登录',
type:'warning'
})
window.location.href = '/login'
}
}
}).catch(error=>{
return
})
}
}根据老师和学管查询班级
由于班级多，页面显示的可能是第二页或者第三页，所以当我们查询的时候，调用searchData（）方法，要将当前页码设置为1——this.currentPage = 1;
在班级管理模块中，根据教师查询id和根据学管查询中 查询的方法出现输入不存在的教师，正常页面什么都不显示，但是现在却展现了所有用户数据
1.在班级管理模块中，根据教师查询id和根据学管查询中
this.searchMap.teacher._id 是空字符串
在后端，如果teacher_id是空字符串，即为false，根据判断，返回obj，obj为空对象，根据obj查询的find方法就为全部数据
解决方法：
给resTeacher.id和resManager.id都加判断
在学生管理的添加和编辑页面中，选择专业、学校的选项中，应该预先有数据，但是没有，其原因是没有value属性
解决方法：在专业和学校的方法中 将请求来的数据先用数组存储进来，在遍历这个数字组，把name用value接收
4488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
