快速生成基于vue-element的后台管理框架，实现短时间二次开发

你是否遇到过当你想要独立开发一个项目时对反复造轮子的烦扰？

这种流水线的操作实在让人受不了

而vue-element-template很好的帮你解决了这个烦恼

只需克隆下来，改改图标，模块名，甚至样式，就会变成一个全新的自己的项目

包含所有功能，excel表，富文本，登录，面包屑...

这篇文章先说一个基础版不臃肿的 框架， 下一篇在介绍更多功能的框架

因为什么？ 需要什么在复制粘贴拿什么呗

如果一个框架功能过于的丰富，大多都是你不需要的，你自己看的也烦是吧

基础版

多功能版，我称之为哆啦a梦的口袋

环境准备

node，git ,vue-cli脚手架

 npm config set registry https://registry.npmmirror.comnpm install -g @vue/cli

快速入门

拉取

 git clone https://gitee.com/panjiachen/vue-admin-template.git

进入目录

 cd vue-admin-template

依赖安装

 npm i

具体依赖如下

image-20240617104739724

启动

 npm run dev

效果图

image-20240617164422602

image-20240617112618419

具体功能配置

菜单

标题、图标

image-20240617113516242

image-20240617113617591

具体icon可用element官网查看

面包屑

image-20240617114111549

image-20240617114126480

顶部标签栏

这个东西

image-20240617163255328

复制keep-alive标签（切换组件缓存数据而不是销毁的标签 include表示要缓存的组件，使用数组保存，也就是cashViewd[]）

image-20240617161811498

script里添加数据cachedViews方法，用来获取Vuex共享状态数据中心的 已打开的标签栏， tagsView有俩数组，visitedView记录打开过的组件，cachedView存放keep-alive对应的组件路由

如果点击完某一个组件不想生成记录标签，在路由js里设置

image-20240617163537950

  cachedViews() {return this.$store.state.tagsView.cachedViews},

image-20240617161954349

使用computed而不是直接:include=this.$store.state.tagsView.cachedViews的原因

复用，假设你别的地方也用到了，岂不是还要再this.$store.state.tagsView.cachedViews？

可读，简洁明了，cachedView()直接简化了this.$store.state.tagsView.cachedViews

计算属性的响应式特点，变化后重新渲染并更新，如果是用:include=...的方法数据变化也不会自动更新，死板

可以在中间加入一点别的操作

复制具体显示的标签组件（从vue-element-admin里拷贝)

image-20240617164707374

复制tagsView，修改getter内容，store/index引入 tagsView，vuex的state数据中心引用

store/getter里添加数据

   visitedViews: state => state.tagsView.visitedViews,cachedViews: state => state.tagsView.cachedViews,

getter类似于一个computed计算属性，获取值的，类似暴露一个方法给其他组件调用import... store.getter.visited获取

最后在标签组件里引入，注册，并使用标签

image-20240617173444037

image-20240617173441879

OK至此结束

image-20240617175321026

但是当我们把所有标签都关掉后直接404了

image-20240617175715051

，所以我们至少要固定一个首页，加入如下数据，affix固钉子

image-20240617175628531

image-20240617175741805

关闭按钮消失

让我们来复习一下

1布局模块Layout的 Appmain 增加Keep alive，单向绑定数据cash加载缓存组件方法

2具体的TagsView组件拷贝

3复制关于vuex的tagsView到store/module ，修改getter文件，store/index.js引入

4layout布局模块的index引入注册并使用

  • 动/静态路由

静态：写死的菜单路由，无论管理员还是用户，都有首页菜单路由

动态：不同权限展现对应的菜单路由 可用菜单存放数据库，根据权限获取并显示

image-20240617181119147

  • 登录

image-20240617181714853

你可用爆改他的样式成为你自己的项目，这里我个人创意有限不做展示了

前后端交互（只看前端的接下来可以不用看了）

规范书写请求

image-20240617181951531

api对应的view界面，规范操作

登录API

image-20240617183251825

image-20240617184214721

方法调用-

派遣调动vuex的action里的方法，传递用户数据

commit表示提交改变。调用mutation方法改变状态数据

resolve标识promise 状态，当异步操作结束后，调用resolve还是reject方法改变promise状态

根据状态来选择调用.then()还是catch()，再拿响应的token值存cookie，然后下次发送时请求头携带该token以此来权限验证（登录的请求头不用携带token）

调用api/user

创建子父类工程

父工程

image-20240617205732874

子工程

image-20240617205810318

image-20240617205908865

这样子能继承父的所有依赖

