0


【若依框架前后分离版】一文教你如何学习开源框架

笔记整理自 【开源项目学习】若依前后端分离版,通俗易懂,快速上手 , 这里用到的是若依的前后端分离版

什么是若依?

开源项目,学习开源项目的目标:

  1. 用,减少自己的工作量
  2. 学习优秀开源项目底层的编程思想,设计思路,提高 自己的编程能力

基础:Spring Boot + Vue

官网:http://www.ruoyi.vip/

有关项目的具体细节,大家可以去官网查看

image-20220108210119284

下载

下载:https://gitee.com/y_project/RuoYi-Vue

image-20220108205914474

复制其gitee地址:git@gitee.com:y_project/RuoYi-Vue.git

使用idea直接克隆这个项目

img

img

下载成功后里面的项目目录如下

image-20220108211004549

可能有些依赖没有导入,可以通过点击Maven中的刷新导入依赖

image-20220108211100671

我的poml文件这个地方仍然报错,我直接注释掉后也是可以正常运行的

image-20220108211351660

环境要求:

  1. JDK 1.8+
  2. MySQL
  3. Redis
  4. Maven
  5. Vue

配置数据库

使用navicat

新建一个数据库 ruoyi-vue

image-20220108210536922

运行数据库sql

image-20220108210630909

image-20220108210708310

ruoyi项目的sql放在了项目下sql的文件夹下

image-20220108210822647

在工程中配置数据库

在ruoyi-admin的application-druid.yml中配置

image-20220108211426898

image-20220108211449501

更改成你的数据库的密码

Redis 配置

在application.yml中配置

image-20220108211555274

image-20220108211610998

然后到ruoyi-admin下的RuoyiApplication启动项目

image-20220108214029328

启动成功后

image-20220108214000640

启动前端

前端项目也是放在了若依项目中的ruoyi-ui中了

可以使用vscode打开这个文件夹(也可以使用idea)

image-20220108211807412

  1. 安装依赖 npm installimage-20220108211944485
  2. 启动 npm run dev

如果正常的话,应该就可以在浏览器中看到对应的页面了

image-20220108212137654

这里的密码一般写在项目的md文档中了

image-20220108212714061

项目目录结构

后端

其实我们基本只需要关注ruoyi-admin

image-20220108213013686

业务层逻辑基本都在这里

image-20220108213055948

前端

项目目录,我们基本上只需要关注src文件夹里面的内容就可以了

image-20220108214235351

image-20220108214209888

api : 具体请求的接口都放在这里

views:页面

router:路由

assests:静态文件,图片等

utils:一些工具

我们基本上关注views页面的内容跟api就可以了

自己如何分析项目

若依的业务模块比较多,我们没必要全部都看一边,可以挑一些自己感兴趣的业务流程跑一下,学习其代码。接下来我以生产验证码这个业务来介绍如何分析。

获取前端功能对应的后端请求url

1、找到对应的页面,验证码在登录页面,所以去login页面找

image-20220108214625688

如果不知道功能在哪个页面的,可以通过分析浏览器的的url地址得知

image-20220108214739952

然后可以看到它用到的是api中的login.js文件

image-20220108214913088

image-20220108214948038

image-20220108214959088

至此,我们就可以得到了获取验证码对应的后端请求url

除此之外我们也可以通过浏览器的调试模式找出

1、在浏览器中按下f12

2、重刷一下页面

image-20220108215421817

查看后端接口

通过前端我们可以得知这个url对应的后端接口方法名应该叫captchaImage

但怎么找到这个方法在哪个地方呢? 我们可以利用idea的搜索功能

image-20220108220129306

image-20220108220233370

点击进去就可以看到对应的接口了,然后就可以具体去看其代码是如何实现的了

image-20220108220250244

debug调试

为了更好的理解代码的执行逻辑,我们可以debug的方式来调试

在你需要研究的代码旁打上断点

image-20220108220514829
点击debug运行

image-20220108220603841

这时候需要再刷新一下浏览器,让其发送新的请求

然后代码就会执行到断点处停止

标签: java spring boot vue

本文转载自: https://blog.csdn.net/weixin_65349299/article/details/122387446
版权归原作者 一定会去到彩虹海的麦当 所有, 如有侵权,请联系我们删除。

“【若依框架前后分离版】一文教你如何学习开源框架”的评论:

还没有评论