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

重构谷粒商城10：若依系统快速入门

article 2025/3/31 16:48:09

重构谷粒商城10：若依系统快速入门

前言：这个系列将使用最前沿的cursor作为辅助编程工具，来快速开发一些基础的编程项目。目的是为了在真实项目中，帮助初级程序员快速进阶，以最快的速度，效率，快速进阶到中高阶程序员。

本项目将基于谷粒商城项目，并且对谷粒商城项目进行二次重构，使其满足最新的主流技术栈要求。

尚篇文章主要介绍，人人开源框架的快速入门，使用它快速搭建项目后台。这篇文章快速入门若依，将作为使用若依重构项目的起点。

1、若依简介

相比较人人开源来说，若依是一个更加流行的脚手架。我们这节课就来紧跟下潮流。快速入门若依，使用若依搭建后台管理系统。

主观感受下。

image-20250314150639834

下载源码。

image-20250314150005889

2、代码部署

clone下代码

git clone git@gitee.com:y_project/RuoYi-Vue.git

安装前端依赖。

npm install --registry=https://registry.npmmirror.com

启动项目。

npm run dev

成功了，不过我们发现验证码没有加载出来，我们看看啥原因。

image-20250314153642729

原理是拿验证码的接口写的本地的地址，但显然本地不存在这个验证码服务接口。

image-20250314153836144

先不用管他，等后端起来就好。先把项目中.git目录删除。把文件夹拷贝到我们的项目目录下。

image-20250314160036676

将拷贝的源码，前端部分的文件夹删除。让代码更干净。

image-20250314160137909

Idea中，菜单 File -> Import，然后选择 Maven -> Existing Maven Projects，点击 Next> 按钮，选择工作目录，然后点击 Finish 按钮，即可成功导入。Idea会自动加载Maven依赖包，初次加载会比较慢（根据自身网络情况而定）

image-20250314160837506

创建数据库ry-vue并导入数据脚本ry_2021xxxx.sql，quartz.sql

image-20250314172812375

执行ry_2021xxxx.sql可能出现错误，改下编码就好。

image-20250314173404923

再执行就不会报错了。

image-20250314173456863

改下代码中数据库连接信息。先看看application.yaml

image-20250314173954953

默认启用的配置就是application-druid.yml,点他。改下数据库配置。

image-20250314174243223

改下guli-mall父项目的pom文件。

image-20250314175630486

启动项目。发现报错了，看下错误信息，发现是缺少redis环境。RedisConnectionFailureException.

看下，项目所需的运行环境。

JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 12

果然，还差一个redis，这也给我们提供了一个经验，部署项目要先准备好它所需的运行环境。

我们前面其实已经部署了redis，没有部署的可以自行部署下。

改下application.yaml中redis连接配置信息。

image-20250317112216777

重新启动项目。成功咯。

image-20250317112412563

访问后端页面，一切正常

image-20250317112513996

现在再访问下前端界面。

验证码出现咯。

image-20250317113107631

登录进去，点点点吧。

image-20250317113219956

3、简单业务流程

创建用户申请表。这些都可以用ai生成。很方便。

CREATE TABLE user_application_form (
    id INT AUTO_INCREMENT PRIMARY KEY,               -- 唯一标识符，自动递增
    first_name VARCHAR(100) NOT NULL,                 -- 用户的名字
    last_name VARCHAR(100) NOT NULL,                  -- 用户的姓氏
    email VARCHAR(255) NOT NULL UNIQUE,               -- 用户的邮箱，唯一
    phone_number VARCHAR(20),                         -- 用户的电话号码
    date_of_birth DATE,                               -- 用户的出生日期
    gender ENUM('Male', 'Female', 'Other') NOT NULL,  -- 用户的性别
    address VARCHAR(255),                             -- 用户的地址
    city VARCHAR(100),                                -- 用户所在城市
    state VARCHAR(100),                               -- 用户所在省/州
    zip_code VARCHAR(20),                             -- 邮政编码
    country VARCHAR(100),                             -- 用户所在国家
    username VARCHAR(50) NOT NULL UNIQUE,             -- 用户名，唯一
    password VARCHAR(255) NOT NULL,                   -- 密码
    confirm_password VARCHAR(255) NOT NULL,           -- 确认密码
    agree_terms BOOLEAN DEFAULT FALSE,                -- 是否同意条款和条件
    application_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP, -- 申请日期
    status ENUM('Pending', 'Approved', 'Rejected') DEFAULT 'Pending'  -- 申请状态
);

