手把手分析开源项目
1.学习的方式
- 不知道这个代码怎么来的
- 这个代码跑不起来
- 这个项目对我们有什么帮助,不会模块化分析
任何一个开源项目,都可以让自己得到提升!
2.观察开源项目
el-admin
文档介绍:https://el-admin.vip/guide/
预览地址:https://el-admin.xin
账号密码:admin / 123456
3.开源项目下载
3.1下载地址
后端:https://gitee.com/elunez/eladmin
前端:https://gitee.com/elunez/eladmin-web
3.2观察
下载完毕,然后解压,优先使用码云下载。
解压,先不要着急运行!!!
观察
- 用来哪些技术(SpringBoot、Vue、Redis、MQ…)
- 是否有数据库(MySQL)
- 你的环境是否匹配(Java\Maven,npm,node.js、rdeis、MQ…)
通过了,然后再想办法运行!
4.跑起来是第一步
4.1步骤
- 安装数据库,执行SQL
- 前端需要跑起来
- 后端项目导入跑起来
- 启动后端项目!
4.2后端目录结构
-
common公共类
-
generator发电机
-
logging日志输出
-
system系统核心
-
tools工具包
-
package.json依赖包
4.3前端目录结构
- api核心接口:调用后端的
- components组件
- layout布局
- router路由
- store本地存储
- utils公户
- views视图层
只要发现了Swagger,那么跑起来的第一步就是先进入Swagger-ui页面!因为这里面都是接口!进而查看配置文件!默认端口,有哪些配置,需要改为自己的项目和环境地址!
前端就是安装依赖,启动测试运行,看接口是否正常
地址:http://localhost:8000/swagger-ui.html
5.前后端分离项目固定套路
1.从前端开始分析,打开控制台,点一个接口,分析一波调用关系!
2.前后端端口调用不一致~ 8013-8000,怎么操作的
- 封装了接口请求 ajax、axios request
- 找到配置(.env.production)
- 前后端分离项目的重点:找到接口的调用关系
- SpringBoot提供服务!前端调用接口!Vue负责渲染页面!
- 前端项目固定套路
- 通过抓取前端的请求,找到后端对应接口
- 后端分析
- Controller-Service-Dao:你就能看懂了
- 现在从前到后就可以分析了,但是如何渲染到视图上呢?看前端
- vue标准套路
- 如果你现在自己的项目或者你要学学习一个模块,将这个模块独立抽取出来即可!删除法
6.如何找到一个好的开源项目
- 找分类JAVA
- 看收藏,开源项目,所有人都觉得不错的,那就是好的!
- 看具有价值
- 根据自身的理解情况去看,JAVA、SSM、pringBoot