开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】

开源项目学习-文章目录

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


文章目录

  • 开源项目学习-文章目录
  • 前言
  • 一、从Gitee克隆项目代码
    • 1.注册gitee
    • 2.搜开源
    • 3.idea+git克隆项目代码
    • 4.vscode打开前端项目
    • 5.Navicat建数据库
  • 二、项目配置及运行
    • 1.数据库配置修改
    • 2.启动Redis服务
    • 3.后端项目运行
    • 4.前端项目运行
  • 总结


前言

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

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

第二篇主要是项目运行


一、从Gitee克隆项目代码

1.注册gitee

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

2.搜开源

导航栏 → 搜开源 → 搜 若依 / RuoYi-Vue → 克隆/下载 → 复制链接
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第1张图片

3.idea+git克隆项目代码

打开idea → 导航栏中的VCS → Git → clone(克隆)→ 点击下方克隆
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第2张图片
如出现报错,点击右方导航栏里的maven → 重新加载
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第3张图片
在这里建议大家安装这两个插件,一个是汉化(看个人英语水平),一个是Lombok(必备)
导航栏File(文件)→ setting → Plugins
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第4张图片

4.vscode打开前端项目

打开vscode → File(文件)→ 打开文件夹 →选择RuoYi-Vue目录下的ruoyi-ui
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第5张图片
vscode也需要安装扩展:
左边导航栏第5个图标即扩展 →搜 Vetur
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第6张图片

5.Navicat建数据库

打开navicat → 连接MySQL → 双击连接可以展开 → 右键连接 → 新建数据库ry-vue
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第7张图片
双击数据库ry-vue可以展开 → 右键ry-vue → 运行SQL文件 → RuoYi-Vue目录下sql文件夹 → 选择ry_xxx.sql → 点击开始
补充内容:quartz.sql文件操作同上
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第8张图片
右键连接刷新 → 双击ry-vue展开 → 表 (里面有表说明数据已经导入了)
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第9张图片


二、项目配置及运行

1.数据库配置修改

开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第10张图片

2.启动Redis服务

我的上一篇博客有启动流程~
文章:环境搭建-Redis
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第11张图片

3.后端项目运行

回到idea
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第12张图片

4.前端项目运行

回到vscode → 项目文件拉到最下面找到README.MD → 新建终端
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第13张图片
复制npm install --registry=https://registry.npmmirror.com命令到终端 → 回车
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第14张图片
等待安装完成后 → 复制npm run dev → 回车
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第15张图片
此时浏览器会自动打开页面 → 输入验证码登录系统即可
开源项目学习:若依RuoYi-Vue后台管理系统【项目运行】_第16张图片


总结

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

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

你可能感兴趣的:(开源项目学习,学习,vue.js,vscode)