一切正常。

image-20250317115151362

插入一些演示数据。

INSERT INTO user_application_form 
(first_name, last_name, email, phone_number, date_of_birth, gender, address, city, state, zip_code, country, username, password, confirm_password, agree_terms, application_date, status)
VALUES
('John', 'Doe', 'john.doe@example.com', '123-456-7890', '1990-05-15', 'Male', '123 Main St', 'New York', 'NY', '10001', 'USA', 'johndoe', 'password123', 'password123', TRUE, '2025-03-17 10:00:00', 'Pending'),
('Jane', 'Smith', 'jane.smith@example.com', '987-654-3210', '1985-09-22', 'Female', '456 Elm St', 'Los Angeles', 'CA', '90001', 'USA', 'janesmith', 'password456', 'password456', TRUE, '2025-03-17 11:00:00', 'Approved'),
('Emily', 'Johnson', 'emily.johnson@example.com', '555-123-4567', '1992-11-30', 'Female', '789 Pine St', 'Chicago', 'IL', '60007', 'USA', 'emilyj', 'password789', 'password789', TRUE, '2025-03-17 12:00:00', 'Rejected'),
('Michael', 'Williams', 'michael.williams@example.com', '321-654-9870', '1988-02-10', 'Male', '101 Maple Ave', 'Miami', 'FL', '33101', 'USA', 'michaelw', 'password321', 'password321', FALSE, '2025-03-17 13:00:00', 'Pending'),
('Olivia', 'Brown', 'olivia.brown@example.com', '555-987-6543', '1995-06-25', 'Female', '202 Oak Rd', 'Dallas', 'TX', '75201', 'USA', 'oliviab', 'password654', 'password654', TRUE, '2025-03-17 14:00:00', 'Approved'),
('Aiden', 'Clark', 'aiden.clark@example.com', '444-555-6666', '1994-01-10', 'Male', '303 Birch St', 'San Francisco', 'CA', '94105', 'USA', 'aidenclark', 'password987', 'password987', TRUE, '2025-03-17 15:00:00', 'Approved'),
('Sophia', 'Martinez', 'sophia.martinez@example.com', '777-888-9999', '1989-12-02', 'Female', '404 Cedar Ave', 'Austin', 'TX', '73301', 'USA', 'sophiam', 'password321', 'password321', TRUE, '2025-03-17 16:00:00', 'Rejected'),
('Jackson', 'Lopez', 'jackson.lopez@example.com', '123-321-4321', '1983-07-11', 'Male', '505 Maple Rd', 'Houston', 'TX', '77001', 'USA', 'jacksonl', 'password654', 'password654', FALSE, '2025-03-17 17:00:00', 'Pending'),
('Isabella', 'Gonzalez', 'isabella.gonzalez@example.com', '555-777-8888', '1990-08-16', 'Female', '606 Oak St', 'Phoenix', 'AZ', '85001', 'USA', 'isabellag', 'password123', 'password123', TRUE, '2025-03-17 18:00:00', 'Approved'),
('Lucas', 'Hernandez', 'lucas.hernandez@example.com', '222-333-4444', '1993-04-20', 'Male', '707 Pine Ave', 'Denver', 'CO', '80201', 'USA', 'lucash', 'password456', 'password456', TRUE, '2025-03-17 19:00:00', 'Pending'),
('Mia', 'Lopez', 'mia.lopez@example.com', '555-444-3333', '1992-03-25', 'Female', '808 Birch Rd', 'Boston', 'MA', '02108', 'USA', 'mialopez', 'password789', 'password789', TRUE, '2025-03-17 20:00:00', 'Rejected'),
('Benjamin', 'Walker', 'benjamin.walker@example.com', '333-444-5555', '1987-10-05', 'Male', '909 Cedar Ave', 'Seattle', 'WA', '98101', 'USA', 'benjaminw', 'password123', 'password123', FALSE, '2025-03-17 21:00:00', 'Pending'),
('Charlotte', 'Young', 'charlotte.young@example.com', '666-777-8888', '1994-02-18', 'Female', '1000 Maple Rd', 'San Diego', 'CA', '92101', 'USA', 'charlottey', 'password456', 'password456', TRUE, '2025-03-17 22:00:00', 'Approved'),
('Henry', 'King', 'henry.king@example.com', '888-777-6666', '1986-11-02', 'Male', '1100 Oak Ave', 'Las Vegas', 'NV', '89101', 'USA', 'henryk', 'password789', 'password789', TRUE, '2025-03-17 23:00:00', 'Rejected'),
('Amelia', 'Scott', 'amelia.scott@example.com', '444-333-2222', '1996-05-12', 'Female', '1200 Pine St', 'Portland', 'OR', '97201', 'USA', 'amelias', 'password321', 'password321', TRUE, '2025-03-17 00:00:00', 'Approved'),
('Ethan', 'Adams', 'ethan.adams@example.com', '777-888-9999', '1991-08-09', 'Male', '1300 Birch Rd', 'Atlanta', 'GA', '30301', 'USA', 'ethana', 'password654', 'password654', FALSE, '2025-03-18 01:00:00', 'Pending'),
('Harper', 'Nelson', 'harper.nelson@example.com', '555-123-7890', '1993-10-23', 'Female', '1400 Cedar Ave', 'Philadelphia', 'PA', '19103', 'USA', 'harpern', 'password987', 'password987', TRUE, '2025-03-18 02:00:00', 'Approved'),
('Daniel', 'Carter', 'daniel.carter@example.com', '333-555-7777', '1987-03-30', 'Male', '1500 Oak Rd', 'Washington', 'DC', '20001', 'USA', 'danielc', 'password123', 'password123', TRUE, '2025-03-18 03:00:00', 'Rejected'),
('Zoe', 'Mitchell', 'zoe.mitchell@example.com', '555-666-7777', '1994-01-17', 'Female', '1600 Pine Ave', 'Salt Lake City', 'UT', '84101', 'USA', 'zoem', 'password321', 'password321', TRUE, '2025-03-18 04:00:00', 'Pending'),
('William', 'Perez', 'william.perez@example.com', '222-444-6666', '1985-09-04', 'Male', '1700 Birch Ave', 'Orlando', 'FL', '32801', 'USA', 'williamp', 'password654', 'password654', TRUE, '2025-03-18 05:00:00', 'Approved');

