开源项目学习-文章目录

第一章 环境搭建
第二章 项目运行
第三章 阅读源码:例子-新增用户接口
第四章 基于ruoyi-vue开发新项目



前言

本文尽量贴近零基础入门,献给初入门的学弟学妹们!

文章基本流程:环境配置→运行项目→阅读源码

第二篇主要是项目运行


一、从Gitee克隆项目代码

1.注册gitee

https://gitee.com/signup
选择其他登陆方式→更多→可以用微信扫码注册登录

2.搜开源

导航栏 → 搜开源 → 搜 若依 / RuoYi-Vue → 克隆/下载 → 复制链接
在这里插入图片描述

3.idea+git克隆项目代码

打开idea → 导航栏中的VCS → Git → clone(克隆)→ 点击下方克隆
在这里插入图片描述
如出现报错,点击右方导航栏里的maven → 重新加载
在这里插入图片描述
在这里建议大家安装这两个插件,一个是汉化(看个人英语水平),一个是Lombok(必备)
导航栏File(文件)→ setting → Plugins
在这里插入图片描述

4.vscode打开前端项目

打开vscode → File(文件)→ 打开文件夹 →选择RuoYi-Vue目录下的ruoyi-ui
在这里插入图片描述
vscode也需要安装扩展:
左边导航栏第5个图标即扩展 →搜 Vetur
在这里插入图片描述

5.Navicat建数据库

打开navicat → 连接MySQL → 双击连接可以展开 → 右键连接 → 新建数据库ry-vue
在这里插入图片描述
双击数据库ry-vue可以展开 → 右键ry-vue → 运行SQL文件 → RuoYi-Vue目录下sql文件夹 → 选择ry_xxx.sql → 点击开始
补充内容:quartz.sql文件操作同上
在这里插入图片描述
右键连接刷新 → 双击ry-vue展开 → 表 (里面有表说明数据已经导入了)
在这里插入图片描述


二、项目配置及运行

1.数据库配置修改

>代码如下(示例):

2.启动Redis服务

我的上一篇博客有启动流程~
文章:环境搭建-Redis
在这里插入图片描述

3.后端项目运行

回到idea
在这里插入图片描述

4.前端项目运行

回到vscode → 项目文件拉到最下面找到README.MD → 新建终端
在这里插入图片描述
复制npm install --registry=https://registry.npmmirror.com命令到终端 → 回车
在这里插入图片描述
等待安装完成后 → 复制npm run dev → 回车
在这里插入图片描述
此时浏览器会自动打开页面 → 输入验证码登录系统即可
在这里插入图片描述


总结

至此,后台管理项目前后端都已经运行起来了,下一篇主要跟着大家一起学习功能接口的代码!

直通车~
第一章 环境搭建
第二章 项目运行
第三章 阅读源码:例子-新增用户接口
第四章 基于ruoyi-vue开发新项目

Logo

快速构建 Web 应用程序

更多推荐