创建测试库

 CREATE DATABASE vueElement DEFAULT CHARACTER SET UTF8;USE vueElement;​CREATE TABLE `user`(user_id INT PRIMARY KEY AUTO_INCREMENT COMMENT '用户编号',user_name VARCHAR(100) NOT NULL COMMENT '用户名',password VARCHAR(255) NOT NULL COMMENT '密码',token VARCHAR(255) DEFAULT 0 COMMENT '令牌')DEFAULT CHARSET='UTF8' COMMENT='用户表'​

三层架构

image-20240617211528901

后端测试

在mapper里ctrl+shift+T创建测试，添加SpringBootTest注解

image-20240617212030373

注入mapper，调用mp方法

添加resource模块

image-20240617212847737

image-20240618093435634

   <!--JDBC--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency>​<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency>

运行测试方法

image-20240618093735096

编写controller类

image-20240618095729104

image-20240618095843773

记得写@RestContoller和@Mapper加入spring小屋，就可以使用spring管理的bean。实现依赖注入，如果有一个注解没加就识别不到Mapper接口

前端测试

request.js介绍

创建并暴露该含有基础前缀的js给其他api调用 （该js文件可以在发请求的时候拦截interceptor并加工处理，加token值或加基础服务器ip前缀等。类似于提取公因式）

在收到响应时处理

image-20240618101813544

根据对应的状态码处理

不为20000说明向服务端发送的请求失败。Message提示框响应信息，默认为Error，类型type。和消息显示时间duration 5*1000 5秒

500打头的为服务端成功处理但不符合某种条件的状态码，例如登录过期等

MessageBox弹框提示登录状态过期。提示用户重新登录

点击ComfirmButton触发回调then。调用vuex状态管理里action方法的resetToken。再调mutation

image-20240618102823950

image-20240618103950227

为什么要将每一个action和mutation区分开？不直接action修改state呢。

方便使用devtools进行记录变更追踪

Object.assign(state, getDefaultState()) 调用对象Object.assgin融合方法，第一个参数为对象，后面的若干个为要融合到该对象身上的属性，这里调用获取状态方法 重置更新token-name-avatar头像

好了，这里执行完store状态方法后location.reload()重加载，判断token，无token 重定向到登录页面

image-20240618104413287

最后返回一个状态为reject的异步操作对象，该对象包含错误信息属性

环境变量

.env.dev/pro/test..的作用，在部署的时候切换 环境变量指向服务器IP地址

例如npm run build --mode production 会使用 .env.production 文件中的配置。

默认npm run dev情况下,它会使用 .env.development 文件中的环境变量。

综上，我们需要返回响应码20000的信息

修改baseURL环境变量的地址

vue.config.js加入如下代码 并注释调模拟数据的中间件mockServer

路由权限

image-20240618140956894

/store/modules/下新建permission。

 import { asyncRoutes, constantRoutes } from '@/router'​/*** Use meta.role to determine if the current user has permission* @param roles* @param route*/function hasPermission(roles, route) {if (route.meta && route.meta.roles) {return roles.some(role => route.meta.roles.includes(role))} else {return true}}​/*** Filter asynchronous routing tables by recursion* @param routes asyncRoutes* @param roles*/export function filterAsyncRoutes(routes, roles) {const res = []​routes.forEach(route => {const tmp = { ...route }if (hasPermission(roles, tmp)) {if (tmp.children) {tmp.children = filterAsyncRoutes(tmp.children, roles)}res.push(tmp)}})​return res}​const state = {routes: [],addRoutes: []}​const mutations = {SET_ROUTES: (state, routes) => {state.addRoutes = routesstate.routes = constantRoutes.concat(routes)}}​const actions = {generateRoutes({ commit }, roles) {return new Promise(resolve => {let accessedRoutesif (roles.includes('admin')) {accessedRoutes = asyncRoutes || []} else {accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)}commit('SET_ROUTES', accessedRoutes)resolve(accessedRoutes)})}}​export default {namespaced: true,state,mutations,actions}​

粘贴上述内容

image-20240618141439569

加入getter.js

image-20240618141454724

加入store/index.js

写controller

image-20240618171559607

image-20240618171743271

登录成功，进入，至此前后端连通，可以快乐的二开了

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Redis进阶 - Redis 淘汰策略

Redis进阶 - Redis 淘汰策略

我们知道Redis是分布式内存数据库&#xff0c;基于内存运行&#xff0c;可是有没有想过比较好的服务器内存也不过几百G&#xff0c;能存多少数据呢&#xff0c;当内存占用满了之后该怎么办呢&#xff1f;Redis的内存是否可以设置限制&#xff1f; 过期的key是怎么从内存中删除的…
阅读更多...
【独家发布】怎样有效发挥公司现有的资源优势