确认下，插入成功咯

image-20250317115552338

接下来，我们使用若依自动生成一些基础的代码吧。

image-20250317132351567

image-20250317132412871

可以进行一些编辑。先修改下字段描述。这是前端生成表格的表头显示信息。

image-20250317133536502

根据实际情况勾选是否允许插入、编辑、列表显示、根据该条件查询。显示类型也根据实际情况选择，比如性别一般采用下拉框。

image-20250317134303104

最右边一列字典类型，其实就是一些枚举信息。我们可以来具体看看是啥。

image-20250317134929301

懂了，就是对字段进行了一些枚举定义，比如定义用户性别中，男是0，女是1，未知是2.

image-20250317135010365

我们对数据库的表格也做做备注，使两者保持一致。

image-20250317135357476

对于在数据字典中，没有的内容，我们可以自己新建。比如我们需要新建一个审核状态的数据字典信息。

image-20250317141203718

添加字典数据字段信息。

image-20250317140542679

最后效果如下。

image-20250317140803227

同样注意与数据库中信息一致，其实你可以在数据库创建时就规定好这些，这样更规范。

image-20250317141001098

如法炮制。

image-20250317141532688

image-20250317141456091

image-20250317141631389

好啦，接着进行我们的表单修改。选择性别、审核状态、是否同意协议的字典类型。

image-20250317152843813

提交。出错。

image-20250317152733420

看下错误提示。每天表信息和生成功能名字。

image-20250317153117625

填下。

image-20250317153214429

image-20250317153259877

改下生成模块名。

image-20250317160918305

重新提交即可。

接下来我们新建一个菜单模块，用来用户审核管理。

image-20250317154400531

回到之前代码生成页面，将上级菜单选择为审核管理。

image-20250317154512412

预览。

image-20250317154703124

可以看到会自动生成的代码。从sql到后端到前端，齐活。

image-20250317154730609

点击生成代码。将生成的压缩包解压。执行下生成的sql。

image-20250317155956426

