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

【VUE小型网站开发】优化通用配置二

news 来源：原创 2025/7/16 18:10:30

1. 引入 MyBatis Plus

1.1 添加依赖

<dependencies><!-- Spring Boot Starter Web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- MyBatis Plus Starter --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3</version> <!-- 请使用最新版本 --></dependency><!-- MySQL Connector --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.23</version> <!-- 请使用最新版本 --></dependency><!-- Lombok (可选，用于简化代码) --><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.20</version> <!-- 请使用最新版本 --><scope>provided</scope></dependency>
</dependencies>

1.2 配置数据库连接

在 application.yml 或 application.properties 文件中配置数据库连接信息

spring:datasource:url: jdbc:mysql://localhost:3306/tool?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTCusername: usernamepassword: passworddriver-class-name: com.mysql.cj.jdbc.Drivermybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

1.3 新建实体类

这边直接修改原来的Menu实体类，添加@TableName(“menu”)，对应到表么menu

package com.tool.tooladmin.admin.menu.domain;import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;import java.util.ArrayList;
import java.util.List;@Data
@TableName("menu")
public class Menu {private Long menuId;private Long parentId;private String menuName;private String path;private String icon;private Long sort;private Long isFrame;private String query;@TableField(exist = false)private List<Menu> children;
}

1.4 创建 Mapper 接口

创建一个 MenuMapper接口，并继承 BaseMapper。MyBatis Plus 提供了丰富的 CRUD 方法，无需手动编写 SQL 语句。

package com.tool.tooladmin.admin.menu.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.tool.tooladmin.admin.menu.domain.Menu;public interface MenuMapper extends BaseMapper<Menu> {
}

1.5 配置 MyBatis Plus

在 Spring Boot 的主配置类中，添加 @MapperScan 注解，扫描 Mapper 接口所在的包。

package com.tool.tooladmin;import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
@MapperScan("com.tool.tooladmin.admin.menu.mapper") // 替换为你的 Mapper 接口所在包，可以只加载到个别，也可以设置父级，这样可以扫描到下面所有的mapper
public class ToolAdminApplication {public static void main(String[] args) {SpringApplication.run(ToolAdminApplication.class, args);}
}

1.6 修改前端menu对应的值

前面改了menu实体类，需要修改前端对应的参数

<template><div><el-menu-item v-if="!item.children || item.children.length === 0" :index="item.path || item.menuId"><span>{{ item.menuName }}</span></el-menu-item><el-sub-menu v-else :index="item.path || item.menuId"><template #title><span>{{ item.menuName }}</span></template><menu-item v-for="child in item.children" :key="child.menuId" :item="child" /></el-sub-menu></div>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps({item: {type: Object,required: true}
});
</script>

2. 添加获取反编译代码

可以通过测试demo，直接把class反编译成代码，虽然会有一定差异，但是可以节省一部分代码
采用的是cfr方式

2.1 添加依赖

        <!-- https://mvnrepository.com/artifact/org.benf/cfr --><dependency><groupId>org.benf</groupId><artifactId>cfr</artifactId><version>0.151</version></dependency>

2.2 java代码

通过编译后的资源文件地址将class文件反编译成java文件，存在outputdir里，然后再进行读取

