目录

1.下载资源

2.导入数据库表结构和数据

3.更改配置

3.1 redis配置

3.2 数据库配置 

4.本地运行服务

4.1 启动后端服务

4.2 启动前端服务

4.2.1 方式一

4.2.3 方式二

5.自动生成代码

5.1 生成存放数据表

5.2 自动生成前后端代码

5.2.1 自动生成代码

5.3 前后端代码放入指定位置 

5.4 重新构建项目

6.Linux服务部署

6.1 后端部署        

6.2 前端部署 

6.2.1 安装nginx

6.2.2 修改nginx配置

6.2.3 重启nginx服务 

7.常见问题总结

7.1 数据库编码字符集不同导致自动生成代码无法搜索到表

7.2 线上环境验证码不显示

7.3 线上登录后无法进入菜单

7.3 个人主页更换头像失败

8.常用技巧

8.1 修改标题和logo

8.2 修改首页信息

8.3 修改右上角菜单信息

8.4 关闭登陆验证码

---

说明：

        由于公司需要一个给下游渠道展示数据的平台，所以需要开发一套后台管理系统，需求相对比较简单并且要的急，下午给的需求说要今天或者明天就要用...，如果单独部署服务，采用前后端分离肯定是来不及，所以直接选用了开源项目完成功能的实现

需求：

        1.手动录入数据，可以根据条件搜索，并且支持多个条件搜索

        2.有管理员和渠道用户，管理员有CURD权限，渠道用户只有查看权限

1.下载资源

若依有几个不同类型版本

1.前后端不分离

下载地址： RuoYi: 🎉 基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用

2.前后端分离 

下载地址：RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本

3.cloud版本

下载地址：

RuoYi-Cloud: 🎉 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统，同时提供了 Vue3 的版本

官方文档：介绍 | RuoYi

我是用的是前后端分离版本，所以下面将做这个版本记录

2.导入数据库表结构和数据

项目拉到本地后会有这些文件，找到其中sql目录

在数据库中分别运行这两个文件

后期在创建自己的表导入编码后出现了编码问题，所以建议先修改sql文件，在每一个建表语句后面指定编码和字符集

DEFAULT CHARSET=utf8 COLLATE=utf8_general

创建数据库ry并给登录账号分配对新库的操作权限

导入sql文件到ry库,成功后数据库表如下所示

3.更改配置

3.1 redis配置

在application.yml文件中修改redis配置

3.2 数据库配置 

在application-druid.yml文件中修改数据库链接配置

4.本地运行服务

做好以上操作本地已经可以正常运行了

4.1 启动后端服务

后端服务再本地可以直接通过IDEA的方式启动，也可以通过打jar包方式

4.2 启动前端服务

4.2.1 方式一

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

4.2.3 方式二

进入到ruoyi-ui目录下直接点击打包构建和运行三个脚本文件

脚本运行后直接通过本机ipv4访问，localhost无法访问

5.自动生成代码

5.1 生成存放数据表

通过表单自动生成后，在数据库导入文件生成表用来存放信息

5.2 自动生成前后端代码

5.2.1 自动生成代码

表创建好之后登录后台管理服务，系统工具->代码生成。搜索刚刚创建的表 

点击生成代码，下载后解压，将指定目录代码放入到服务指定位置

注意运行sql文件 

5.3 前后端代码放入指定位置 

 

生成的前端代码也放入指定位置

5.4 重新构建项目

参考上面记录，重新运行前后端服务，再次访问，新添加的生成

没有指定上级菜单则默认挂在“系统工具”下面

参考文档：Ruoyi-Vue若依前后端分离版 代码生成使用方法（生成新页面、生成新模块）保姆式教学_Ayaki_murasami的博客-CSDN博客_若依框架新增页面

6.Linux服务部署

首先java运行环境是必不可少，用来运行java程序

6.1 后端部署        

# 将服务放到后台运行
nohup java -jar xxx.jar > /dev/null 2>&1 &

6.2 前端部署 

6.2.1 安装nginx

yum install nginx

6.2.2 修改nginx配置

如果是http访问，监听80端口

6.2.3 重启nginx服务 

systemctl restart nginx.service

同样的访问成功

参考文档： 环境部署 | RuoYi

7.常见问题总结

7.1 数据库编码字符集不同导致自动生成代码无法搜索到表

        统一修改表的编码和字符集，参考前面的注意事项，将建表sql语句的编码字符集设置加上

7.2 线上环境验证码不显示

        问题描述：本地运行登录验证码可以看到，但是在线上环境验证码加载失败

7.3 线上登录后无法进入菜单

详细：Cannot find module '@/views/system/user/index'

问题原因：若依分离版下前端路由切换不了

解决方法：

修改 /src/store/modules/permission.js

将原有的加载视图改为

export const loadView = (view) => { // 路由懒加载
	return (resolve) => require([`@/views/${view}`], resolve)
}

我直接注释掉了，怕出错，后面改 

 重新打包运行问题解决

原文参考：若依 vue 菜单点击报错 Error: Cannot find module ‘@/views/system/user/index‘_夏目友人帐...的博客-CSDN博客

7.3 个人主页更换头像失败

解决方法：配置文件路径

7.4 无法访问资源 401

1. 部署前端到nginx后，访问页面出现 403 错误。

  原因：nginx配置文件的第一行改为 user  root;

2. 前后端都部署好了，但是前端发请求时报“请求超时”，后端控制台没有任何的输出，原因，用的是云服务器，8080端口没有配置安全组。

3. 打开前端页面就出现  ‘’无法访问系统资源 401‘’ ，连图片验证码都加在出来，原因是 nginx的配置文件中， proxy_pass http://192.168.1.101:8080/; 分号前面少了一个 / 

我是因为第三个原因

若依前后端分离部署，出现 “无法访问系统资源 401”或者 “The request was rejected because the URL contained a potentially malicious String - 码农教程

8.常用技巧

8.1 修改标题和logo

vim src/layout/components/Sidebar/Logo.vue

搜索标题并更改 

logo直接替换 

 

 参考原文：若依前后端分离版怎样修改主页面和浏览器上的图标和标题 - 灰信网（软件开发博客聚合）

8.2 修改首页信息

在此修改

8.3 修改右上角菜单信息

8.4 关闭登陆验证码

# 编辑login.vue
vim ruoyi-ui/src/views/login.vue
// 验证码开关设置为false不启用
captchaOnOff: false,

这里只是实现了最基础的入门，还有更多的技巧希望CSDN的小伙伴们一起分享，欢迎在下方评论区给我留言~