复制后端代码，先把下面三个包选中，ctrl c

image-20250317160447439

在下图路径，ctrl v，点ok。

image-20250317160523460

代码就加进来了。

同样的道理，把resource中的代码也复制下。

image-20250317161735870

controller

image-20250317162031249

稍微讲下controller代码。下图这个标红的东东是什么？

image-20250317162155190

这是权限标识。与下图中的内容是对应的。这样会比较安全，如果你没有这个权限，就无法请求对应的接口。

image-20250317162307287

当然，你要是为了学习，可以不设置权限标识，这样比较简便。也可以在代码中，先把这个注解注释掉。

重启下后端项目。

接下来前端走起。我粘

image-20250317164434391

我再粘。

image-20250317164706444

ctrl+s保存，前端代码会自动加载。启动下前端。

可以了。

image-20250328160710413

可以做些简单操作进行下测试。自己玩吧。

image-20250328161033640

若依的基础介绍这篇就介绍这么多，实际上，它的内容很多，可以参考官方文档自学下。

https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#%E6%96%B0%E5%A2%9E-view

image-20250328163503144

不过，由于很多同学没有node、npm、axios、vue、element-ui这些基础，我这里先不介绍。会在后面几篇在使用时选择性的介绍下，也可能会考虑新开一个专栏，或者在这个专栏加餐补充。后续文章会先对上面前端技术栈进行一些选择性的介绍。

总之呢，小白到高级开发甚至架构师，所需要的技术栈，都会在这个专栏教给你，只需要关注下。哈哈哈。

前言：这个系列将使用最前沿的cursor作为辅助编程工具，来快速开发一些基础的编程项目。目的是为了在真实项目中，帮助初级程序员快速进阶，以最快的速度，效率，快速进阶到中高阶程序员。

本项目将基于谷粒商城项目，并且对谷粒商城项目进行二次重构，使其满足最新的主流技术栈要求。

尚篇文章主要介绍，人人开源框架的快速入门，使用它快速搭建项目后台。这篇文章快速入门若依，将作为使用若依重构项目的起点。

1、若依简介

相比较人人开源来说，若依是一个更加流行的脚手架。我们这节课就来紧跟下潮流。快速入门若依，使用若依搭建后台管理系统。

主观感受下。

image-20250314150639834

下载源码。

image-20250314150005889

2、代码部署

clone下代码

git clone git@gitee.com:y_project/RuoYi-Vue.git

安装前端依赖。

npm install --registry=https://registry.npmmirror.com

启动项目。

npm run dev

成功了，不过我们发现验证码没有加载出来，我们看看啥原因。

image-20250314153642729

原理是拿验证码的接口写的本地的地址，但显然本地不存在这个验证码服务接口。

image-20250314153836144

先不用管他，等后端起来就好。先把项目中.git目录删除。把文件夹拷贝到我们的项目目录下。

image-20250314160036676

将拷贝的源码，前端部分的文件夹删除。让代码更干净。

image-20250314160137909

Idea中，菜单 File -> Import，然后选择 Maven -> Existing Maven Projects，点击 Next> 按钮，选择工作目录，然后点击 Finish 按钮，即可成功导入。Idea会自动加载Maven依赖包，初次加载会比较慢（根据自身网络情况而定）

image-20250314160837506

创建数据库ry-vue并导入数据脚本ry_2021xxxx.sql，quartz.sql

image-20250314172812375

执行ry_2021xxxx.sql可能出现错误，改下编码就好。

image-20250314173404923

再执行就不会报错了。

image-20250314173456863

改下代码中数据库连接信息。先看看application.yaml

image-20250314173954953

默认启用的配置就是application-druid.yml,点他。改下数据库配置。

image-20250314174243223

改下guli-mall父项目的pom文件。

image-20250314175630486

启动项目。发现报错了，看下错误信息，发现是缺少redis环境。RedisConnectionFailureException.

看下，项目所需的运行环境。

JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 12

果然，还差一个redis，这也给我们提供了一个经验，部署项目要先准备好它所需的运行环境。

我们前面其实已经部署了redis，没有部署的可以自行部署下。

改下application.yaml中redis连接配置信息。

image-20250317112216777

重新启动项目。成功咯。

image-20250317112412563

访问后端页面，一切正常

image-20250317112513996

现在再访问下前端界面。

