标准版admin后台页面添加及开发操作流程及注意事项

news2024/10/18 15:02:56

基础介绍

CRMEB后台管理是基于vue2技术栈进行开发搭建的

Vue Router 使用的是v3版本,mode为history模式 如需修改 mode 请在src/setting.js中修改routerMode

新建页面

新建路由

image.png

根据目录结构,需要在src/router/modules中对应模块中,添加对应路由(如有其他模块建议另行创建)

实例中:该页面的访问路径(路由地址)为 /admin/order/list

// 实例  该路由创建成功后 访问路径为 /admin/order/list

import BasicLayout from '@/components/main';

const pre = 'order_';

export default {
  path: '/admin/order',
  name: 'order',
  header: 'order',
  redirect: {
    name: `${pre}list`,
  },
  component: BasicLayout,   // 布局组件
  children: [
    {
      path: 'list',
      name: `${pre}list`,
      meta: {
        auth: ['admin-order-storeOrder-index'],  // 路由权限
        title: '订单管理',
      },
      component: () => import('@/pages/order/orderList/index'),  // 动态引入 对应pages中文件路径
    }
  ],
};

Copy

注意

如果你添加的是新建模块 指:在src/router/modules中新建路由文件

你还需要再 src/router/routers.js中进行引入

59b87202212131220567457.png

在上方引入并在下方使用

创建文件

src/pages下创建模块文件 例如test,模块中在添加对应的功能文件

image.png

添加规则

运行起后台admin项目找到对应目录 设置/权限管理/权限规则

image.png

69e7d20221213122115851.png

如果是创建一级目录点击图中1添加规则,如果是在对应一级模块下创建二级或三级目录 根据列表及展开项,点击后方2添加子菜单进行添加。

添加子菜单注意事项

51022202212131221297429.png

必填项

按钮名称、路由地址为必填项(如果创建一级目录,需添加对应图片,可点击图片后方icon进行选择)

路由

路由地址参加第一步中 路由创建后的路由地址进行添加 例如:/admin/user/list

权限

权限标识参考第一部中 meta中auth 填写的权限规则

其他问题

1.如果需要添加规则效验可在 src/router/index.js中进行添加具体使用方法可参考官方示例导航守卫

2.如果按上面布置添加完成页面却出现 该页面不存在时。请检查路由文件及权限规则中路径添加是否正确。

3.如果出现 因权限无法访问问题

  • 请检查规则添加的权限与路由文件中的权限规则是否一致
  • 检查 设置/角色管理中的菜单权限

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2217855.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

FineReport 数据显示方式

在客户端的浏览器中,查看报表的效果都是通过对基础数据进行加工而来的。 制作一张报表模板,首先需准备报表所需的基础数据。 基础数据的来源方式有多种,不管数据来源于哪种方式,经过哪些预处理,最终都是返回如下图1所示…

mysql数据同步ES方案---Canal

引言 之前公司开发社交APP的时候 在开发和初上线阶段,我们一直采用的是 MySQL 来存储用户的各种数据,满足基本的查询需求。当时系统业务量小,数据规模有限,因此 MySQL 能很好地支持查询操作,响应速度快,系…

你认为BI不需要建模,那就大错特错了

BI 是一种数据类的技术解决方案,将许多来自不同企业业务系统的数据提取有分析价值的数据进行清洗、转换和加载,就是抽取Extraction、转换 Transformation、加载Loading 的ETL过程,最终合并到一个数据仓库中,按照一定的建模方式例如…

【学习】安装cudf和cuml

为了把cpu上跑的SVM程序搬到GPU上跑,需要装这俩包,但是搞了半天装不上,最后发现是清华源的问题。换了中科大的源没问题了。 rapids官网:RAPIDS | GPU Accelerated Data Science 官网安装:Installation Guide - RAPID…

安装CentOS 8镜像和创建CentOS 8虚拟机教程

