6.前端·新建子模块与开发(常规开发)

news2024/10/6 12:20:24

文章目录

  • 学习资料
  • 常规开发
    • 创建组件与脚本
    • 菜单创建-新增自定义图标
    • 菜单创建-栏目创建

学习资料

https://www.bilibili.com/video/BV13g411Y7GS?p=12&vd_source=ed09a620bf87401694f763818a31c91e

常规开发

创建组件与脚本

首先新建前端的目录结构,属于自己业务模块的专有包。然后在这个模块下,在针对各个实体建立包。
在这里插入图片描述
然后从若依的模块中找一个相似的页面,copy过来,比如岗位管理。
在这里插入图片描述
整个index.vue就2个部分。上面是页面,下面是js方法,让页面动起来。
在这里插入图片描述
template中的对应关系:
在这里插入图片描述
js中的区域的介绍:
在这里插入图片描述
打开页面之后,调用getlist,如下:
在这里插入图片描述
所有的api脚本都写在api包里面。
在这里插入图片描述
这个页面所有的ajax请求,都被封装在了这个js中。

在这里插入图片描述
所以我们也要在api包下面创建属于我们自己的js包。

在这里插入图片描述
需要在这个pill文件夹下面,写自己的js,按照业务模块,可以新建一个factory.js。

菜单创建-新增自定义图标

找到若依前台的菜单管理界面,点击新增,如下图。
在这里插入图片描述
菜单的图标,放在前端的icons文件夹下了。可以新增自己的图标,放进去即可。
在这里插入图片描述
图标可以去阿里巴巴的矢量图库去寻找。
在这里插入图片描述

菜单创建-栏目创建

注意:删除若依官网菜单,需要将这个菜单的权限,从其它的角色中都删除,才被允许删除。

根据新建菜单的类型,选择目录,菜单,还是按钮。 先来新建我们模块的目录。
在这里插入图片描述
菜单名称就是菜单显示的名字。如果是模块的菜单,路由地址可以写你那个模块的名字,在这个案例中就是pill。
在这里插入图片描述
然后完善菜单的所有内容。
在这里插入图片描述

再来添加目录中的菜单。可以参考一下若依其它菜单填写的内容。
在这里插入图片描述
路由地址就是前端view下面的factory目录,所以填factory。
组件路径就是pill下面vue文件的完整路径。
权限字符就是访问后端方法的时候,需要具备的权限类型,这个需要看controller上面的方法。
配置完之后,刷新前端,页面就出来了。
在这里插入图片描述

不过出来的是之前粘贴的内容,到这里我们前端还没写呢。显示的是post的vue的内容。

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

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

相关文章

CTF 全讲解:[SWPUCTF 2022 新生赛]webdog1__start

文章目录 参考环境题目learning.php信息收集isset()GET 请求查询字符串全局变量 $_GET MD5 绕过MD5韧性脆弱性 md5()弱比较隐式类型转换字符串连接数学运算布尔判断 相等运算符 MD5 绕过科学计数法前缀 0E 与 0e绕过 start.php信息收集头部检索 f14g.php信息收集 探秘 F1l1l1l1…

Springboot 实践(18)Nacos配置中心参数自动刷新测试

前文讲解了Nacos 2.2.3配置中心的服务端的下载安装,和springboot整合nacos的客户端。Springboot整合nacos关键在于使用的jar版本要匹配,文中使用版本如下: ☆ springboot版本: 2.1.5.RELEASE ☆ spring cloud版本 Greenwich.RELEASE ☆ sp…

Python 算数运算符

视频版教程 Python3零基础7天入门实战视频教程 Python支持所有的基本算术运算符,这些算术运算符用于执行基本的数学运算,如加、减、乘、除和求余等。下面是7个基本的算术运算符。 以下,假设变量a为10,变量b为21: 实…

OpenCV之YOLOv3目标检测

💂 个人主页:风间琉璃🤟 版权: 本文由【风间琉璃】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 目录 前言 一、预处理 1.获取分类名 2.获取输出层名称 3.图像尺度变换 二…

【JavaSE笔记】初识Java

一、前言 Java是一种非常优秀的程序设计语言,它具有令人赏心悦目的语法和易于理解的语义。 本文将通过一个简单的Java程序,介绍Java的一些基础内容。 二、Java基本结构 1、简单的Java程序 从最简单的一个Java程序开始逐渐了解Java语言。 以下是一段…

数学建模——微分方程介绍

一、基础知识 1、一阶微分方程 称为一阶微分方程。y(x0)y0为定解条件。 其常规求解方法: (1)变量分离 再两边积分就可以求出通解。 (2)一阶线性求解公式 通解公式: 有些一阶微分方程需要通过整体代换…

echarts的折线图,在点击图例后,提示出现变化,不报错。tooltip的formatter怎么写