验证码出现咯。

image-20250317113107631

登录进去，点点点吧。

image-20250317113219956

3、简单业务流程

创建用户申请表。这些都可以用ai生成。很方便。

CREATE TABLE user_application_form (
    id INT AUTO_INCREMENT PRIMARY KEY,               -- 唯一标识符，自动递增
    first_name VARCHAR(100) NOT NULL,                 -- 用户的名字
    last_name VARCHAR(100) NOT NULL,                  -- 用户的姓氏
    email VARCHAR(255) NOT NULL UNIQUE,               -- 用户的邮箱，唯一
    phone_number VARCHAR(20),                         -- 用户的电话号码
    date_of_birth DATE,                               -- 用户的出生日期
    gender ENUM('Male', 'Female', 'Other') NOT NULL,  -- 用户的性别
    address VARCHAR(255),                             -- 用户的地址
    city VARCHAR(100),                                -- 用户所在城市
    state VARCHAR(100),                               -- 用户所在省/州
    zip_code VARCHAR(20),                             -- 邮政编码
    country VARCHAR(100),                             -- 用户所在国家
    username VARCHAR(50) NOT NULL UNIQUE,             -- 用户名，唯一
    password VARCHAR(255) NOT NULL,                   -- 密码
    confirm_password VARCHAR(255) NOT NULL,           -- 确认密码
    agree_terms BOOLEAN DEFAULT FALSE,                -- 是否同意条款和条件
    application_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP, -- 申请日期
    status ENUM('Pending', 'Approved', 'Rejected') DEFAULT 'Pending'  -- 申请状态
);

一切正常。

image-20250317115151362

插入一些演示数据。

