文章目录
-
- 1.观察开源项目
- 2.下载开源项目
- 3.跑起来是第一步
-
-
- 数据库
- 安装前端依赖
- IDEA导入后端项目
- 查看后端运行情况
- 查看前端运行情况
-
- 4.前后端分离项目的分析套路
-
-
- 从前端开始分析
- 渲染视图
-
- 5.如何找到一个好的开源项目
1.观察开源项目
以 el-admin 为例
帮助文档：https://el-admin.vip/guide/
查看演示效果：https://el-admin.xin
查看后端源码：https://gitee.com/elunez/eladmin
查看前端源码：https://gitee.com/elunez/eladmin-web
可以看到，这是一个maven项目，作者还提供了sql，这很重要，帮助我们快速构建数据库
通过分析模块名称，大致了解每个模块的作用，找出重点模块，
后端结构：
基本上所有的前端独立项目也都遵循一定的套路结构
前端结构：
2.下载开源项目
下载前、后端源码到本地，码云下载速度能快一些，
先思考几个问题：
- 使用了哪些技术（springboot vue redis等等）
- 是否有数据库（mysql oracle）
- 本地环境是否匹配（java maven npm nodejs redis）
确保以上几点没问题，在尝试运行项目
查看码云上的项目说明：
后端简介：
- 项目基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue的前后端分离的后台管理系统，有问题可以在 Github 上面提 Issues，或者加群反馈！！
前端简介：
- eladmin前端源码，项目基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 Spring Security、Redis、Vue的前后端分离后台管理系统， 权限控制采用 RBAC，菜单动态路由，Bug 反馈移步Github
3.跑起来是第一步
将项目解压缩，放在合适的目录下
数据库
运行数据脚本，创建数据表
注意：先看一下有没有建库语句，发现没有，所以我们自己创建一个数据库 el-admin
安装前端依赖
解压前端项目，发现没有依赖，因此我们需要添加前端依赖
具体操作：
- 确保电脑中安装node.js
如何分析一个开源项目 - 通过cmd命令行，进入到前端项目的根目录内，执行
npm install
npm config get registry
npm config set registry https://registry.npm.taobao.org
再执行下载速度就会快很多
IDEA导入后端项目
idea打开项目，第一加载时间较长，需要下载依赖
加载完毕之后，检测项目结构是否完整，依赖是否真是下载
先不要着急启动项目，做好分析，
建议先分析common模块，因为common通常包含了整个项目公共的，最重要的部分
其次是system，一般包含了系统的核心业务，
tools一般包含了工具类，比如，
common
在config包发现以下配置类，说明使用了redis，swagger等等，
一旦发现了swagger，运行项目之后第一步就是要进入swagger页面，因为接口都在这里显示
稍后还需要启动redis
system
可以看到有三个application配置文件，公共的放在总的配置里，开发和生产不同配置分别放置
打开配置配置文件，发现端口号为8000，说明前端项目必须要调用8000的端口号。
还有redis的配置，数据库连接配置，也需要与本地匹配
了解差不多之后，开始调整配置参数，启动本地redis，启动项目运行 AppRun
启动成功可以看到
查看后端运行情况
项目启动成功后，首先查看swagger的页面：
像这样的级别的项目完全可以作为一个脚手架，改造成小网站使用，需要注意查看项目的开源许可，是否允许商用，避免侵权
查看前端运行情况
启动前端项目，
可以用cmd命令行，进入到前端项目的根目录，也就是下载npm所在的目录，执行
npm run dev
也可以通过IDE打开，比如我们选择Hbuilder打开项目路，右键使用外部命令，启动项目
启动成功，访问测试，控制台以给出访问地址
查看浏览器控制台，如果没有爆红，说明浏览器前端请求访问没有问题
登录前端后台页面，点击页面各个菜单图标等功能是否可以正常使用，如果没问题，说明项目启动并运行成功
4.前后端分离项目的分析套路
从前端开始分析
打开控制台，点击一个接口，分析一波调用关系
比如，登录，退出，查看控制台的请求信息，我们发现页面调用端口现在是8013，而后端对外端口是8000，如何做到的
- 封装了接口请求，一般都是把 ajax axios 进行封装，一般axios封装成 request
- 因此前端项目一定有工具类，负责将请求进行封装
-
在项目中找到开发和生产的配置
*
如何分析一个开源项目 - 在开发配置中，可以看到，这里的访问对应了后端的地址
如何分析一个开源项目 - 前后端分离项目的重点就是，找到接口的调用关系。页面访问前端工程端口，前端通过配置将请求转向访问后端工程端口
- springboot提供服务，前端调用接口，vue负责渲染页面
前端项目中一定会有这些固定的组成，
进入 api 接口目录，比查看 login.js登录接口，发现了request，这说明页面发起的请求，在这里被封装成了request请求，发给了后端
具体是如何封装的，我们打开utils目录下request.js文件，可以看到里面封装了axios，并且连接配置环境
api 目录的下的接口包括了页面发送来的所有请求，在这里全部通过request封装，发向后台，这里每个接口内的url就指向了后端的访问接口
用这里的请求地址，到后端项目中找到对应接口，比如全局搜索 logout
再比如，我们点击角色菜单，查看控制台请求，看到了 api/users 接口，看到所有接口一律到api接口目录中找到 user.js
这里的每个接口对应接收页面发来的请求，包括restful风格请求，同时这里的请求又被request封装，指向了后端的controller接口
后端可以通过全局搜索遭到接口，找到后端接口，便可以以此查看对应的业务源码
Controller–Service–Dao ： 就能看懂了
现在从前到后就可以分析了！但是如何渲染的视图上呢？看前端
渲染视图
浏览器查看发送了什么请求，然后到api接口目录中找到对应请求地址的接口，
在前端工程搜索，哪里使用了这个url，比如
最终找到了这个请求url是在哪个视图中，可以看到，当前页面是一个标准的vue模板
vue标准套路
<template>
</template>
<script>
export default{
}
</script>
<style>
页面的样式
</style>
如果你现在自己的项目或者你要学习一个模块，将这个模块独立抽取出来即可！删除法
也可以通过swagger查看接口情况，测试是否可以测试成功
5.如何找到一个好的开源项目
1、找分类
2、看收藏，开源项目，所有人都觉得好的，那就是好的！
3、看具有价值
4、根据自身的理解情况看，
比如，上码云首页，可以看到官方推荐的开源项目
或者搜素词条，Java 排序规则，可以选最多 stars
内化为自己的才是最重要的！