开源项目分析(上)

前后端分离项目的固定套路

从前端开始

1、打开控制台,点一个接口,分析一波调用关系
2、前后端端口调用不一致8013、8000

  • 封装了接口请求 ajax,Vue通常是axios
  • 我们Vue的axios也有固定套路,就是用request去封装
  • 找到.env.development.env.production
    在这里插入图片描述
    在这里插入图片描述
    前后端分离项目的重点:找到接口的调用关系
    固定套路:SpringBoot提供服务,前端调用接口数据,Vue负责渲染页面
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    我们需要知道哪个模块是管理什么的

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
如果在后端找不到对应的接口也没关系,我们去页面里面抓包
在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
接下来去后端找对应的url
在这里插入图片描述

双击shift进行全局搜索在这里插入图片描述

现在进行后端分析

固定套路:
从我们刚刚搜到的

  • Controller层
  • 想看业务如何实现?那就去↓
  • Service层
  • 想看底层如何实现?那就去↓
  • Dao层(有人也会叫Mapper、edit之类的)

在这里插入图片描述

到这里,我们随便请求一个东西,它一定有对应的地址了,而且我们也可以找到了

现在进行前端分析

页面是如何渲染的呢?
搜索一个接口,看它的地址在哪里被调用了
IDEA的朋友需要先双击shift然后切换到Class页再ctrl+shift+F

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
Vue的标准套路

<template>
//视图层
</template>
<script>
//js操作,接口的调用
export default {

}
</script>
<style>
//页面样式
</style>

启动总结

1.开启Redis
2.IDEA连接数据库
3.启动后端(我这文件是AppRun)
4.查看8000 swagger的API说明(可选)
5.启动前端(内控制台执行npm run dev

如何找到一个好的开源项目

1.找分类JAVA

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
就能找到好的开源项目啦

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