当前位置: 首页 > news >正文

快速生成基于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

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

相关文章:

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

你是否遇到过当你想要独立开发一个项目时对反复造轮子的烦扰&#xff1f; 这种流水线的操作实在让人受不了 而vue-element-template很好的帮你解决了这个烦恼 只需克隆下来&#xff0c;改改图标&#xff0c;模块名&#xff0c;甚至样式&#xff0c;就会变成一个全新的自己的项目…...

PCIe 7.0 要来了,一文看懂PCIe发展和技术

PCIe&#xff08;Peripheral Component Interconnect Express&#xff09;&#xff0c;即外围组件高速串行扩展总线标准&#xff0c;自其诞生以来&#xff0c;已成为计算机硬件中不可或缺的一部分。它以其高速串行通信能力和不断演进的技术规范&#xff0c;满足了日益增长的数据…...

API-事件类型

学习目标&#xff1a; 掌握事件类型 学习内容&#xff1a; 事件类型鼠标事件焦点事件键盘事件文本事件focus选择器案例 事件类型&#xff1a; 鼠标事件&#xff1a; <title>事件类型-鼠标事件</title><style>div {width: 200px;height: 200px;background-c…...

解决poweroff时需要等待其他服务关闭问题

当我们在执行poweroff或者reboot时会出现某个服务需要等待才能关闭系统,这个时候就可以在服务中添加如下: After=shutdown.target Conflicts=reboot.target halt.target poweroff.target Before=shutdown.target reboot.target halt.target poweroff.target具体实例: [Uni…...

ThinkPHP-导入Excel表格(通用版)

一、版本说明 1.PHP8.2、MySQL8.0、ThinkPHP8.0 2.使用前安装phpspreadsheet composer require phpoffice/phpspreadsheet 二、技术说明 因本人采用前后端分离&#xff0c;因此上传文件以及导入表格为分离开发&#xff0c;如无需分离开发则自行合并开发即可。 1.第一步&a…...

毕昇jdk教程

毕昇jdk教程指南链接&#xff1a;Wiki - Gitee.com...

【R语言】地理探测器模拟及分析(Geographical detector)

地理探测器模拟及分析 1. 写在前面2. R语言实现2.1 数据导入2.2 确定数据离散化的最优方法与最优分类2.3 分异及因子探测器&#xff08;factor detector&#xff09;2.4 生态探测器&#xff08;ecological detector&#xff09;2.5 交互因子探测器&#xff08;interaction dete…...

深入理解Qt属性系统[Q_PROPERTY]

Qt 属性系统是 Qt 框架中一个非常核心和强大的部分&#xff0c;它提供了一种标准化的方法来访问对象的属性。这一系统不仅使得开发者能够以一致的方式处理各种数据类型&#xff0c;还为动态属性的管理提供了支持&#xff0c;并与 Qt 的元对象系统紧密集成。在这篇文章中&#x…...

【C语言课程设计】员工信息管理系统

员工信息管理系统 在日常的企业管理中&#xff0c;员工信息的管理显得尤为重要。为了提高员工信息管理的效率&#xff0c;我们设计并实现了一个简单的员工信息管理系统。该系统主要使用C语言编写&#xff0c;具备输入、显示、查询、更新&#xff08;增加、删除、修改&#xff…...

「动态规划」如何求最长递增子序列的长度?

300. 最长递增子序列https://leetcode.cn/problems/longest-increasing-subsequence/description/ 给你一个整数数组nums&#xff0c;找到其中最长严格递增子序列的长度。子序列是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其…...

深度神经网络DNN概念科普

深度神经网络DNN概念科普 深度神经网络&#xff08;Deep Neural Network, DNN&#xff09;是机器学习领域中一类具有多层结构的神经网络模型&#xff0c;它能够通过学习数据中的复杂模式来解决非线性问题。下面是对深度神经网络的详细解析&#xff1a; 基本组成部分 输入层&…...

Tomcat WEB站点部署

目录 1、使用war包部署web站点 2、自定义默认网站目录 3、部署开源站点&#xff08;jspgou商城&#xff09; 对主机192.168.226.22操作 对主机192.168.226.20操作 上线的代码有两种方式&#xff1a; 第一种方式是直接将程序目录放在webapps目录下面&#xff0c;这种方式…...

IPv6 中 MAC 33:33 的由来

一、33:33 由来 1. RFC9542 - 2024-05-02 Note IANA allocates addresses under the IANA OUI (00-00-5E) as explained in [RFC9542]. Unicast addresses under the IANA OUI start with 00-00-5E, while multicast addresses under the IANA OUI start with 01-00-5E. In t…...

告别手动邮件处理:使用imbox库轻松管理你的收件箱

imbox库简介&#xff1a; imbox是一个强大的Python库,专为与IMAP服务器交互而设计.IMAP&#xff08;Internet Message Access Protocol&#xff09;是一种用于电子邮件的标准协议,允许用户在远程服务器上管理邮件.imbox库通过IMAP协议与邮件服务器通信,帮助用户轻松地读取、搜索…...

Ubuntu 18.04 安装 PCL 1.14.1

在进行科研项目时&#xff0c;我们常常需要将 C 和 Python 结合起来编程。然而&#xff0c;每次将 PCL&#xff08;Point Cloud Library&#xff09;的内容添加到 CMakeLists.txt 文件中时都会报错。在深入分析后&#xff0c;我们推测可能是当前使用的 PCL 1.8 版本与现有程序不…...

公司logo设计大全怎么找?直接帮你设计logo

公司logo设计大全怎么找&#xff1f;在品牌塑造的过程中&#xff0c;Logo无疑是至关重要的一环。一个优秀的Logo不仅能够有效传达公司的核心理念和品牌形象&#xff0c;还能在消费者心中留下深刻的印象。然而&#xff0c;对于许多初创公司或小型企业来说&#xff0c;制作出适合…...

如何调整C#中数组的大小

前言 数组存储多个相同类型的一种非常常用的数据结构。它长度是固定&#xff0c;也就是数组一旦创建大小就固定了。C# 数组不支持动态长度。那在C#中是否有方法可以调整数组大小呢&#xff1f;本文将通过示例介绍一种调整一维数组大小的方法。 方法 数组实例是从 System.Arr…...

通过言语和非言语检索线索描绘睡眠中的记忆再激活茗创科技茗创科技

摘要 睡眠通过重新激活新形成的记忆痕迹来巩固记忆。研究睡眠中记忆再激活的一种方法是让睡眠中的大脑再次暴露于听觉检索线索(定向记忆再激活范式)。然而&#xff0c;记忆线索的声学特性在多大程度上影响定向记忆再激活的有效性&#xff0c;目前还没有得到充分探索。本研究通…...

MDPI旗下SSCI最新影响因子目录出炉!“水刊“Sustainability表现如何?

本周投稿推荐 SSCI • 1区&#xff0c;4.0-5.0&#xff08;无需返修&#xff0c;提交可录&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09; CNKI • 7天录用-检索&#xff08;急录友好&#xff09; SCI&EI • 4区生物医学类&#xff0c;0.1-0.5&…...

Matlab基础篇:数据输入输出

前言 数据输入和输出是 Matlab 数据分析和处理的核心部分。良好的数据输入输出能够提高工作效率&#xff0c;并确保数据处理的准确性。本文将详细介绍 Matlab 数据输入输出的各种方法&#xff0c;包括导入和导出数据、数据处理和数据可视化。 一、导入数据 Matlab 提供了多种方…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...