在点击图例的年后,提示框会相应的变化,多选和单选都会响应变化。tooptip的重度在formatter tooltip:{show:true,trigger:"axis",alwaysShowContent:true,triggerOn:"mousemove",textStyle:{color:"#fff"},backgroundColor…

结构体-时间的计算

任务描述 本关任务需要你编写函数计算一个时间之前“xx小时xx分xx秒”的时间是多少。 以24小时制的格式记录当前时间,譬如“09:19:52”,表示上午9点19分52秒,则“1小时20分30秒”前的时间应该是“同一天”的“07:59:22”。 提示:…

Scapy 解析 pcap 文件从HTTP流量中提取图片

Scapy 解析 pcap 文件从HTTP流量中提取图片 前言一、网络环境示例二、嗅探流量示例三、pcap 文件处理最后参考 ​ 作者:高玉涵 ​ 时间:2023.9.17 10:25 ​ 环境:Linux kali 5.15.0-kali3-amd64,Python 3.11.4,scapy…

解决Springboot使用Junit测试时对数据库的修改无效

现象 在使用Junit做单元测试的过程中,比如对mybatis的dao进行单元测试,发现对数据库的select操作正常,可以获取数据,但insert、update、delete操作即使运行不报错,仍然不能不能对数据产生修改和插入。 原因和解决 原…

d3dx9_42.dll丢失修复指南,如何修复丢失的d3dx9_42.dll文件

d3dx9_42.dll是DirectX 9的一个动态链接库文件,它是许多游戏和软件的必需组件。如果缺少这个文件,可能会导致程序无法正常运行。本文将详细讲解d3dx9_42.dll的作用以及丢失的原因,并提供5种修复方法。 一、d3dx9_42.dll的作用 1. d3dx9_42.d…

IDEA创建完Maven工程后,右下角一直显示正在下载Maven插件

原因: 这是由于新建的Maven工程,IDEA会用它内置的默认的Maven版本,使用国外的网站下载Maven所需的插件,速度很慢 。 解决方式: 每次创建 Project 后都需要设置 Maven 家目录位置(就是我们自己下载的Mav…

操作系统学习笔记-精简复习版

文章目录 操作系统概述1、操作系统2、主要功能3、用户态和内核态4、系统调用 进程管理1、进程和线程2、引入线程的好处3、线程间同步4、进程控制块 PCB5、进程的状态6、进程的通信方式7、进程的调度算法8、僵尸进程&孤儿进程9、死锁 内存管理1、内存碎片2、内存管理3、虚拟…

2023面试知识点一

1、新生代和老年代的比例 默认的,新生代 ( Young ) 与老年代 ( Old ) 的比例的值为 1:2 ( 该值可以通过参数 –XX:NewRatio 来指定 ),即:新生代 ( Young ) 1/3 的堆空间大小。老年代 ( Old ) 2/3 的堆空间大小。其中,新生代 ( …

WebGoat搭建和Yakit学习

环境搭建 jdk版本:openjdk version "17.0.5“ WebGoat版本:webgoat-server-8.1.0.jar 环境不同有很大可能不能搭建成功 运行命令:java -jar webgoat-server-8.1.0.jar --server.port8888 --server.address192.168.142.131 搭建完成后…

SOLIDWORKS Composer位置关键帧的使用

SOLIDWORKS Composer是专业的SOLIDWORKS及3D文件处理的动画制作软件,作为SOLIDWORKS 产品线下的一个明星存在。 SOLIDWORKS Composer几乎可以处理任何SOLIDWORKS的模型文件并将之转化成可以动作的机械动画,可以引用在企业的网站、产品说明书以及工作指导…

卡尔曼滤波(Kalman Filter)原理浅析-数学理论推导-1

目录 前言数学理论推导1. 递归算法2. 数学基础结语参考 前言 最近项目需求涉及到目标跟踪部分,准备从 DeepSORT 多目标跟踪算法入手。DeepSORT 中涉及的内容有点多,以前也就对其进行了简单的了解,但是真正去做发现总是存在这样或者那样的困惑…

springboot和vue:一、cs/bs区别+maven介绍与其仓库配置

cs/bs的区别: ​​ C/S: 1.交互性强,具有安全访问模式,网络流量低,响应速度快, 2.因为客户端负责大多数业务逻辑和UI演示,所以也被称为胖客户端。 3.C/S结构的软件需要针对不同的操作系统开发…

QT之QML开发 锚点布局

QML中经常会用到锚点布局,本篇简单演示一下锚点布局的使用。 目录 1.锚点布局的说明 2.锚点布局三等分窗口 3.锚点布局拆分窗口 4.窗口拖动 5.完整代码 1.锚点布局的说明 2.锚点布局三等分窗口 main.qml import QtQuick 2.15 import QtQuick.Window 2.15 imp…

二叉树的具体原理及实现

文章目录 一.树的专业术语二.二叉树的原理三.常见的二叉树分类1.完全二叉树2.平衡二叉树3.二叉搜索树 四.二叉搜索树算法具体实现五.二叉搜索树具体实现代码 一.树的专业术语 首先先介绍树的专业术语 二.二叉树的原理 二叉搜索树(Binary Search Tree&#xff0c…