【独家发布】怎样有效发挥公司现有的资源优势

新上任的汪总发现公司存在管控力度弱、职责不清、职能执行不足等问题&#xff0c;阻碍了公司优势的发挥&#xff0c;因此决定对组织架构进行重新设计&#xff0c;但是&#xff0c;考虑到内部人力资源管理人才缺乏&#xff0c;而且组织架构的调整会涉及到复杂的人事变动和利益调…
阅读更多...
Charles抓包工具

Charles抓包工具

一、charles简介 1&#xff0c;charles是什么 Charles中文名叫青花瓷&#xff0c;它是一款基于HTTP协议的代理服务器&#xff0c;通过成为电脑或者浏览器的代理&#xff0c;然后截取请求和请求结果达到分析抓包的目的。 特点:跨平台、半免费 2&#xff0c;charles工作原理 前…
阅读更多...
英码科技携手昇腾打造“三位一体”智慧化工解决方案，使能化工产业管理更高效、智能

英码科技携手昇腾打造“三位一体”智慧化工解决方案，使能化工产业管理更高效、智能

我国是世界公认的化工大国。然而&#xff0c;大部分化工园区的日常管理方式较为传统&#xff0c;各园区、厂区的门禁、视频、停车场等子系统犹如一个个独立的“岛屿”&#xff0c;每个“岛屿”需要耗费大量人力及时间成本进行巡检、记录、上报&#xff0c;且不能做到全域、全时…
阅读更多...
基于matlab的不同边缘检测算子的边缘检测

基于matlab的不同边缘检测算子的边缘检测

1 原理 1.1 边缘检测概述 边缘检测是图像处理和计算机视觉中的基本问题&#xff0c;其目的在于标识数字图像中亮度变化明显的点。这些变化通常反映了图像属性的重要事件和变化&#xff0c;如深度不连续、表面方向不连续、物质属性变化和场景照明变化等。边缘检测在特征提取中…
阅读更多...
Windows环境利用 OpenCV 中 CascadeClassifier 分类器识别人眼 c++

Windows环境利用 OpenCV 中 CascadeClassifier 分类器识别人眼 c++

Windows环境中配置OpenCV 关于在Windows环境中配置opencv的说明&#xff0c;具体可以参考&#xff1a;VS2022 配置OpenCV开发环境详细教程。 CascadeClassifier 分类器 CascadeClassifier 是 OpenCV 库中的一个类&#xff0c;它用于实现一种快速的物体检测算法&#xff0c;称…
阅读更多...
AlmaLinux 更换CN镜像地址

AlmaLinux 更换CN镜像地址

官方镜像列表 官方列表&#xff1a;https://mirrors.almalinux.org/CN 开头的站点&#xff0c;不同区域查询即可 一键更改镜像地址脚本 以下是更改从默认更改到阿里云地址 cat <<EOF>>/AlmaLinux_Update_repo.sh #!/bin/bash # -*- coding: utf-8 -*- # Author:…
阅读更多...
多功能投票系统（ThinkPHP+FastAdmin+Uniapp）

多功能投票系统（ThinkPHP+FastAdmin+Uniapp）

让决策更高效&#xff0c;更民主&#x1f31f; ​基于ThinkPHPFastAdminUniapp开发的多功能系统&#xff0c;支持图文投票、自定义选手报名内容、自定义主题色、礼物功能(高级授权)、弹幕功能(高级授权)、会员发布、支持数据库私有化部署&#xff0c;Uniapp提供全部无加密源码…
阅读更多...
leetcode 二分查找·系统掌握 有效的完全平方数

leetcode 二分查找·系统掌握 有效的完全平方数

题目&#xff1a; 题解&#xff1a; 就是一个非常普通的二分查找&#xff0c;但是需要注意的是查找的上下界&#xff0c;因为是完全平方&#xff0c;所以可以把上界设为这个数的一半&#xff0c;但是要特殊处理num等于1的时候。 bool isPerfectSquare(int num) {if(num1)retur…
阅读更多...
四川汇聚荣科技有限公司靠谱吗？

四川汇聚荣科技有限公司靠谱吗？

在如今这个信息爆炸的时代&#xff0c;了解一家公司是否靠谱对于消费者和合作伙伴来说至关重要。四川汇聚荣科技有限公司作为一家位于中国西部地区的企业&#xff0c;自然也受到了人们的关注。那么&#xff0c;这家公司究竟如何呢?接下来&#xff0c;我们将从多个角度进行深入…
阅读更多...
Repetition Improves Language Model Embeddings论文阅读笔记