INSERT INTO user_application_form 
(first_name, last_name, email, phone_number, date_of_birth, gender, address, city, state, zip_code, country, username, password, confirm_password, agree_terms, application_date, status)
VALUES
('John', 'Doe', 'john.doe@example.com', '123-456-7890', '1990-05-15', 'Male', '123 Main St', 'New York', 'NY', '10001', 'USA', 'johndoe', 'password123', 'password123', TRUE, '2025-03-17 10:00:00', 'Pending'),
('Jane', 'Smith', 'jane.smith@example.com', '987-654-3210', '1985-09-22', 'Female', '456 Elm St', 'Los Angeles', 'CA', '90001', 'USA', 'janesmith', 'password456', 'password456', TRUE, '2025-03-17 11:00:00', 'Approved'),
('Emily', 'Johnson', 'emily.johnson@example.com', '555-123-4567', '1992-11-30', 'Female', '789 Pine St', 'Chicago', 'IL', '60007', 'USA', 'emilyj', 'password789', 'password789', TRUE, '2025-03-17 12:00:00', 'Rejected'),
('Michael', 'Williams', 'michael.williams@example.com', '321-654-9870', '1988-02-10', 'Male', '101 Maple Ave', 'Miami', 'FL', '33101', 'USA', 'michaelw', 'password321', 'password321', FALSE, '2025-03-17 13:00:00', 'Pending'),
('Olivia', 'Brown', 'olivia.brown@example.com', '555-987-6543', '1995-06-25', 'Female', '202 Oak Rd', 'Dallas', 'TX', '75201', 'USA', 'oliviab', 'password654', 'password654', TRUE, '2025-03-17 14:00:00', 'Approved'),
('Aiden', 'Clark', 'aiden.clark@example.com', '444-555-6666', '1994-01-10', 'Male', '303 Birch St', 'San Francisco', 'CA', '94105', 'USA', 'aidenclark', 'password987', 'password987', TRUE, '2025-03-17 15:00:00', 'Approved'),
('Sophia', 'Martinez', 'sophia.martinez@example.com', '777-888-9999', '1989-12-02', 'Female', '404 Cedar Ave', 'Austin', 'TX', '73301', 'USA', 'sophiam', 'password321', 'password321', TRUE, '2025-03-17 16:00:00', 'Rejected'),
('Jackson', 'Lopez', 'jackson.lopez@example.com', '123-321-4321', '1983-07-11', 'Male', '505 Maple Rd', 'Houston', 'TX', '77001', 'USA', 'jacksonl', 'password654', 'password654', FALSE, '2025-03-17 17:00:00', 'Pending'),
('Isabella', 'Gonzalez', 'isabella.gonzalez@example.com', '555-777-8888', '1990-08-16', 'Female', '606 Oak St', 'Phoenix', 'AZ', '85001', 'USA', 'isabellag', 'password123', 'password123', TRUE, '2025-03-17 18:00:00', 'Approved'),
('Lucas', 'Hernandez', 'lucas.hernandez@example.com', '222-333-4444', '1993-04-20', 'Male', '707 Pine Ave', 'Denver', 'CO', '80201', 'USA', 'lucash', 'password456', 'password456', TRUE, '2025-03-17 19:00:00', 'Pending'),
('Mia', 'Lopez', 'mia.lopez@example.com', '555-444-3333', '1992-03-25', 'Female', '808 Birch Rd', 'Boston', 'MA', '02108', 'USA', 'mialopez', 'password789', 'password789', TRUE, '2025-03-17 20:00:00', 'Rejected'),
('Benjamin', 'Walker', 'benjamin.walker@example.com', '333-444-5555', '1987-10-05', 'Male', '909 Cedar Ave', 'Seattle', 'WA', '98101', 'USA', 'benjaminw', 'password123', 'password123', FALSE, '2025-03-17 21:00:00', 'Pending'),
('Charlotte', 'Young', 'charlotte.young@example.com', '666-777-8888', '1994-02-18', 'Female', '1000 Maple Rd', 'San Diego', 'CA', '92101', 'USA', 'charlottey', 'password456', 'password456', TRUE, '2025-03-17 22:00:00', 'Approved'),
('Henry', 'King', 'henry.king@example.com', '888-777-6666', '1986-11-02', 'Male', '1100 Oak Ave', 'Las Vegas', 'NV', '89101', 'USA', 'henryk', 'password789', 'password789', TRUE, '2025-03-17 23:00:00', 'Rejected'),
('Amelia', 'Scott', 'amelia.scott@example.com', '444-333-2222', '1996-05-12', 'Female', '1200 Pine St', 'Portland', 'OR', '97201', 'USA', 'amelias', 'password321', 'password321', TRUE, '2025-03-17 00:00:00', 'Approved'),
('Ethan', 'Adams', 'ethan.adams@example.com', '777-888-9999', '1991-08-09', 'Male', '1300 Birch Rd', 'Atlanta', 'GA', '30301', 'USA', 'ethana', 'password654', 'password654', FALSE, '2025-03-18 01:00:00', 'Pending'),
('Harper', 'Nelson', 'harper.nelson@example.com', '555-123-7890', '1993-10-23', 'Female', '1400 Cedar Ave', 'Philadelphia', 'PA', '19103', 'USA', 'harpern', 'password987', 'password987', TRUE, '2025-03-18 02:00:00', 'Approved'),
('Daniel', 'Carter', 'daniel.carter@example.com', '333-555-7777', '1987-03-30', 'Male', '1500 Oak Rd', 'Washington', 'DC', '20001', 'USA', 'danielc', 'password123', 'password123', TRUE, '2025-03-18 03:00:00', 'Rejected'),
('Zoe', 'Mitchell', 'zoe.mitchell@example.com', '555-666-7777', '1994-01-17', 'Female', '1600 Pine Ave', 'Salt Lake City', 'UT', '84101', 'USA', 'zoem', 'password321', 'password321', TRUE, '2025-03-18 04:00:00', 'Pending'),
('William', 'Perez', 'william.perez@example.com', '222-444-6666', '1985-09-04', 'Male', '1700 Birch Ave', 'Orlando', 'FL', '32801', 'USA', 'williamp', 'password654', 'password654', TRUE, '2025-03-18 05:00:00', 'Approved');

确认下，插入成功咯

image-20250317115552338

接下来，我们使用若依自动生成一些基础的代码吧。

image-20250317132351567

image-20250317132412871

可以进行一些编辑。先修改下字段描述。这是前端生成表格的表头显示信息。

image-20250317133536502

根据实际情况勾选是否允许插入、编辑、列表显示、根据该条件查询。显示类型也根据实际情况选择，比如性别一般采用下拉框。

image-20250317134303104

最右边一列字典类型，其实就是一些枚举信息。我们可以来具体看看是啥。

image-20250317134929301

