Welcome to Aixin.me ❤️

Form 表单 官方文档：https://antdv.com/components/form-cn 问题：通过对象数据遍历表单组件，校验不生效或者校验不通过： 原因： rules必须加载<a-form-item>上，不能加载input、select等组件上，否则校验不生效 组件的v-model:value必须单独关联一个formdata对象中，不能直接使用原始数据对象，否则任何时候都显示校验提示，可以先将原始数据对象深拷贝到formdata对象中，然后再使用formdata对象进行校验，校验通过后再将formdata对象赋值给原始数据对象。 示例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 // 原始表单数据对象 const formObject = ref({ name: { label: '分类名称', name: 'name', type: 'input', placeholder: '请输入分类名称', default: '默认数据', rules: [{ required: true, message: '请输入分类名称'}], }, status: { label: '状态', name: 'status', type: 'select', placeholder: '请选择状态', default: 1, options: [ { label: '启用', value: 1 }, { label: '禁用', value: 0 }, ], rules: [{ required: true, message: '请选择状态'}], }, }) // 表单数据存储对象 const formData = ref({}) // 原始数据对象深拷贝到表单数据存储对象中 const dataExtract = (data) => { Object.keys(data).forEach(key => { formData.value[key] = data[key].default }) } // 监听原始数据对象变化，将变化后的数据深拷贝到表单数据存储对象中 watch(formObject, (val) => { dataExtract(val) }, { immediate : true}) // 提取后的formData { name: '默认数据', status: 1, } Table 表格 官方文档：https://antdv.com/components/table-cn ...

一. 安装 1 npm install mockjs 官方文档：https://github.com/nuysoft/Mock/wiki 二. 使用 1. 基本使用 1 2 3 4 5 6 7 8 9 10 11 12 import Mock from "mockjs"; const data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 3 到 3 个元素 'list|1-3': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1, 'name': '@name' }] }) // 输出结果 console.log(JSON.stringify(data, null, 4)) 输出结果： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { "list": [ { "id": 1, "name": "王小明" }, { "id": 2, "name": "王小明" }, { "id": 3, "name": "王小明" } ] } 2. 语法规范 2.1. 数据模板定义规范 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值： ...

本方案推荐使用axios-mock-adapter组件： 一、 安装 1 2 3 npm install axios --save npm install mockjs npm install axios-mock-adapter --save-dev 注意：axios和axios-mock-adapter版本要一致 axios-mock-adapter：https://www.npmjs.com/package/axios-mock-adapter mock：http://mockjs.com/ 二、应用案例 mock方法放在一个或多个文件中，比如use.js、article.js等 必须要实例化axios，否则会报错，实例化axios后，mock实例化时需要传入axios实例 导出mock方法，在业务中使用 1. 创建Mock方法 获取用户信息示例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 // src/mock/index.js import axios from 'axios' import Mock from "mockjs"; import MockAdapter from 'axios-mock-adapter' // 创建axios实例 const instance = axios.create();// 这一步很重要 // 创建mock实例 const mock = new MockAdapter(instance) // 模拟GET请求（固定数据） mock.onGet('/user').reply(200, { id: 1, username: 'admin' }) // 模拟GET请求（随机数据） mock.onGet('/user').reply(200, Mock.mock({ id: '@id', username: '@name' })) // 使用axios请求mock并导出结果 export const getUser = () => { return instance.get('/user'); } 获取文章信息示例： ...

简介 Lombok 是一个 Java 库，它可以自动插入编辑器和构建工具中，简化 Java 代码的编写。 Lombok 提供了一系列注解，用于自动生成 getter、setter、构造函数、toString 方法等，从而减少了代码量，提高了代码的可读性和可维护性。 安装 1 2 3 4 5 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.28</version> </dependency> 常用注解 注解名 作用 @Data 自动生成 getter、setter、toString、equals、hashCode 方法 @Getter 自动生成 getter 方法 @Setter 自动生成 setter 方法 @ToString 自动生成 toString 方法 @EqualsAndHashCode 自动生成 equals 和 hashCode 方法 @NoArgsConstructor 自动生成无参构造函数 @AllArgsConstructor 自动生成全参构造函数 全部注解 @Data @Data注解是一个非常强大的综合注解，它等价于同时使用@ToString、@EqualsAndHashCode、@Getter、@Setter和@RequiredArgsConstructor。使用@Data可以大大简化代码，减少样板代码的编写。 1 2 3 4 5 6 import lombok.Data; @Data public class Person { private String name; private int age; } @Getter和@Setter 1. 放置位置的灵活性 ...