一、安装虚拟机 网上查找教程,我用的是VMware 17 二、下载CentOS 8镜像 1.阿里云下载CentOS 8镜像 centos安装包下载_开源镜像站-阿里云 (aliyun.com) 选择需要下载的版本,(建议)下载dvd1版本的iso(也有下载boot版本的iso,创…

用柔性神经k-Opt学习搜索路径问题的可行和不可行区域(未完,先看前驱文章L2S)

文章目录 Abstract1 IntroductionAbstract 介绍了一种名为 Neural k-Opt(NeuOpt)的新型学习搜索(L2S)求解器,用于解决路径问题。它学习执行基于定制的动作分解方法和定制的循环双流(Recurrent Dual-Stream)解码器的灵活 k-opt 交换。 作为一项开创性的工作,我们绕过了…

使用YOLOv8进行实时人员跟踪和计数

在计算机视觉领域,实时跟踪和统计人数对于各种应用至关重要,从监控到事件管理。在这篇博客文章中,我们将探讨如何利用YOLOv8和ByteTracker实现准确的人数统计。 引言 YOLOv8(You Only Look Once,第八版)是一种以其速度和准确性而闻名的最新对象检测模型。 ByteTracker是一…

Oracle DECODE 丢失时间精度的原因与解决方案

在Oracle数据库中,DECODE 函数是一个非常实用的条件处理函数,通常用于替代简单的 CASE WHEN 语句。它根据给定的值列表进行匹配,如果匹配成功则返回相应的值。如果不匹配,返回一个默认值。 问题描述 SELECT DECODE(-21, -1, NU…

低代码可视化-uniapp购物车页面-代码生成器

购物车页面是电子商务网站或应用程序中的一个关键功能页面,它允许用户查看、编辑和管理他们选择加入购物车的商品。下面通过低代码可视化实现一个uniapp购物车页面,把购物车整个事件都集成进去。实现完成后可以保存为页面模板。 收货地址选择 如果尚未…

基于SpringBoot+Vue+uniapp微信小程序的垃圾分类系统的详细设计和实现(源码+lw+部署文档+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念,提供了一套默认的配置,让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…

Cursor 、v0 和 Bolt.new:当今 AI 编程工具的全面解析与对比

AI 驱动的编码工具正在迅速发展,每次新版本的发布都承诺将改变我们的开发流程。这些工具旨在通过智能代码建议、重复任务的自动化,甚至从自然语言提示生成整个代码片段来提升生产力。10月4日,StackBlitz 推出了 Bolt.new,进一步丰…

建议大家尽早培养自己的表达能力!分享6个有效工具~

在日常工作生活中,有效沟通是成事的不二法则。现在很多人不热衷沟通,对人际交往没热情,但是会和不用,与不想也不会是两回事,所以掌握一些沟通技巧很有必要。 如何进行有效沟通?推荐大家进行结构化表达和沟…

代码复现(五):GCPANet

文章目录 net.py1.class Bottleneck:残差块2.class ResNet:特征提取3.class SRM:SR模块4.class FAM:FIA模块5.class CA:GCF模块6.class SA:HA模块7.class GCPANet:网络架构 train.pytest.py 论文…

计算机视觉——人像的分割与无缝融合

1.概述 新加坡现代汽车集团创新中心的一篇新论文提供了一种在计算机视觉中分离“融合”人像的方法——在这些情况下,对象识别框架发现一个人在某种程度上与另一个人“太接近”(例如例如“拥抱”动作或“站在后面”的姿势),并且无法…

从零实现数据结构:堆的实现和简单堆排序

事先说明&#xff0c;这里采用的都是小堆。下面是代码中的小堆示意图 这里向大家分享一个常见数据结构可视化的网址&#xff1a;Data Structure Visualization (usfca.edu) 声明部分heap.h&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include &…

Turtle画树丛

Turtle画树丛&#xff0c;50棵树&#xff0c;左侧的树向左倾斜&#xff0c;右侧的树向右倾斜。 完整代码如下&#xff1a; import turtle import randomdef draw_tree(pos,hd,angle,len,init_len,level): t.penup()t.goto(pos)t.pendown()t.setheading(hd)if pos[0]<0:t…

基于C++实现(控制台)职工信息管理系统

高级程序设计实验报告 一、实验内容 设计一个职工信息管理案例&#xff0c;实现不同类别职工的工资数据。职工的种类包括&#xff1a;正式职工和临时工。定义一个基本的职工类&#xff0c;基本信息包括&#xff1a;编号、姓名、性别、年龄、家庭住址、基本职务工资。派生出正…

当前python文件所在位置的上级文件夹的路径表示法:..的等价表示法os.pardir

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 当前python文件 所在位置的上级文件夹 的路径表示法&#xff1a;.. 的等价表示法 os.pardir [太阳]选择题 下列说法中正确的是? import os parent_dir os.pardir print("【显示】…

Axure重要元件三——中继器表单制作

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 本节课&#xff1a;中继器表单制作 课程内容&#xff1a;利用中继器制作表单 应用场景&#xff1a;台账、表单 案例展示&#xff1a; 步骤一&#xff1a;建立一个背景区…

【WPF】04 Http消息处理类

这里引入微软官方提供的HttpClient类来实现我们的目的。 首先&#xff0c;介绍一下官方HttpClient类的内容。 HttpClient 类 定义 命名空间: System.Net.Http 程序集: System.Net.Http.dll Source: HttpClient.cs 提供一个类&#xff0c;用于从 URI 标识的资源发送 HTTP 请…