younuoqianjin的博客

每次网购时，你是否注意过同一款商品会有不同颜色、尺寸、配置的选项？比如同一款手机有「黑色128G」和「银色256G」的不同选择。这背后其实是电商世界的两个核心密码——SPU和SKU。用最生活化的例子，带你轻松理解这两个概念。

商品属性功能类似若依自带的字典管理，分两步，先设置属性名，再设置对应的属性值。

按照功能2的操作步骤，再生成商品分类的单表增删改查功能。商品分类页面：用于录入商品的分类信息。

商品中心包括5个子功能。商品品牌页面：用于录入品牌名称和品牌图片。使用若依的代码生成功能，生成商品品牌的单表增删改查。

若依框架有很多版本，这里使用的是springboot3+vue3这样的一个前后端分离的版本。

采用经典的RBAC（基于角色的访问控制）用户：系统使用者（如：张三、李四）角色：权限集合（如：管理员、新员工）菜单：具体操作菜单（如：用户管理、新员工培训）

JWT（JSON Web Token）是一种基于Token的轻量级认证协议，由 RFC 7519 规范定义。其核心思想是：•无状态：服务端无需存储 Token，认证信息通过加密签名直接嵌入 Token 中。•自包含性：Token 本身包含用户身份、权限等关键数据，服务端只需验证签名即可信任内容。•跨域友好：通过 HTTP Header（如）传递，天然支持跨域场景。Token 结构JWT 由三部分组成，以•Header：声明 Token 类型（typ: "JWT"）和签名算法（如。

将登录的功能对接后端。

通过操作菜单管理页面，新增一个新页面。

前言实现角色管理的前端+后端增改查功能，暂时不实现删除。一.操作步骤1.Controllersrc/main/java/com/ruoyi/web/controller/system/SysRoleController.java2.Servicesrc/main/java/com/ruoyi/system/service/ISysRoleService.javasrc/main/java/com/ruoyi/system/service/impl/SysRoleServiceImpl.java

前言实现菜单管理的前端+后端增改查功能，暂时不实现删除。src/main/java/com/ruoyi/web/controller/system/SysMenuController.java前端2.APIsrc\api\system\menu.js3.修改模板src\views\system\menu\index.vue4.优化BUG在开发过程中，随着功能的添加，之前实现的代码会产生一些bug，随功能一起优化代码。src\components\IconSelect\index.vues

menu_id bigint(20) not null auto_increment comment '菜单ID',menu_name varchar(50) not null comment '菜单名称',parent_id bigint(20) default 0 comment '父菜单ID',order_num int(4) default 0 comment '显示顺序',path varchar(200) default '' comment '路由地址',