实体类 1 2 3 4 5 6 7 8 9 10 11 12 @Getter @Setter @AllArgsConstructor @NoArgsConstructor @Entity @TableName("t_article") public class Article { private Long id; private String title; private String content; private Long parentId; } DTO类 1 2 3 4 5 6 7 @Data public class ArticleDTO { private Long id; private String title; private String content; private List<ArticleDTO> children;//这是重点 } Service类 1 2 3 public interface ArticleService { List<ArticleDTO> getArticleList(); } ServiceImpl类 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 @Service public class ArticleServiceImpl implements ArticleService { @Autowired private ArticleMapper articleMapper; @Override public List<ArticleDTO> getArticleList() { // 查询所有文章 List<Article> articles = ArticleRepository.searchQuery(); Map<String, ArticleResDto> articleMap = new HashMap<>(); List<ArticleResDto> rootArticles = new ArrayList<>(); // 遍历所有文章，将其转换为ArticleResDto对象，并存储在articleMap中 // 这一步很重要，否则下一步for循环可能无法找到父节点导致数据丢失 for (Article article : articles) { ArticleResDto articleResDto = new ArticleResDto(); //将文章属性复制到文章DTO对象中对应属性中（两边属性字段必须相同，不相同的可以单独通过set方法赋值） BeanUtils.copyProperties(article, articleResDto); articleMap.put(article.getCode(), articleResDto); } // 遍历所有文章，将其转换为ArticleResDto对象，并存储在rootArticles中 for (Article article : articles) { // 从articleMap中获取对应的ArticleResDto对象 ArticleResDto articleResDto = articleMap.get(article.getCode()); // 如果该文章的parent为0，则将其作为根节点存储在rootArticles中 if (article.getParent().equals("0")) { rootArticles.add(articleResDto); } else { // 如果该文章的parent不为0，则将其作为子节点存储在对应的父节点的children中 ArticleResDto parentarticle = articleMap.get(article.getParent()); if (parentarticle != null) { // 如果父节点的children为null，则创建一个新的List对象 if (parentarticle.getChildren() == null) { parentarticle.setChildren(new ArrayList<>()); } parentarticle.getChildren().add(articleResDto); } } } return rootArticles; } // 返回顶级文章列表 /** * 输出结果： * [ * { * "id": 1, * "title": "文章1", * "content": "文章1的内容", * "children": [ * { * "id": 2, * "title": "文章2", * "content": "文章2的内容", * "children": [] * } * ] * } * ] */ return articleDTOs; } BeanUtils.copyProperties(article, articleDTO);将文章属性复制到文章DTO对象中对应属性中 ...

第一步： maven中添加JPA依赖 1 2 3 4 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> 第二步（可选）： 安装IDEA插件 JPA Buddy，可以自动生成Entity实体类和Repository仓库接口 第三步： 创建数据表，比如： 1 2 3 4 5 6 7 8 CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `password` varchar(255) DEFAULT NULL, `age` int(11) DEFAULT NULL, `created_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4; 第四步： 创建数据表对应实体类 项目下边创建entity软件包（文件夹） 方法1（推荐）：通过JPA Buddy插件创建，在entity上右键→新建→来自数据库的JPA实体，下边选择对应的数据表和字段，点击确认，就可以自动在entity下边创建对应的实体类了 ...

1. 数据类型 整数类型 TINYINT：非常小的整数，通常占用 1 个字节。在 MySQL 中，有符号的范围是 -128 到 127，无符号的范围是 0 到 255。常用于存储状态码等数据量较小的整数。 1 2 3 4 -- 在 MySQL 中创建一个包含 TINYINT 类型列的表 CREATE TABLE example_table ( status TINYINT ); SMALLINT：小整数，一般占用 2 个字节。有符号范围是 -32768 到 32767，无符号范围是 0 到 65535。 INT（INTEGER）：常用的整数类型，占用 4 个字节。有符号范围是 -2147483648 到 2147483647，无符号范围是 0 到 4294967295。适用于存储用户 ID、数量等。 BIGINT：大整数，占用 8 个字节，可存储非常大的整数。 浮点类型 FLOAT：单精度浮点数，占用 4 个字节，可提供大约 7 位的小数精度。 1 2 3 4 -- 在 MySQL 中创建包含 FLOAT 类型列的表 CREATE TABLE product ( price FLOAT ); DOUBLE：双精度浮点数，占用 8 个字节，提供大约 15 位的小数精度。精度比 FLOAT 更高。 日期和时间类型 ...

摘要 Redis 主要支持以下几种数据类型： string（字符串）: 基本的数据存储单元，可以存储字符串、整数或者浮点数。 hash（哈希）:一个键值对集合，可以存储多个字段。 list（列表）:一个简单的列表，可以存储一系列的字符串元素。 set（集合）:一个无序集合，可以存储不重复的字符串元素。 zset(sorted set：有序集合): 类似于集合，但是每个元素都有一个分数（score）与之关联。 位图（Bitmaps）：基于字符串类型，可以对每个位进行操作。 超日志（HyperLogLogs）：用于基数统计，可以估算集合中的唯一元素数量。 地理空间（Geospatial）：用于存储地理位置信息。 发布/订阅（Pub/Sub）：一种消息通信模式，允许客户端订阅消息通道，并接收发布到该通道的消息。 流（Streams）：用于消息队列和日志存储，支持消息的持久化和时间排序。 模块（Modules）：Redis 支持动态加载模块，可以扩展 Redis 的功能。 String（字符串） string 类型是二进制安全的。意思是 redis 的 string 可以包含任何数据，比如jpg图片或者序列化的对象。string 类型是 Redis 最基本的数据类型，string 类型的值最大能存储 512MB。 key value name “zhangsan” ege “15” 常用命令： SET key value：设置键的值，重复设置会覆盖原来的值。 GET key：获取键的值。 INCR key：将键的值加 1。 DECR key：将键的值减 1。 APPEND key value：将值追加到键的值之后。 Hash（哈希） hash 类型是一个键值对集合，是一个 string 类型的 field 和 value 的映射表，hash 特别适合用于存储对象。比如存储用户的 id、姓名、年龄、性别等信息。文章的 id、标题、内容、作者等信息等。每个哈希最多可以存储 2^32 - 1 个键值对。 key field value user1 name “zhangsan” ege “15” 常用命令： ...

1、权限过滤器 项目中创建PermissionFilter类 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 package com.example.demo.config; import jakarta.servlet.*; import jakarta.servlet.annotation.WebFilter; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; // 权限过滤器 @WebFilter(urlPatterns = "/*") public class PermissionFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { // 将 ServletRequest 和 ServletResponse 转换为 HttpServletRequest 和 HttpServletResponse // 这样可以使用 HTTP 协议特有的方法 HttpServletRequest httpRequest = (HttpServletRequest) request; HttpServletResponse httpResponse = (HttpServletResponse) response; // 模拟从请求中获取用户角色 // 这里假设用户角色已经在会话中，并用于后续的权限检查 String userRole = (String) httpRequest.getSession().getAttribute("userRole"); // 模拟需要 ADMIN 角色才能访问的路径 // 如果请求的路径以 "/admin/" 开头，检查用户角色是否为 ADMIN // 如果不是 ADMIN 角色，返回 403 错误，表示用户没有访问权限 if (httpRequest.getRequestURI().startsWith("/admin/")) { if (!"ADMIN".equals(userRole)) { httpResponse.sendError(HttpServletResponse.SC_FORBIDDEN, "You don't have permission to access this resource."); return; } } // 如果用户有权限或者请求的资源不需要权限，继续执行链中的下一个过滤器或目标资源 chain.doFilter(request, response); } }

在请求被处理前，执行一些公共逻辑，例如检查用户是否认证、是否有权限访问受保护的资源、日志记录等； 可以在请求被处理前，对请求的数据进行预处理，还可以对返回的结果进行统一处理。 1、Cors跨域处理 在项目中创建config文件包，然后创建WebConfig类，代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 package com.example.demo.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { /** * 添加跨域资源共享（CORS）映射配置 * 该方法用于配置允许从哪些域对资源进行跨域请求 * * @param registry CorsRegistry对象，用于注册CORS映射 */ @Override public void addCorsMappings(CorsRegistry registry) { // 配置跨域请求的映射路径，"/**"表示匹配所有路径 registry.addMapping("/**") // 配置允许跨域请求的源，此处为本地开发环境地址 .allowedOrigins("http://localhost:5173") // 允许在请求中携带凭证（如Cookies） .allowCredentials(true) // 配置允许的请求头，"*"表示允许所有请求头 .allowedHeaders("*") // 配置允许的HTTP方法，此处允许GET、POST和DELETE请求 .allowedMethods("GET", "POST", "DELETE"); } } 2、登录校验 1、创建拦截器 定义一个类并实现HandlerInterceptor接口。 ...