懂了，就是对字段进行了一些枚举定义，比如定义用户性别中，男是0，女是1，未知是2.

image-20250317135010365

我们对数据库的表格也做做备注，使两者保持一致。

image-20250317135357476

对于在数据字典中，没有的内容，我们可以自己新建。比如我们需要新建一个审核状态的数据字典信息。

image-20250317141203718

添加字典数据字段信息。

image-20250317140542679

最后效果如下。

image-20250317140803227

同样注意与数据库中信息一致，其实你可以在数据库创建时就规定好这些，这样更规范。

image-20250317141001098

如法炮制。

image-20250317141532688

image-20250317141456091

image-20250317141631389

好啦，接着进行我们的表单修改。选择性别、审核状态、是否同意协议的字典类型。

image-20250317152843813

提交。出错。

image-20250317152733420

看下错误提示。每天表信息和生成功能名字。

image-20250317153117625

填下。

image-20250317153214429

image-20250317153259877

改下生成模块名。

image-20250317160918305

重新提交即可。

接下来我们新建一个菜单模块，用来用户审核管理。

image-20250317154400531

回到之前代码生成页面，将上级菜单选择为审核管理。

image-20250317154512412

预览。

image-20250317154703124

可以看到会自动生成的代码。从sql到后端到前端，齐活。

image-20250317154730609

点击生成代码。将生成的压缩包解压。执行下生成的sql。

image-20250317155956426

复制后端代码，先把下面三个包选中，ctrl c

image-20250317160447439

在下图路径，ctrl v，点ok。

image-20250317160523460

代码就加进来了。

同样的道理，把resource中的代码也复制下。

image-20250317161735870

controller

image-20250317162031249

稍微讲下controller代码。下图这个标红的东东是什么？

image-20250317162155190

这是权限标识。与下图中的内容是对应的。这样会比较安全，如果你没有这个权限，就无法请求对应的接口。

image-20250317162307287

当然，你要是为了学习，可以不设置权限标识，这样比较简便。也可以在代码中，先把这个注解注释掉。

重启下后端项目。

接下来前端走起。我粘

image-20250317164434391

我再粘。

image-20250317164706444

ctrl+s保存，前端代码会自动加载。启动下前端。

可以了。

image-20250328160710413

可以做些简单操作进行下测试。自己玩吧。

image-20250328161033640

若依的基础介绍这篇就介绍这么多，实际上，它的内容很多，可以参考官方文档自学下。

https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#%E6%96%B0%E5%A2%9E-view

image-20250328163503144

不过，由于很多同学没有node、npm、axios、vue、element-ui这些基础，我这里先不介绍。会在后面几篇在使用时选择性的介绍下，也可能会考虑新开一个专栏，或者在这个专栏加餐补充。后续文章会先对上面前端技术栈进行一些选择性的介绍。

总之呢，小白到高级开发甚至架构师，所需要的技术栈，都会在这个专栏教给你，只需要关注下。哈哈哈。


http://www.kler.cn/a/613742.html

相关文章：

  • 【MATLAB例程】三维环境，基于TOA的动态轨迹定位，轨迹使用UKF（无迹卡尔曼滤波）进行滤波，模拟TOA/IMU的数据融合
  • 初级：I/O与NIO面试题深度剖析
  • 使用node-cmd重启electron
  • 算法学习第十七天：LRU缓存与布隆过滤器
  • 轮循取值算法数据库
  • TwinCAT3-Udp点对点自由协议通信
  • 自动驾驶---打造自动驾驶系统之参考线平滑（四）
  • gitee 常用指令
  • springboot的跨域是什么？遇到跨域问题如何解决？
  • 华宇TAS应用中间件与晓窗科技智慧校园管理一体化平台完成兼容互认证
  • linux ACL权限控制之用户权限控制程序设计
  • 使用Python和OpenCV进行指纹识别与验证
  • Resume全栈项目(二)（.React+Ts）
  • 【漫话机器学习系列】166.向量（Vectors）
  • ubuntu 创建新用户
  • Flink Credit-based机制解析
  • 数字化攻防战场的进化论：红蓝对抗训练如何重塑网络安全范式
  • PTA 7-16 一元多项式求导
  • Axure项目实战：智慧城市APP（六）市民互动（动态面板、显示与隐藏）
  • 【Linux-驱动开发-模块的加载和卸载】