package com.tool.tooladmin.tool;import org.apache.commons.io.FileUtils;
import org.benf.cfr.reader.api.CfrDriver;
import org.benf.cfr.reader.util.getopt.OptionsImpl;
import org.springframework.core.io.ClassPathResource;
import org.springframework.stereotype.Component;import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;@Component
public class DecompileTool {/*** 根据资源路径获取类反编译后的代码* @param resourcePath 类路径* @return*/public static String getClassDecompileCodeByCFR(String resourcePath) {try {// 读取资源文件ClassPathResource resource = new ClassPathResource(resourcePath + ".class");File file = resource.getFile();// 反编译并获取结果字符串decompile(file.getAbsolutePath());// 读取反编译后的代码StringBuffer sb = new StringBuffer();File decompiledFile = new ClassPathResource("output/"+ resourcePath + ".java").getFile();List<String> lines = FileUtils.readLines(decompiledFile, "UTF-8");for (String line : lines) {sb.append(line).append("\n");}String decompiledCode = sb.toString();return decompiledCode;} catch (IOException e) {e.printStackTrace();}return null;}public static void decompile(String filePath) throws IOException {// 配置选项HashMap<String, String> outputMap = new HashMap<>();// 反编译文件输出目录，在classpath下创建一个文件夹output，用于存放反编译后的代码String outputDir = new ClassPathResource("/").getFile().getAbsolutePath() + "/output";outputMap.put("outputdir", outputDir);OptionsImpl options = new OptionsImpl(outputMap);// 构建 CfrDriverCfrDriver cfrDriver = new CfrDriver.Builder().withBuiltOptions(options).withOutputSink(null).build();// 反编译List<String> files = new ArrayList<>();files.add(filePath);cfrDriver.analyse(files);}
}

2.3 前端将代码传给MD组件里，进行展示

<template><div><el-collapse v-model="activeNames"><el-collapse-item name="1"><template #title><div class="title-container"><span>{{ title }}</span><el-tooltip content="复制" placement="top"><el-icon class="copy-icon" @click.stop="copyText"><CopyDocument/></el-icon></el-tooltip></div></template><div class="content-container"><div ref="contentToCopy" class="content-to-copy"><vue3-markdown-it :source="displayContent"/></div></div></el-collapse-item></el-collapse></div>
</template><script>
import {CopyDocument} from '@element-plus/icons-vue';export default {components: {CopyDocument},props: {title: {type: String,required: true},contentToCopy: {type: String,required: true},contentType: {type: String,required: true}},data() {return {activeNames: []};},computed: {displayContent() {//中文乱码转换let decodedContent = this.contentToCopy.replace(/\\u(\w{4})/g, (a, b) => String.fromCharCode(parseInt(b, 16)));// 在最前面添加一行代码return `\`\`\`${this.contentType}\n${decodedContent}`;}},methods: {async copyText() {try {await navigator.clipboard.writeText(this.contentToCopy);this.$message({message: '复制成功',type: 'success'});} catch (err) {this.$message({message: '复制失败，请手动复制',type: 'error'});}},}
};
</script><style scoped>
.content-container {position: relative;
}.content-to-copy {background-color: #f0f0f0; /* 设置背景颜色为灰色 */padding: 10px;border-radius: 4px;margin-bottom: 10px;
}.title-container {display: flex;justify-content: space-between;align-items: center;width: 100%;
}.copy-icon {cursor: pointer;font-size: 15px;color: #409eff;margin-right: 8px;
}.copy-icon:hover {color: #66b1ff;
}
</style>

【VUE小型网站开发】优化通用配置二

1. 引入 MyBatis Plus 1.1 添加依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- My…...

编程日记 2025/7/16 18:10:30

基于阻塞队列的生产者消费者模型动画演示

一个基于阻塞队列的生产者消费者模型的动画演示： 这是打包好的程序。程序是用 QT 写的。通过网盘分享的文件：CP模型.7z 链接: https://pan.baidu.com/s/1YjC7YiSqHGqdr6bbffaDWg?pwde6g5 提取码: e6g5 CP模型...

编程日记 2025/7/3 14:33:14

springSecurity认证流程

Spring Security 是spring家族中的一个安全管理框架。相比于另一个安全框架Shiro，它提供更丰富的功能和社区资源，但也较难上手。所以一般大项目用spring Security，小项目用Shiro。一般web应用需要认证和授权，这也是spring Secur…...

编程日记 2025/7/14 1:23:14

vite5+vue3+Ts5 开源图片预览器上线

images-viewer-vue3：一款Vue3的轻量级图像查看器，它基于Flip动画技术，支持PC和h5移动网页预览照片，如果它是Vue3开发的产品。 npm开源地址:https://www.npmjs.com/package/images-viewer-vue3?activeTabreadme Flip 动画 < …...

编程日记 2025/7/15 23:46:07

Qt开发：元对象系统的介绍和使用

文章目录概述元对象系统的概念和组成QObject 的详细介绍1.QObject 的主要特性信号与槽机制动态属性对象树（Object Trees）事件处理 2.QMetaObject的主要特性函数签名常用功能概述 Qt本身并不是一种编程语言，它实质上是一个跨平台的C开发类库…...

编程日记 2025/7/16 9:36:10

.vscode文件中各个脚本需要修改的地方

NOTE： 此篇文章由VSCode编辑GCC for ARM交叉编译工具链Makefile构建OpenOCD调试（基于STM32的标准库）派生而来，对.vscode文件中各个脚本需要修改的地方作补充说明。 tasks.json 该json文件的主要作用：使用XX名称去执行…...

编程日记 2025/7/14 19:52:35

JavaScript模块化规范

欢迎来到“雪碧聊技术”CSDN博客！ 在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将…...

编程日记 2025/7/12 22:28:39

第二篇：k8s工作流程

我们来看通过deployment部署pod的常规流程： kubectl向apiserver发送部署请求（例如使用 kubectl create -f deployment.yml）apiserver将 Deployment 持久化到etcd；etcd与apiserver进行一次http通信。controller manager通过watch a…...

编程日记 2025/7/8 12:00:16

什么是数据架构？

数据架构是如何使用数据的蓝图--它是数据和数据相关资源的高层结构，是整个组织的数据框架，包括模型、规则和标准。通过高效的数据架构，企业可以跟踪整个 IT 基础设施中数据的获取、移动、存储、安全性和可访问性。数据架构总览数据架构是…...

编程日记 2025/7/15 1:29:10

ChatGPT、Python和OpenCV支持下的空天地遥感数据识别与计算——从0基础到15个案例实战

在科技飞速发展的时代，遥感数据的精准分析已经成为推动各行业智能决策的关键工具。从无人机监测农田到卫星数据支持气候研究，空天地遥感数据正以前所未有的方式为科研和商业带来深刻变革。然而，对于许多专业人士而言，如何高效地处…...

编程日记 2025/7/16 13:39:24

微信小程序权限授权工具类

最近写微信小程序的时候需要在页面获取设备权限，又不想每个页面都写，就写了一个工具类方便管理 /*** 权限工具类用于获取授权* 权限工具类使用方法，注意调用时函数需要定义为异步函数 async* import PermissionUtils from "./permissio…...

编程日记 2025/7/14 1:35:02

CT中的2D、MPR、VR渲染、高级临床功能

CT中的2D、MPR、VR渲染在CT（计算机断层扫描）中，2D、MPR（多平面重建）、VR（体积渲染）是不同的图像显示和处理技术，它们各自有独特的用途和优势。下面分别介绍这三种技术：…...

编程日记 2025/7/15 23:45:15

【MySQL】Windows下重启MySQL服务时，报错：服务名无效

1、问题描述在终端中，停止、启动MySQL服务时报错：服务名无效 2、原因分析 1）权限不够如果是权限不够，会提示：系统错误5，拒绝访问。 2）服务名错误如果是服务名错误，会提示“…...

编程日记 2025/7/15 11:11:58

java枚举的基本用法

在 Java 中，枚举（enum）是一种特殊的类，用于定义一组常量。它可以使代码更具可读性和可维护性。枚举类型可以用于表示固定的、有限的值集合，比如星期几、季节、方向等。以下是一些常见的枚举用法示例： 1.…...

编程日记 2025/7/16 14:01:44

Web网络安全

一. 浏览器系统安全方面，使用多进程方案，而js主线程运行在渲染进程中，渲染进程时运行在沙箱中的，没有对本地OS文件的直接读写权限，所以需要通过IPC与浏览器主线程通信，才可以获取cookie等信息，这…...

编程日记 2025/7/12 19:03:33

【分子材料发现】——GAP：催化过程中吸附构型的多模态语言和图学习（数据集处理详解）（二）

Multimodal Language and Graph Learning of Adsorption Configuration in Catalysis https://arxiv.org/abs/2401.07408Paper Data: https://doi.org/10.6084/m9.figshare.27208356.v2 1 Dataset CatBERTa训练的文本字符串输入来源于Open Catalyst 2020 （OC20…...

编程日记 2025/7/14 4:09:39

matlab Delaunay三角剖分提取平面点云的边界

目录一、算法原理1、算法概述2、参考文献二、代码实现三、结果展示四、详细过程版一、算法原理 1、算法概述 Delaunay三角网在生成三角网过程中，以最近的三点形成三角形，且各三角形的边皆不相交，每条边都使用所在的三角形的顶点验算并记录相应的2个顶点坐标。整个验算过程…...

编程日记 2025/7/16 9:25:23

Spring07——AOP通知以及几个相关案例

切入点表达式注意，不是参数，是参数类型可以使用通配符描述切入点，快速描述 ■ *：单个独立的任意符号，可以独立出现，也可以作为前缀或者后缀的通配符出现 execution(public∗com.itheima.∗.UserServi…...

编程日记 2025/7/14 7:14:12

【AI工具】强大的AI编辑器Cursor详细使用教程

目录一、下载安装与注册二、内置模型与配置三、常用快捷键四、项目开发与问答五、注意事项与技巧参考资料近日，由四名麻省理工学院（MIT）本科生共同创立的Anysphere公司宣布，其开发的AI代码编辑器Cursor在成立短短两年…...

编程日记 2025/7/14 18:01:38

CV工程师专用键盘开源项目硬件分析

1、前言作为一个电子发烧友，你是否有遇到过这样的问题呢。当我们去查看函数定义的时候，需要敲击鼠标右键之后选择go to definition。更高级一些，我们使用键盘的快捷键来查看定义，这时候可以想象一下，你左手按下ALT&a…...

编程日记 2025/7/11 17:25:06

STM32标准固件库官网下载方法

Keil标准固件库官网下载方法 Keil中DFP.pack下载方法打开keil官网 Keil 官网 www.keil.com 点击产品点击“Products” 点击 “Arm Cortex-M” 下拉找到CMSIS-Packs 点击CMSIS-Pack index 搜索对应的MCU，我这里是STM32F4 注意搜索对应系列就好点击下载...

编程日记 2025/7/13 16:49:04

数据库原理实验实验四统计查询和组合查询

实验目的和要求加深对统计查询的理解，熟练使用聚簇函数。实验环境SQL SERVER 2008 SQL Server Management Studio 20 实验内容与过程题目一：学生（学号，年龄，性别，系名）课程（课号，课名，学分，学时）选课（学号，课号，成绩）根据上面基本表的信息完成下列查…...

编程日记 2025/6/28 18:56:28

【电子通识】案例：USB Type-C USB 3.0线缆做直通连接器TX/RX反向

【电子通识】案例：连接器接线顺序评估为什么新人总是评估不到位？-CSDN博客这个文章的后续。最近在做一个工装项目，需要用到USB Type-C线缆做连接。此前已经做好了线序规划，结果新人做成实物后发现有的USB Type-C线缆可用，有的不行。其中发现USB3.0的TX-RX信号与自己的板卡…...

编程日记 2025/7/15 1:37:49

【Linux从青铜到王者】数据链路层（mac，arp）以及ip分片

局域网通信通过之前的学习，我们了解了应用层，传输层，网络层的协议和作用，这里先做个总结应用层——http，https协议，也可以自己定义一套，作用是进行数据的处理传输层——tcp，udp协…...

编程日记 2025/7/15 21:29:08

MyBatis注解开发

1.配置MyBatis_ssm配置mybits-CSDN博客 2.Mybaits实现增删改查-CSDN博客 3.MyBatis构建动态SQL-CSDN博客目录一、注解开发的定义二、SQL常用注解三、使用注解完成CRUD 1.查找所有 2.通过id查询 3.增加 4.更新 5.删除 6.查询数量 7.模糊查询一、注解开发的定义 …...

编程日记 2025/7/13 22:24:48

Unity引擎UI滚动列表——滚动复用扩展应用

大家好，我是阿赵。之前介绍了滚动复用的基础用法。上一个例子里面，是一个竖向单列的滚动列表展示。这一次来扩展一下用法。如果不知道上一次例子的，可以先往前翻一下，上面有例子的详情、原理解释和代码。一、多列的滚动复…...

编程日记 2025/7/12 19:41:16

MySQL 死锁排查

私人博客传送门 MySQL 死锁排查...

编程日记 2025/7/1 20:48:31

AI - 浅聊一下基于LangChain的AI Agent

AI - 浅聊一下基于LangChain的AI Agent 大家好，今天我们来聊聊一个很有意思的主题： AI Agent ，就是目前非常流行的所谓的AI智能体。AI的发展日新月异，都2024年末了，如果此时小伙伴们对这个非常火的概念还不清楚的话&a…...

编程日记 2025/7/16 1:35:59

校园综合服务小程序+ssm

摘要随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，校园综合服务被用户普遍使用，为方便用户能够可…...

编程日记 2025/7/16 7:57:17

RPC设计--TcpConnection和TcpServer

TcpConnection 对于服务端来说用来封装clientfd，对于client端来说，就是封装connect函数返回后的fd. 处理此fd上的读写，因此需要为其提供read\write方法，其方法内部调用系统的read\write函数，从fd中读写数据。当Fd上…...

编程日记 2025/7/12 8:06:34

Mysql 的 B+ 树是否包含行数据？

在 MySQL 中，是否在 B树的叶子节点上存储完整的行数据，取决于使用的存储引擎和索引类型： 聚簇索引 (Clustered Index) 叶子节点包含完整的行数据。适用场景：MySQL InnoDB 存储引擎的主键索引（或聚簇索引&#xf…...

编程日记 2025/7/14 21:26:52

CSS系列（2）-- 盒模型精解

前端技术探索系列：CSS 盒模型精解 📦 致读者：深入理解盒模型的本质 👋 前端开发者们， 今天我们将深入探讨 CSS 盒模型，这是构建网页布局的核心概念。通过本文，你将全面理解盒模型的工作原理及…...

编程日记 2025/7/9 23:08:14

Matlab在信号处理领域有哪些典型的设计实例？

以下是Matlab在信号处理领域的一些典型设计实例： 一、信号生成与频谱分析正弦信号生成与频谱分析 - 题目：生成一个频率为 f 10 H z f 10Hz f10Hz，采样频率为 f s 100 H z f_s100Hz fs100Hz，时长为 T 5 s T 5s T5s的正弦…...

编程日记 2025/7/15 1:12:52

frida(objection)中x.ts到x.py封装路径

objection run "android hooking list classes" 基于sensepost/objection.git/1.11.0 sensepost/objection.git/e7eb1 简版路径: android hooking list classes --> show_android_classes --> android_hooking_get_classes androidHookingGetClasses --&g…...

编程日记 2025/7/14 12:15:14

python学习笔记—1—基础环境配置和字面量

1. 字面量在代码中被写下来的固定值称为字面量 （1）整数字面量 666 （2）浮点字面量 6.66 （3）字符串字面量 "supercarrydoinb" 2. python中的数据类型 3. 打印字面量 print("666") …...

编程日记 2025/7/15 17:44:50

【Windows11系统局域网共享文件数据】

【Windows11系统局域网共享文件数据】 1. 引言1. 规划网络2. 获取必要的硬件3. 设置网络4. 配置网络设备5. 测试网络连接6. 安全性和维护7. 扩展和优化 2. 准备工作2.1: 启用网络发现和文件共享2.2: 设置共享文件夹 3. 访问共享文件夹4. 小贴士5. 总结 1. 引言随着家庭和小型办…...

编程日记 2025/7/11 20:04:24

包管理器npm, cnpm, yarn 和 pnpm 的命令

npm (Node Package Manager) 安装与更新 npm install 或 npm i： 安装项目依赖：根据 package.json 文件安装所有列出的依赖。参数： -S, --save：保存到 dependencies（默认行为）。-D, --save-dev：…...

编程日记 2025/7/14 18:06:34

MATLAB 最小二乘平面拟合（90）

MATLAB 最小二乘平面拟合（90）一、算法介绍二、算法实现1.代码2.结果：一、算法介绍平面方程： ax+by+cz+d = 0 执行任务：读取一组点云（这里用自定义生成的平面模拟点云代替，在其中添加了噪声来模拟真实的数据），使用最小二乘拟合平面，来输出平面参数，并可视化显示拟…...

编程日记 2025/7/16 17:34:44

kubesphere服务报错页面无法登陆

kubesphere的页面无法访问查看pod服务，发现ks-apiserver的pod一直在重启在所在node节点，执行dmesg -T 发现内存溢出修改deploy的memory的配置原本的request memory的值为100M 调整为2G 修改之后，服务正常启动，页面访问正常…...

编程日记 2025/7/3 23:00:17

filezilla连接不上虚拟机的解决方案

现象解决过程虚拟机终端输入ip addr 输出： 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever p…...

编程日记 2025/7/15 11:50:05

番茄钟与Todo List：用Go构建高效的时间管理工具

引言在当今快节奏的世界中，时间管理和任务组织变得越来越重要。为了帮助用户提高效率，我开发了一个基于Golang的开源项目，基于fyne的ui，它结合了经典的番茄工作法（Pomodoro Technique）和功能丰富的待办事…...

编程日记 2025/7/13 1:18:20

vim实用命令整理（常用的命令）

本章教程，总结自己平时使用vim过程中，经常使用的命令，分享给大家。一、高频使用 i：进入插入模式（光标处插入） a：进入插入模式（光标后插入） esc：返回普通模式 :：进入命令模式 :w：保存 :q：退出 :wq：保存并退出 :q!：强制退出不保存 :e filename：打开文件 :set n…...

编程日记 2025/7/6 23:00:57

METAGPT

METAGPT: META PROGRAMMING FOR A MULTI-AGENT COLLABORATIVE FRAMEWORK MetaGPT：面向多代理协作框架的元编程 1. 引言近年来，基于大型语言模型（LLMs）的多智能体系统在自动问题解决方面取得了显著进展。然而，现有的…...

编程日记 2025/7/15 8:57:14

LabVIEW调用Thorlabs的动态库进行开发

Thorlabs 产品在科研与生产领域中的应用广泛，当需要基于LabVIEW 进行二次开发时，可按照以下方法操作，以充分发挥设备性能并满足特定的项目需求。创建 Kinesis LabVIEW 项目文件和文件夹更详细的说明参见附件在 LabVIEW 的启动界面中选择…...

编程日记 2025/7/14 15:30:50

Lua使用点号和冒号的区别

首先建立一个table，再分别定义两个方法，如下： local meta {}function meta:test1(...)print(self)print("")for k,v in pairs({...}) doprint(v)end endfunction meta.test2(...)print(self)print("")for k,v in pairs…...

编程日记 2025/7/13 10:37:31

Rust学习笔记_13——枚举

Rust学习笔记_10——守卫 Rust学习笔记_11——函数 Rust学习笔记_12——闭包枚举文章目录枚举1. 定义1.1 无值变体1.2 有值变体1.3 枚举与泛型的结合 2. 使用2.1 和匹配模式一起使用2.2 枚举作为类型别名 3. 常用枚举类型在Rust编程语言中，枚举（enum…...

编程日记 2025/7/13 23:04:27