前后端实现基础增删改查功能。新建文件：src/main/java/com/ruoyi/common/constant/HttpStatus.java/*** 操作成功*//*** 对象创建成功*//*** 请求已经被接受*//*** 操作已经执行成功，但是没有返回数据*//*** 资源已被移除*//*** 重定向*//*** 资源没有被修改*//*** 参数列表错误（缺少，格式不匹配）*//*** 未授权*//**

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，广泛应用于浏览器和 Node.js 环境。它简化了前端与后端的数据交互，具备拦截器、自动 JSON 转换、请求取消等强大功能，成为替代原生 fetch 的热门选择。新建文件：src\utils\request.js// 创建axios实例// axios中请求配置有baseURL选项，表示请求URL公共部分// 超时headers: {})// 响应拦截器},error => {

MyBatis-Plus 的分页插件提供了强大的分页功能，支持多种数据库（如 MySQL、Oracle、PostgreSQL），通过简单的配置即可实现高效的分页查询。MyBatis-Plus 的分页功能具有以下优势：•无侵入性：无需修改原有 Mapper 接口和 SQL 语句。•自动化处理：自动拼接COUNT查询语句，计算总记录数。•多数据库支持：通过DbType配置适配不同数据库方言。•与 Spring Boot 深度整合：通过 Starter 依赖快速集成。POJO自动绑定。

user_id bigint(20) not null auto_increment comment '用户ID',dept_id bigint(20) default null comment '部门ID',user_name varchar(30) not null comment '用户账号',nick_name varchar(30) not null comment '用户昵称',

前端项目中，关于Vue和element plus的知识点，大概完成了80%，后续就前后端搭配去实现完整的功能。

前言一.操作步骤1.菜单管理新建文件src\views\system\menu\index.vue2.修改文件src\api\system\menu.js造一些数据，用于页面的静态展示。3.自定义组件新建文件src\components\DictTag\index.vue新建文件src\components\IconSelect\index.vue新建辅助文件src\components\IconSelect\requireIcons.js4.修改src\utils\ruoyi.js增

前言页面静态展示。新建文件src\views\system\role\index.vue2.请求接口新建文件src\api\system\role.js，管理角色页面里用到的所有接口。新建文件src\api\system\menu.js，管理菜单页面里用到的所有接口。二.功能验证运行项目，浏览器访问http://localhost:5173/system/role

前言只完成页面的静态展示。按钮的功能大多数都涉及和后端交互，待后续接入后端再实现。新建文件src\views\system\user\index.vue2.请求接口新建文件src\api\system\user.js，封装所有该页面使用到的网络请求接口。暂时模拟一些静态数据。3.安装依赖 是一个用于 创建可拖拽调整大小的面板布局 的 Vue 组件库。4.自定义分页组件新建文件src\components\Pagination\index.vue5.自定义toolbar组件新建文件src\c

在自动将 SVG 文件转换为可复用的<symbol>图标运行时动态加载 SVG 图标通过<use>标签高效复用图标<template></svg>},color: {})${`)</script>width: 1em;</style>

用于在侧边栏顶部显示logo图片和文字。支持折叠和展开。// 获取Logo背景色 const getLogoBackground = '#304156' // 获取Logo文字颜色 const getLogoTextColor = '#ffffff' </ script > < style lang = " scss " scoped > .sidebarLogoFade-enter-active {margin : 0;

前言el-menu提供了侧边栏的折叠属性collapse，可以水平折叠收起菜单。定义appStore，保存控制侧边栏状态的相关信息。showSidebar ：false侧边栏展开，true侧边栏折叠。sidebarWidth ：展开时的组件宽度。2.修改Navbar.vue在面包屑前，增加一个图标，点击图标会触发appStore里的状态变化，实现侧边栏折叠和展开。3.修改Sidebar.vue将el-menu的collapse属性绑定到appstore的showSidebar，响应式的控制侧边

在导航栏上显示当前页面路径的就是面包屑。它可以侧边栏菜单联动。

给不需要显示的对象设置hidden属性，例如登录页。给首页增加meta属性。export这个初始化的路由数组，后面需要跟服务端返回的动态数组合并。},path: '/',meta: { title: '首页', icon: 'House', affix: true },meta: { title: '首页', icon: 'House', affix: true }

模板代码使用AI生成，基本可以实现大概的效果。想要精细化调整，可以等到功能实现完成后再进行重构。

在项目中，我们规定只有首页（/login），是不需要用户登录，就可以正常访问的。其他页面，都需要登录才能访问。如果用户在没有登录时，直接访问http://localhost:5173/index，就会被重定向到登录页。用户的登录状态，统一保存在userStore里。新建文件：src/stores/user.js// 异步操作return {login})新建文件：src/stores/permission.js将请求getRouters接口和处理返回结果的逻辑，都放在该Store里。

前言在若依里，addRoute方法是在前置守卫里被调用的。要能实现在浏览器刷新后，能重新从后端服务器获取数据再动态添加。处理逻辑如下：浏览器刷新前置守卫Pinia后端API路由器浏览器触发 beforeEach检查权限数据数据已丢失重新获取权限返回权限数据addRoute 动态路由完成路由跳转浏览器刷新前置守卫Pinia后端API路由器浏览器不能像昨天的代码那样，在layout/index.vue这个地方调用。会导致浏览器刷新后，动态添加的路由记录丢失。在 Vue Router 中通过 注册全局前置守

前言昨天点击菜单后，没有得到预期结果的页面展示效果。是因为Router里没有对应的路由记录。从开发工具可以看到当前的路由记录。就只有在src/router/index.js文件里配置的和是 Vue Router 4.x 中动态添加路由的核心方法，主要用于实现权限路由、按需加载等场景。方法的入参格式，可以参考路由配置文件里面的首页配置。需要重点关注两个component属性，值要对应到具体的资源对象。2.解析getRouters接口的返回结果“component”: “Layout”一级折叠

在若依中，侧边栏显示的菜单项，是根据登录用户的角色动态显示的。不同角色的用户，看到的菜单可能是不一样的。这就需要在代码中，能根据后端服务器返回的结果，动态显示菜单项。前端领域的「潜规则」•HTML 属性：HTML 规范要求属性名全小写（比如），若强行写驼峰形式会被当作字符串属性。•JS 属性：JavaScript 习惯用驼峰命名变量（如menuData），写短横线形式menu-data需要加引号，不符合代码审美。于是 Vue 在中间做了自动翻译。

Layout布局的效果。在侧边栏点击不同菜单，只有红框里的内容会对应改变。整个页面是父路由的component渲染，红框是子路由的component渲染。

Vue Router了解一下！

使用AI，用一句话生成代码。

刚开始，就简简单单创建个项目。

找到文件：RuoYi-Vue\ruoyi-admin\src\main\resources\application.yml。使用任意的mysql客户端工具，连接上去后，创建一个数据库ry-vue。若依框架有很多版本，这里学习的是springboot3+vue3这样的一个前后端分离的版本。然后使用命令在本地创建一个sp3（名字随意取）的分支，关联远端的springboot3分支。使用cmd，进入到目录里，执行pnpm install。后端springboot3的代码路径，这样的显示，表示操作成功。