手把手分析开源项目

手把手分析开源项目

1.学习的方式

1. 不知道这个代码怎么来的
2. 这个代码跑不起来
3. 这个项目对我们有什么帮助，不会模块化分析

任何一个开源项目，都可以让自己得到提升！

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观察

下载完毕，然后解压，优先使用码云下载。

解压，先不要着急运行！！！

观察

1. 用来哪些技术（SpringBoot、Vue、Redis、MQ…）
2. 是否有数据库(MySQL)
3. 你的环境是否匹配（Java\Maven，npm，node.js、rdeis、MQ…）

通过了，然后再想办法运行！

4.跑起来是第一步

4.1步骤

1. 安装数据库，执行SQL
2. 前端需要跑起来
3. 后端项目导入跑起来
4. 启动后端项目！

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.如何找到一个好的开源项目

1. 找分类JAVA
2. 看收藏，开源项目，所有人都觉得不错的，那就是好的！
3. 看具有价值
4. 根据自身的理解情况去看，JAVA、SSM、pringBoot