13.寻光集后台管理系统-控制前端菜单栏展示内容

zx钟

发布于 2022-12-02 16:10:39

3630

发布于 2022-12-02 16:10:39

文章被收录于专栏：测试游记测试游记

启动项目后打开前端,展示的页面并不是我们需要的.我们需要修改一下它的menu部分

抓包分析

对登录操作进行抓包,可以看到它在登录之后会再进行一个GET请求

请求地址是:

http://localhost:2800/api/demo/menu?_=1664000921277

返回内容为的一小部分为

{
    "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
}

硬编码不是一个好的编程习惯,所以不在前端进行用户名的判断

修改

if (this.form.username === 'admin') {
  menu = await this.$API.system.menu.myMenus.get()
} else {
  menu = await this.$API.demo.menu.get()
}

为

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)

测试

退出账号后再次登录

查看导航栏部分

只剩下首页-导航栏了,与后台编写的一致

添加其他页面

下面在这个基础上添加一下我们需要的空白页面

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/接口控制了

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-09-24，如有侵权请联系 cloudcommunity@tencent.com 删除

api

vue.js

安全

网站

本文分享自测试游记微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度