前两篇主要根据程序羊的视频教程做了服务器的部署。这篇文章主要介绍如何将Ruoyi前后端分离项目在本地跑起来,进行学习。

一、前端

1、vscode打开UI前端代码

这里我们使用vscode这个软件进行开发

  1. 首先创建一个目录和工作区。在这里我在任意一个地方创建了一个新的文件夹,然后使用vscode打开这个文件夹。vscode本身没有新建项目的选项,所以要先创建一个空的文件夹,如project_xxxx。 然后打开vscode,再在vscode里面选择 File -> Open Folder 打开文件夹,这样才可以创建项目。
  2. 保存工作区:打开文件夹后,选择“文件 -> 将工作区另存为…”,为工作区文件起一个名字,存储在刚才的文件夹下即可
    在这里插入图片描述
  3. 将下载好的ruoyi-ui这个前端文件复制到这个文件夹下。
    在这里插入图片描述

2、npm安装依赖

右键点击这个文件夹,在集成终端打开
在这里插入图片描述
在这里插入图片描述

  1. 然后我们输入代码
npm install

这个时候就会下载一些包,等待下载完成就可以了。
2. 运行改项目

npm run dev

在这里插入图片描述
然后前端界面就打开了!
在这里插入图片描述

二、后端

打开ruoyi后端代码
在这里插入图片描述

1、修改数据库application-druid.yml配置

application-druid.yml

 druid:
            # 主库数据源
            master:
                url: jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=GMT%2B8
                username: root
                password: 123456

在这里插入图片描述
这里配置改为本地,并且在本地创建ry-vue数据库,建表文件若依提供了
在这里插入图片描述
运行这两个文件就可以了。用户名密码改为自己的。

2、修改redis配置

application.yml
这里我有redis,改成自己的了。
在这里插入图片描述

3、logback.xml日志文件

这里我在改目录下创建了logs文件夹。你们自行选择在位置创建。

<property name="log.path" value="E:\\springboot\\RuoyiProjectLocalhost\\logs" />

在这里插入图片描述
这样就可以启动这个项目了。如果redis没有配置好,是没有验证码的。所以要配置好redis
在这里插入图片描述
在这里插入图片描述
这样该项目就在本地跑起来了,就可以进行测试学习阅读源码了!!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