快速生成基于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.mzph.cn/pingmian/32745.shtml

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

相关文章

轻松恢复丢失数据EasyRecovery你的数据守护神

轻松恢复丢失数据EasyRecovery你的数据守护神

数据丢失&#xff1f;别怕&#xff01;EasyRecovery来帮忙 大家好呀&#xff0c;今天我要分享一个我超级喜欢的数据恢复软件——EasyRecovery&#xff01;&#x1f389; 如果你也经历过误删文件、硬盘格式化或是意外丢失重要数据的尴尬和焦虑&#xff0c;那你一定要看看这个神器…
阅读更多...
uniapp 微信小程序更改轮播图指示点

uniapp 微信小程序更改轮播图指示点

仅微信小程序有效 /* #ifdef MP-WEIXIN */// 默认指示点样式wx-swiper .wx-swiper-dot {position: relative;background-color: #ffffff;width: 28rpx;border-radius: 10rpx;height: 8rpx;opacity: 0.4;}// 当前选中样式wx-swiper .wx-swiper-dot-active {background-color: #f…
阅读更多...
ReactNative进阶（二十八）Metro

ReactNative进阶（二十八）Metro

文章目录 一、前言二、Metro生命周期2.1 解析(Resolution)2.2 转换(Transformation)2.3 序列化(Serialization) 三、拓展阅读 一、前言 众所周知&#xff0c;Metro 是 React Native 默认的 JavaScript 打包模块。对于前端项目&#xff0c;打包工具已有webpack(大而全&#xff…
阅读更多...
React Hooks使用规则：为什么不在条件语句和循环中使用它们

React Hooks使用规则：为什么不在条件语句和循环中使用它们

React Hooks为函数组件引入了状态和生命周期特性&#xff0c;极大地增强了其功能。然而&#xff0c;正确使用Hooks是确保组件稳定性和性能的关键。本文将探讨React Hooks的基本规则&#xff0c;以及为什么我们不应该在条件语句和循环中使用它们。 Hooks的基本规则 React团队为…
阅读更多...
conda环境的备份和移植

conda环境的备份和移植

备份和移植 Conda 环境可以通过以下步骤实现： 克隆环境 conda create --name backup_myenv --clone myenv# 删除原环境 # conda remove --name myenv --all移植 Conda 环境 方法1：使用 environment.yml 文件移植环境 # 导出环境的依赖项 conda env export --name myenv &g…
阅读更多...
HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)（表格布局）

HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)（表格布局）

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;table布局&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。…
阅读更多...
HarmonyOS父子组件传递参数

HarmonyOS父子组件传递参数

HarmonyOS父子组件传递参数 1. 使用State和Prop进行父子组件传递———注意是单向同步 Prop装饰器&#xff1a;父子单向同步 注意&#xff1a;只支持单向同步&#xff0c;同时也只能支持string\number\boolean\enum比较简单的类型。 代码 // 使用 props 进行父子组件传值…
阅读更多...
Python爬虫介绍

Python爬虫介绍

Python 作为一种广泛应用的编程语言&#xff0c;在 Web 开发、大数据开发、人工智能开发和嵌入式开发等领域都有着重要的应用。 Python 的易学性、清晰性和可移植性等特点使它得到很多技术人士的喜爱。对于数据科学和机器学习领域的程序员来说&#xff0c;Python 提供了强大的…
阅读更多...
单片机练习题4

单片机练习题4

一、填空 1. AT89S51单片机任何一个端口要想获得较大的驱动能力&#xff0c;要采用 电平输出。 答&#xff1a;低 2.检测开关处于闭合状态还是打开状态&#xff0c;只需把开关一端接到I/O端口的引脚上&#xff0c;另一端接地&#xff0c;然后通过检测 来…
阅读更多...
罗盘时钟lua迷你世界

罗盘时钟lua迷你世界

--罗盘时钟 --星空露珠工作室制作 --作者:韩永旗 --数字换中文 local zhChar {一,二,三,四,五,六,七,八,九} function formatNumber( num ) if type(num)~number then return num..is not a num end if num>99 then return num..不是两位数 end if num0 then return 零 el…
阅读更多...
朴素贝叶斯案例

