VUE+Ant Design Vue+.Net Core搭建后台框架-(8)定义系统菜单数据

我们最后一步就是构建前端需要获取系统菜单数据,本节就是定义一份模拟数据。

需要在授权策略PermissionRequirement中添加一个对于/api/permission/getmenu接口的访问权限

 public class PermissionRequirement: IAuthorizationRequirement
    {

        public bool Vaild(string username, string path)
        {
            path = path.ToLower();
            
            if (path == "/api/auth/requesttoken")
            {
                return true;
            }
            if (string.IsNullOrEmpty(username))
                return false;

            //用户temp只能访问/api/weather/v1
            if (username == "temp" &&  path == "/api/weather/v1"  )
            {
                return true;
            }

            //用户admin能访问的接口路径
            if (username == "admin" &&
                (path == "/api/weather/v" || path == "/api/weather/v1" ||
                path == "/api/permission/getmenu"  ))
            {
                return true;
            }

            return false;
        }
    }

 定义一个系统菜单数据结构

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.Text.Json.Serialization;
using System.Threading.Tasks;

namespace RazorPagesMovie.Models
{
    public class SystemMenuItem
    {
        public SystemMenuItem()
        {
            ChildMenus = new List<SystemMenuItem> { };
            IsTopMenu = false;
        }
        /// <summary>
        /// 菜单URL
        /// </summary>
        [JsonPropertyName("url")]
        public string Url { get; set; }
        /// <summary>
        /// 菜单名称
        /// </summary>
        [JsonPropertyName("title")]
        public string MenuName { get; set; }
        /// <summary>
        /// 菜单父节点ID
        /// </summary>
        [JsonPropertyName("parentIndex")]
        public string ParentMenuId { get; set; }
        /// <summary>
        /// 菜单ID
        /// </summary>
        [JsonPropertyName("index")]
        public string MenuId { get; set; }
        /// <summary>
        /// 菜单图标
        /// </summary>
        [JsonPropertyName("icon")]
        public string Icon { get; set; }
        /// <summary>
        /// 是否是顶层菜单
        /// </summary>
        [JsonPropertyName("topMenu")]
        public bool IsTopMenu { get; set; }
        /// <summary>
        /// 加载VUE的组件
        /// </summary>
        [JsonPropertyName("component")]
        public string Component { get; set; }

        /// <summary>
        /// 子菜单
        /// </summary>
        [JsonPropertyName("childItems")]
        public List<SystemMenuItem> ChildMenus { get; set; }
    }
}
using Microsoft.AspNetCore.Mvc;
using RazorPagesMovie.Control;
using RazorPagesMovie.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace RazorPagesMovie.Permission
{
    [Route("api/permission")]
    public class PermissionController : BaseController
    {
        [HttpGet, Route("getmenu")]
        public WebResponseContent SystemMenu()
        {
            List<SystemMenuItem> menus = new List<SystemMenuItem>();
            var m1=new SystemMenuItem { Icon = "user", IsTopMenu = true, MenuId = "gcgl", MenuName = "工程管理" };
            var m2=new SystemMenuItem { Icon = "appstore", IsTopMenu = true, MenuId = "xtyj", MenuName = "系统预警" };
            var m3=new SystemMenuItem { Icon = "mail", IsTopMenu = true, MenuId = "tjfx", MenuName = "统计分析" };
            var m4=new SystemMenuItem { Icon = "skype", IsTopMenu = true, MenuId = "xtgl", MenuName = "系统管理" };
            BulidMenu1(m1);
            BulidMenu2(m2);
            BulidMenu3(m3);
            BulidMenu4(m4);

            menus.Add(m1);
            menus.Add(m2);
            menus.Add(m3);
            menus.Add(m4);

            return WebResponseContent.GetResult(menus);
        }

        private void BulidMenu1(SystemMenuItem menu)
        {
          var childMenu=  new SystemMenuItem { Icon = "team", ParentMenuId=menu.MenuId,   MenuId =Guid.NewGuid().ToString(),
                MenuName = "合同管理"
            };
            childMenu.ChildMenus.Add(new SystemMenuItem
            {
                ParentMenuId = childMenu.MenuId,
                MenuName = "管线合同",
                MenuId = "test1",
                Url = "/test1_s", 
                Component= "test.vue"
            });
            childMenu.ChildMenus.Add(new SystemMenuItem
            {
                ParentMenuId = childMenu.MenuId,
                MenuName = "其它合同",
                MenuId = "test2",
                Url = "/test2",
                Component = "test1.vue"
            });
            childMenu.ChildMenus.Add(new SystemMenuItem
            {
                ParentMenuId = childMenu.MenuId,
                MenuName = "单项合同",
                MenuId = "test3",
                Url = "/test3",
                Component = "test2.vue"
            });

            menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "shake",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "项目交接"
            });
            menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "link",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "管线工程"
            });
            menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "safety",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "合同借阅"

            });
            menu.ChildMenus.Add(childMenu);


        }
        private void BulidMenu2(SystemMenuItem menu)
        {
            menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "setting",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "进度预警"
            }); menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "shop",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "应开未开"
            }); menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "link",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "应完未完"
            }); menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "idcard",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "工程变更"
            });
        }
        private void BulidMenu3(SystemMenuItem menu)
        {
            menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "gift",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "月度报表"
            }); menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "hdd",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "合同汇总"
            }); menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "link",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "动态资金"
            }); menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "contacts",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "造价汇总"
            });
        }
        private void BulidMenu4(SystemMenuItem menu)
        {
            menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "audio",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "人员管理"
            }); menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "bank",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "角色管理"
            }); menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "link",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "菜单管理"
            }); menu.ChildMenus.Add(new SystemMenuItem
            {
                Icon = "alert",
                ParentMenuId = menu.MenuId,
                MenuId = Guid.NewGuid().ToString(),
                MenuName = "日志管理"
            });
        }
    }
}