Repetition Improves Language Model Embeddings论文阅读笔记

文章提出了一种提高decoder-only LLM的embedding能力的方法&#xff0c;叫echo embeddingslast-token pooling&#xff08;即直接选最后一个token作为句子的embedding&#xff09;和直接mean pooling都不如文章提出的echo embedding&#xff0c;做法是把句子重复两次&#xff0…
阅读更多...
关于微信没有接入鸿蒙NEXT的思考

关于微信没有接入鸿蒙NEXT的思考

6月21日,纯血鸿蒙发布,国内的质疑声终于停止,不再被人喊叫换皮 Android 了.就连编程语言都是华为自研的。 可是发布会后微信却成了热点,因为余承东在感谢了一圈互联网企业,如:淘宝、支付宝、美团、京东、抖音、今日头条、钉钉、小红书、微博、B站、高德、WPS等等. 唯独没有感…
阅读更多...
如何设置Excel单元格下拉列表

如何设置Excel单元格下拉列表

如何设置Excel单元格下拉列表 在Excel中设置单元格下拉列表可以提高数据输入的准确性和效率。以下是创建下拉列表的步骤&#xff1a; 使用数据验证设置下拉列表&#xff1a; 1. 选择单元格&#xff1a; 选择你想要设置下拉列表的单元格或单元格区域。 2. 打开数据验证&…
阅读更多...
MK的前端精华笔记

MK的前端精华笔记

文章目录 MK的前端精华笔记第一阶段&#xff1a;前端基础入门1、&#xff08;1&#xff09;、&#xff08;2&#xff09;、 2、3、4、5、6、7、 第二阶段&#xff1a;组件化与移动WebAPP开发1、&#xff08;1&#xff09;、&#xff08;2&#xff09;、 2、3、4、5、6、7、 第三…
阅读更多...
textarea标签改写为富文本框编辑器KindEditor

textarea标签改写为富文本框编辑器KindEditor

下载 - KindEditor - 在线HTML编辑器 KindEditor的简单使用-CSDN博客 一、 Maven需要的依赖&#xff1a; 如果依赖无法下载&#xff0c;可以多添加几个私服地址&#xff1a; 在Maven框架中加入镜像私服 <mirrors><!-- mirror| Specifies a repository mirror site to…
阅读更多...
【PyQt5】python可视化开发：PyQt5介绍，开发环境搭建快速入门

【PyQt5】python可视化开发：PyQt5介绍，开发环境搭建快速入门

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
腾讯大牛，手把手教你建立自己的Android学习知识体系，附实例+面经+建议！

腾讯大牛，手把手教你建立自己的Android学习知识体系，附实例+面经+建议！

主要让我介绍了我的项目&#xff0c;又出了几个题让我做。 项目就是让我介绍我科研做的那个流式二维码数据传输系统&#xff0c;我介绍的时候面试官听的很仔细&#xff0c;让我详细介绍了拍到的二维码是如何定位、采样和识别转换成二进制流的。然后问我传输速率是多少&#xff…
阅读更多...
day41--Redis（三）高级篇之最佳实践

day41--Redis（三）高级篇之最佳实践

Redis高级篇之最佳实践 今日内容 Redis键值设计批处理优化服务端优化集群最佳实践 1、Redis键值设计 1.1、优雅的key结构 Redis的Key虽然可以自定义&#xff0c;但最好遵循下面的几个最佳实践约定&#xff1a; 遵循基本格式&#xff1a;[业务名称]:[数据名]:[id]长度不超过…
阅读更多...
Nuxt快速学习开发---Nuxt3视图Views

Nuxt快速学习开发---Nuxt3视图Views

Views Nuxt提供了几个组件层来实现应用程序的用户界面 默认情况下&#xff0c;Nuxt 会将app.vue文件视为入口点并为应用程序的每个路由呈现其内容 应用程序.vue <template> <div> <h1>Welcome to the homepage</h1> </div> </template> …
阅读更多...
【GD32F303红枫派使用手册】第二十二节 IIC-IIC OLED显示实验

【GD32F303红枫派使用手册】第二十二节 IIC-IIC OLED显示实验

22.1 实验内容 通过本实验主要学习以下内容&#xff1a; OLED驱动原理 IIC驱动OLED显示操作 22.2 实验原理 OLED模块的驱动芯片为SSD1306&#xff0c;其显存大小总共为 128*64bit 大小&#xff0c;SSD1306 将这些显存分为了 8 页&#xff0c;其对应关系如下所示&#xff1…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023