朴素贝叶斯案例

一、朴素贝叶斯算法&#xff1a; 朴素贝叶斯算法&#xff0c;是一种基于贝叶斯定理与特征条件独立假设的分类方法&#xff0c;基于贝叶斯后验概率建立的模型&#xff0c;它用于解决分类问题。朴素&#xff1a;特征条件独立&#xff1b;贝叶斯&#xff1a;基于贝叶斯定理。属于…
阅读更多...
【Python】已解决：ModuleNotFoundError: No module named ‘paddle’

【Python】已解决：ModuleNotFoundError: No module named ‘paddle’

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;ModuleNotFoundError: No module named ‘paddle’ 一、分析问题背景 在Python编程中&#xff0c;ModuleNotFoundError是一个常见的错误&#xff0c;它通常发生…
阅读更多...
【LC刷题】DAY15：654 617 700 98

【LC刷题】DAY15：654 617 700 98

【LC刷题】DAY15&#xff1a;654 617 700 98 文章目录 【LC刷题】DAY15&#xff1a;654 617 700 98654. 最大二叉树 [link](https://leetcode.cn/problems/maximum-binary-tree/description/)617. 合并二叉树 [link](https://leetcode.cn/problems/merge-two-binary-trees/desc…
阅读更多...
C语言中的进制转换

C语言中的进制转换

基础概念 进制又称数制&#xff0c;是指用一组固定的符号和统一的规则来表示数值的方法&#xff0c;在C语言中&#xff0c;可以使用不同的前缀来表示不同的进制&#xff1a; 二进制&#xff1a;以0b或0B为前缀&#xff08;部分编译器可能不支持&#xff09;八进制&#xff1a…
阅读更多...
【论文精读】分类扩散模型：重振密度比估计（Revitalizing Density Ratio Estimation）

【论文精读】分类扩散模型：重振密度比估计（Revitalizing Density Ratio Estimation）

文章目录 一、文章概览&#xff08;一&#xff09;问题的提出&#xff08;二&#xff09;文章工作 二、理论背景&#xff08;一&#xff09;密度比估计DRE&#xff08;二&#xff09;去噪扩散模型 三、方法&#xff08;一&#xff09;推导分类和去噪之间的关系&#xff08;二&a…
阅读更多...
LVGL8.3动画图像(太空人)

LVGL8.3动画图像(太空人)

LVGL8.3 动画图像 1. 动画图像本质 我们知道电影属于视频&#xff0c;而电影的本质是将一系列动作的静态图像进行快速切换而呈现出动画的形式&#xff0c;也就是说动画本质是一系列照片。所以 lvgl 依照这样的思想而定义了动画图像&#xff0c;所以在 lvgl 中动画图像类似于普…
阅读更多...
能理解你的意图的自动化采集工具——AI和爬虫相结合

能理解你的意图的自动化采集工具——AI和爬虫相结合

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…
阅读更多...
浅聊Cookie

浅聊Cookie

前言 在客户端使用Nuxt的useFetch调用接口并存储cookie&#xff0c;发现一些趣事~ cookie存储需要遵守同源策略~ 理论我们是知道的&#xff0c;但具体是怎么一回事呢~ 实现 在Nuxt中是这样的~ 直接访问 Nuxt <template><div>{{ data }}</div> </te…
阅读更多...
【python】python学生成绩数据分析可视化（源码+数据+论文）【独一无二】

【python】python学生成绩数据分析可视化（源码+数据+论文）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
c#使用自带库对字符串进行AES加密、解密

c#使用自带库对字符串进行AES加密、解密

文章目录 1 代码1.1 定义Aes加密类块1.2 在主函数中调用 2 获取Key和IV2.1 基本方法2.2 自定义Key2.3 技术方面的原理 参考文章&#xff1a; C#软件加密实例&#xff1f; 。 参考官文&#xff1a; Aes 类。 在使用C#的自带的System.Security.Cryptography.Aes模块进行加密和解…
阅读更多...
最新文章

Copyright @ 2022~2023