1.如何分析开源项目
遇到的问题：
- 不知道这个代码怎么来的，读不懂代码
- 这个代码跑不起来
- 不知道这个项目对我们有什么帮助，不会模块化分析
注意：任何一个开源项目，都可以让自己等到提升！
代码自动生成：我们平时会写很多业务代码，可以用 Mybatis Plus 去生成，第三方的工具包去生成
这里以开源项目 EL-ADMIN 为例
1.1 项目简介
一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue 的前后端分离的后台管理系统
开发文档： https://el-admin.vip
体验地址： https://el-admin.xin
账号密码： admin / 123456
1.2 项目源码
| 后端源码 | 前端源码 | |
|---|---|---|
| 码云 | https://gitee.com/elunez/eladmin | https://gitee.com/elunez/eladmin-web |
| github | https://github.com/elunez/eladmin | https://github.com/elunez/eladmin-web |
2.观察开源项目
1.后端：
2.前端：
都是固定的套路：
3.开源项目下载
在码云下载，因为 GitHub 下载太慢了，下载完毕进行解压
注意：解压完不要着急运行！
先去观察项目：
1、使用了哪些技术（Springboot、Vue、Redis、MQ …）
2、是否有数据库文件（是哪个版本：Mysql、Oracle）
3、你的环境是否匹配(Maven、node.js、redis …)
项目需要的环境都匹配了之后，再想办法运行！
4.跑起来是第一步
1、安装数据库，执行 SQL（先自己创建数据库，编码默认 utf8）——> sql 文件只有建表的语句，没有建库的语句
复制 sql 文件的代码到查询命令行中运行！
在 navicat 中先全选所有代码，再运行
我们发现成功导入了所有数据库：
2、把前端依赖下载下来（在文件上全选文件名然后 cmd）
npm install 安装前端需要的依赖（一般情况下这个依赖都是不自带的，需要我们自行安装）
前端：就是安装依赖，启动测试运行，看接口是否异常！其他的就不需要做什么了！
3、后端项目导入 idea（打开 idea——open/import）
或者直接右击文件夹用 idea 打开
保证所有的依赖都已经导入了：
4、为启动后端项目做准备（一般前后端分离项目，前端依赖于后端，所以只需要启动后端即可）
（1）一般按照如下顺序分析后端项目，以为启动做准备
（2）只要发现 Swagger 的配置类，就需要先把 swagger 跑起来，因为前后端分离的接口全部都在这里！(后面跑起来项目了我们先进 swagger)
（3）我们在工具类中看到了 Redis 相关的，我们需要本地打开 Redis 服务：
（4）接下来我们查看 system 包下的核心配置文件：application.yml
查看默认端口号，以及有哪些配置，需要改为自己的项目和环境地址！（尤其是端口号和用户名密码）
- 首先需要去看端口号：server：port：8000（在总文件 application.yml 里面）前端一定也是调这个端口
- 其次需要去看 Redis 的端口号
开发环境 dev.yml 的 JDBC 必须保证没有问题
5、将后端项目跑起来
我们发现当前激活的版本为 dev 开发版本：
6、进入 swagger 页面：localhost:8000/swagger-ui.html
坑：但是我们发现这个项目访问 swagger-ui.html 不行
需要访问：localhost:8000/doc.html
我们访问 localhost:8000，显示服务开启成功！
7、把前端跑起来：（推荐使用 VS Code 打开文件夹）
8、访问localhost:8013/
至此，整个项目运行完毕！
5.前后端分离项目固定套路
1、从前端开始分拆，打开控制台，点击一个接口，分析一波调用关系
2、前后端端口调用不一致：前端：8013 后端：8000，研究一下是怎么操作的？
- 封装了接口请求 ajax(前后端分离) axios(Vue) request(前端封装) ——> 固定套路
- 找到配置（生产配置、开发环境配置）
前后端分离项目的重点：找到接口的调用关系
Springboot 提供服务、前端调用接口数据、Vue 负责渲染页面 ——> 前端项目固定套路
前端项目固定结构：
一个典型接口调用的例子：登陆的方法
我们发现登陆的文件 login.js 里面引入了 request.js 这个文件，我们又发现 request.js 这个文件里面封装了 axios 并且写了
后端接口 url ——> 这样我们就可以在 login.js 里面直接使用 axios 调用后端接口实现交互了！
api 前后端交互的套路：
- 我们怎么知道页面上的逻辑对应的是什么样的请求？怎么找到前端对应请求的代码？
通过抓取前端的请求，找到后端对应的接口
然后我们去/api/system/下面看一下，发现了 user.js 里面果然调用了对应的接口！
或者我们直接在 vscode 的搜索功能里面进行一个查找：非常方便！
- 那么我们怎么找到前端请求的那个接口在后端代码里面的位置呢？——> 肯定不能一个一个找，太慢太麻烦了！
我们使用 restfultool 插件进行查找！
- 我们找到了后端的接口，然后进行后端分析
后端分析套路：Controller–>Service–>Dao
一层一层点源码即可！
注：如果我们不想去后端看代码，也可以直接在 swagger 里面进行查看，并测试接口！——> 更方便
如果你想测试一个接口成不成功，在 swagger 里测一下，能不能把他查出来就行了
- 现在从前到后知道怎么分析了，但是是如何渲染到视图上的呢？看前端 vue 页面（即.vue 文件，template 模板）
Vue 标准套路：
<template>视图层</template>
<script>
js操作，接口的调用
export default{
}
</script>
<style>
页面的样式
</style>我们如何应用别人的项目到自己的里面？
如果你现在自己的项目或者要学习别人的一个模块，将这个模块独立抽取出来即可 ——> 使用删除法！
比如我们现在需要使用别人项目的用户模块，把除了 user 相关的全都删除掉即可！
6.如何找到一个开源项目
前端组件：
layui
Semantic UI
Grabient
后端开发去写前端页面非常难看，可以使用第三方的后台页面：Ant Design Pro 或 Vue-Element-Admin 都非常好
1、找分类（Java、python）
2、看收藏（star），大家都觉得不错的，就是比较好的，有学习的价值！
3、看具有价值的
4、根据自身的理解情况去查找项目：Java、SSM、Springboot...阶段性成果
5、如何学习 Java：Java 进阶路线七个阶段
以码云为例
各种开源项目：
最多收藏的：