(上一篇)VUE+Ant Design Vue+.Net Core搭建后台框架-(7)结合JWT实现访问自定义授权

(下一篇)VUE+Ant Design Vue+.Net Core搭建后台框架-(9)VUE组件导入和配置

### 在 Vue2 和 ant-design-vue 中集成 Formily 为了在基于 Vue2 和 ant-design-vue 的项目中成功集成 Formily,需按照特定的操作流程执行。这不仅涉及安装必要的依赖包,还包括配置和初始化工作。 #### 安装依赖项 首先,在命令行工具中进入项目根目录并执行如下 npm 命令来安装所需的软件包: ```bash npm install @formily/vue formily-antdv@next --save ``` 此命令会下载 `@formily/vue` 及其适配器 `formily-antdv` 到当前工程里[^1]。 #### 修改 main.js 文件 接着修改项目的入口文件 `main.js` 或者对于 TypeScript 用户来说可能是 `main.ts` ,添加以下代码片段用于注册 Formily 插件以及设置主题样式: ```javascript import Vue from 'vue'; // 导入 Ant Design Vue 组件库及其默认样式表 import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; // 导入 Formily 核心模块与 AntDv 适配层 import { createForm, setValidateMessages } from '@formily/core'; import { FormProvider, Field } from '@formily/vue'; import { FormItem as AFormItem, Input as AInput, Select as ASelect } from 'formily-antdv'; Vue.config.productionTip = false; Vue.use(Antd); const form = createForm(); setValidateMessages({ required: '${label} 不可为空', }); new Vue({ render(h){ return ( <FormProvider form={form}> {/* 应用程序其他部分 */} </FormProvider> ) } }).$mount('#app'); ``` 这段脚本完成了几个重要任务:创建了一个新的 Form 实例;设置了验证消息模板;最后把整个应用程序包裹在一个 `<FormProvider>` 组件内部以使所有子组件都能访问同一个共享状态对象 `form`. #### 使用 Formily 表单控件 现在可以在任何页面或者组件里面像这样声明式地定义复杂的数据输入界面了: ```html <template> <a-form-model :model="formData"> <!-- 文本框 --> <AFormItem name="username" label="用户名"> <Field name="username" decorator="[AFormItem]" component="{...AInput}" /> </AFormItem> <!-- 下拉菜单 --> <AFormItem name="gender" label="性别"> <Field name="gender" decorator="[AFormItem]" component="{...ASelect}"> <ASelect.Option value="male">男</ASelect.Option> <ASelect.Option value="female">女</ASelect.Option> </Field> </AFormItem> <!-- 提交按钮 --> <button type="submit"@click.prevent="handleSubmit()">提交</button> </a-form-model> </template> <script> export default { data() { return { formData: {}, }; }, methods:{ handleSubmit(){ this.$refs.form.validate().then(values => console.log('success', values)).catch(error => console.error('error', error)); } } }; </script> ``` 以上 HTML 结构展示了如何利用 Formily 来简化表单项的渲染逻辑,并且保持良好的语义化标签结构[^4].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QQ978124155

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值