分析前后端开源项目（狂神说）

B站狂神说：https://space.bilibili.com/95256449

1.如何分析开源项目

学习的方式：

​ 1. 不知道这个代码怎么来的

​ 2. 这个代码跑不起来

​ 3. 这个项目对我们有什么帮助，不会模块化分析

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

代码自动生成：我们平时会写很多业务代码，用Mybatis Plus去生成的，第三方的工具包去生成
开源项目：eladmin

项目简介

一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分离的后台管理系统

开发文档： https://el-admin.vip
体验地址： https://el-admin.xin
账号密码： admin / 123456

项目源码

	后端源码	前端源码
github	https://github.com/elunez/eladmin	https://github.com/elunez/eladmin-web
码云	https://gitee.com/elunez/eladmin	https://gitee.com/elunez/eladmin-web

2.观察开源项目

后端：

前端：

3.开源项目下载

在码云下载，因为GitHub下载太慢了，下载完毕进行解压
解压完不要着急运行

先去观察项目：

• ​ 1、用了哪些技术（Springboot、Vue、Redis、MQ…）
• ​ 2、是否有数据库
• ​ 3、你的环境是否匹配(Maven、(npm、node.js)、redis…)
  ​ 需要的环境匹配了再想办法运行

4.跑起来是第一步

​ 1、安装数据库，执行SQL（先创建数据库，编码默认utf8）

​ 2、前端跑起来（在文件上全选文件名然后cmd）

​ 3、后端项目导入跑起来（打开idea——import）

​ 4、等待所以的项目跑成功

​ 5、启动后端项目（一般前后端分离项目，前端依赖于后端）

​ 只要发现Swagger，就需要先把swagger跑起来，因为前后端分离的接口全部都在这里

进而查看配置文件，默认端口号，有哪些配置，需要改为自己的项目和环境地址！

（尤其是端口号和用户名密码）

​ 前端：就是安装依赖。启动测试运行，看接口是否异常

打开Redis（用到了）

开发环境重点需要去看端口号：server：port：8000（在总文件application.yml里面）前端也是调这个端口

第二个点需要去看Redis的端口号

开发环境dev.yml的JDBC没有问题

跑起来

进入页面：localhost://8000/swagger-ui.html

前端跑起来：（推荐VS Code打开文件夹）我们用的是WebStorm

5.前后端分离项目固定套路

1、从前端开始分拆，打开控制台，点一个接口，分析一波调用关系

2、前后端端口调用不一致：前端：8013 后端：8000；研究怎么操作的

• 封装了接口请求 ajax(前后端分离) axios(Vue) request(前端封装)
• 找到配置（生产配置、开发环境配置）

• 前后端分离项目的重点：找到接口的调用关系
• Springboot提供服务、前端调用接口数据、Vue负责渲染页面

• 前端项目固定套路

通过抓取前端的请求，找到后端对应的接口

怎么去跟后端对接：

拿到接口的地址：

去后端找：

• 后端分析套路：Controller–Service–Dao
• 现在从前到后知道怎么分析了，但是如何渲染到视图上的呢？看前端

• Vue标准套路

template：视图层
script：js操作，接口的调用
style：页面的样式

• 如果你现在自己的项目或者要学习一个模块，将这个模块独立抽取出来即可，删除法
• 比如需要学习用户模块，除了了user模块

如果你想测试这个接口成不成功，在这里测一下，能不能把他查出来就行了

6.如何找到一个开源项目

• layui
• Semantic UI
• Grabient
• Vue Element Admin

1、找分类（Java、python）
2、看收藏（star），大家都觉得不错的，就是比较好的，有学习的价值
3、看具有价值
4、根据自身的理解情况：Java、SSM、Springboot…阶段性成果、
5、如何学习Java：Java进阶路线七个阶段

后端开发去写前端非常难看，可以使用第三方的：Ant Design Pro 或 Element