1、数据库准备

（在navicat中操作）

注意事项

1、不要用关键字和特殊符号

2、定义必要的触发器，部分触发器需要使用一个额外的表对数据进行暂存

具体步骤

1、创建数据库：例如testdatabase

2、在数据库下创建表格：例如testtable

3、在表格中创建字段，对字段进行限制

（编号为主键且自动递增）

（注释必须填写准确）

4、运行项目中的sql文件

RuoYi-Vue-master\sql\quartz.sql

RuoYi-Vue-master\sql\ry_20230706.sql

---

2、相关参数配置

（在idea中进行更改）

1、更改数据源、后端端口号：例如6666

RuoYi-Vue-master\ruoyi-admin\src\main\resources\application-druid.yml

（第9行~第11行）

（第21行）

2、更改前端端口号：例如66

RuoYi-Vue-master\ruoyi-ui\vue.config.js

（第12行）

（第38行）（target属性和后端需保持一致）

3、更改生成代码配置

RuoYi-Vue-master\ruoyi-generator\src\main\resources\generator.yml

---

3、进行代码生成

（项目运行成功后，登录账号，进入系统）

1、添加菜单

依次点击：系统管理、菜单管理、新增

填写新增菜单的信息后点击确定

2、新增字典

依次点击：

系统管理、字典管理、新增

填写新增字典的信息后点击确定

点击新增字典的字典类型（蓝色）进入字典数据，点击新增

填写新增数据的信息后点击确定，重复几次

3、代码生成

依次点击：

系统工具、代码生成、导入

选择要导入的表后点击确定

4、点击编辑、填写基本信息和生成信息(system实际是是abit)

5、修改字段信息

修改显示类型和字典类型后点击提交

6、选择表、点击生成、解压生成的ruoyi.zip文件到桌面的ruoyi文件夹

---

4、将生成的文件添加进入项目

1、在navicat中运行sql文件

ruoyi\testtableMenu.sql

2、将ruoyi\main文件夹复制粘贴到RuoYi-Vue-master\ruoyi-admin\src\main文件夹

3、将ruoyi\vue\api文件夹和ruoyi\vue\views文件夹复制粘贴到RuoYi-Vue-master\ruoyi-ui\src文件夹的下一级

4、重新运行idea和vscode

5、测试一下增删改查等功能

---

5、更改HTML

更改相关文字

（在vscode中进行更改）

1、更改网页标题和菜单栏标题（只更改一处，同时生效）

RuoYi-Vue-master\ruoyi-ui\.env.development

RuoYi-Vue-master\ruoyi-ui\.env.production

RuoYi-Vue-master\ruoyi-ui\.env.staging

2、更改网站标题

RuoYi-Vue-master\ruoyi-ui\vue.config.js

（第10行）

3、更改登录界面标题

RuoYi-Vue-master\ruoyi-ui\src\views\login.vue

4、更改注册界面标题

RuoYi-Vue-master\ruoyi-ui\src\views\register.vue

5、更改登录界面下方备案号

RuoYi-Vue-master\ruoyi-ui\src\views\login.vue

（第59行）

更改相关图片

（在文件夹中替换）

1、更改菜单页面logo.png（64像素x64像素）

RuoYi-Vue-master\ruoyi-ui\src\assets\logo.png

更改其对应调用路径（如果图片不为logo.png)

RuoYi-Vue-master\ruoyi-ui\src\layout\components\Sidebar\Logo.vue

（第17行）

RuoYi-Vue-master\ruoyi-ui\src\views\tool\build\index.vue

（第150行）

2、更改登录界面和注册界面的背景图片login-background.jpg（1000像素x563像素）

RuoYi-Vue-master\ruoyi-ui\src\assets\images\login-background.jpg

更改其对应调用路径（如果图片不为login-background.jpg）

RuoYi-Vue-master\ruoyi-ui\src\views\login.vue

（第164行）

RuoYi-Vue-master\ruoyi-ui\src\views\register.vue

（第154行）

3、更改默认头像profile.jpg（198像素x198像素）

RuoYi-Vue-master\ruoyi-ui\src\assets\images\profile.jpg

更改其对应调用路径（如果图片不为profile.jpg）

RuoYi-Vue-master\ruoyi-ui\src\store\modules\user.js

（第54行）

4、更改网页logo favicon.ico（64像素x64像素）

RuoYi-Vue-master\ruoyi-ui\public\favicon.ico

更改其对应的调用路径（如果图片不为favicon.ico）

RuoYi-Vue-master\ruoyi-ui\public\index.html

（第8行）

去除相关内容

（在vscode中进行更改）

1、去除源码地址和文档地址

RuoYi-Vue-master\ruoyi-ui\src\layout\components\Navbar.vue

（第12行~第18行）

---

6、创建角色，用户并进行授权操作

（项目运行成功后，登录账号，进入系统）

1、新增角色

依次点击：

系统管理、角色管理、新增

填写新增角色的信息后点击确定

2、新增用户，绑定角色

依次点击：

系统管理、用户管理、新增

填写新增用户的信息后点击确定

退出登录，使用新增的用户账号登录

---

7、修改项目的文字信息

（在idea中修改）

修改编码名称

在idea中点击Ctrl+Shift+R，填写需要替换的内容后点击替换全部

修改项目名称

关闭idea和vscode，重命名项目，再将项目使用idea和vscode打开

---

8、更改CSS

（在vscode中修改）

更改按钮样式

RuoYi-Vue-master\ruoyi-ui\src\assets\styles\btn.scss

更改元素样式

RuoYi-Vue-master\ruoyi-ui\src\assets\styles\element-variables.scss