启动项目后打开前端,展示的页面并不是我们需要的.我们需要修改一下它的menu部分
抓包分析
对登录操作进行抓包,可以看到它在登录之后会再进行一个GET请求
请求地址是:
http://localhost:2800/api/demo/menu?_=1664000921277
返回内容为的一小部分为
代码语言：javascript复制{
"title": "首页",
"icon": "el-icon-eleme-filled",
"type": "menu"
}
可以看出它对应的是右侧的导航部分
再看下它的children部分
{
"name": "dashboard",
"path": "/dashboard",
"meta": {
"title": "控制台",
"icon": "el-icon-menu",
"affix": true
},
"component": "home"
}
对应的是一个具体的组件
分析页面渲染
在前端代码里面找到对应请求的地方
在登录组件中进行查找
frontend/src/views/login/components/passwordForm.vue
//获取菜单
var menu = null
if (this.form.username === 'admin') {
menu = await this.$API.system.menu.myMenus.get()
} else {
menu = await this.$API.demo.menu.get()
}
if (menu.code === 200) {
if (menu.data.menu.length === 0) {
this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
type: 'error',
center: true
})
return false
}
this.$TOOL.data.set("MENU", menu.data.menu)
this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
} else {
this.$message.warning(menu.message)
return false
}
硬编码不是一个好的编程习惯,所以不在前端进行用户名的判断
修改
代码语言：javascript复制if (this.form.username === 'admin') {
menu = await this.$API.system.menu.myMenus.get()
} else {
menu = await this.$API.demo.menu.get()
}
为
代码语言：javascript复制menu = await this.$API.system.menu.myMenus.get()
修改请求地址中的一部分frontend/src/api/model/system.js
myMenus: {
url: `${config.API_URL1}/users/menu/`,
name: "获取我的菜单",
get: async function () {
return await http.get(this.url);
}
},
让它去请求我们的地址config.API_URL1
后台实现menu接口
在backend/apps/users/views.py编写
@action(methods=['get'], detail=False)
def menu(self, request, *args, **kwargs):
data = {
"code": 200,
"data": {
"menu": [
],
"permissions": [
"list.add",
"list.edit",
"list.delete",
"user.add",
"user.edit",
"user.delete"
]
},
"message": ""
}
page0 = {
"name": "home",
"path": "/home",
"meta": {
"title": "首页",
"icon": "el-icon-menu",
"type": "menu"
},
"children": [
{
"name": "dashboard",
"path": "/dashboard",
"meta": {
"title": "控制台",
"icon": "el-icon-menu",
"affix": True
},
"component": "home"
},
]
} # 首页
data['data']['menu'].append(page0)
return Response(data)
测试
退出账号后再次登录
查看导航栏部分
只剩下首页-导航栏了,与后台编写的一致
添加其他页面
下面在这个基础上添加一下我们需要的空白页面
代码语言：javascript复制page2 = {
"name": "manage",
"path": "/manage",
"meta": {
"title": "管理",
"icon": "el-icon-files",
"type": "menu"
},
"children": [
]
}
page2_4 = {
"path": "/manage/product",
"name": "product",
"meta": {
"title": "产品信息",
"icon": "el-icon-menu",
"type": "menu"
},
"component": "manage/product"
} # 产品信息
data['data']['menu'].append(page2)
page2['children'].append(page2_4)
新建一个manage/product文件夹来放产品信息组件
frontend/src/views/manage/product/index.vue
<template>
<div>我是产品信息页面</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
再次进入可以看到我们新写的页面了
至此,我们前端展示的内容就由后端的/users/menu/接口控制了
