【狂神说Java】手把手教你如何分析开源项目

最新推荐文章于 2024-05-12 14:03:42 发布

隔壁郑同学

最新推荐文章于 2024-05-12 14:03:42 发布

阅读量1.4k

点赞数 5

分类专栏：狂神说java系列文章标签： java 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44517301/article/details/121899174

版权

狂神说java系列专栏收录该内容

22 篇文章 16 订阅

订阅专栏

1.如何分析开源项目

学习的方式：

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

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

代码自动生成：我们平时会写很多业务代码，用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、等待所以的项目跑成功

在这里插入图片描述

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

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

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

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

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

在这里插入图片描述

打开Redis

在这里插入图片描述

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

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

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

在这里插入图片描述

跑起来

在这里插入图片描述

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

前端跑起来：（推荐VS Code打开文件夹）

在这里插入图片描述

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

在这里插入图片描述

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NbsImfPf-1639361030972)(C:\Users\zt\AppData\Roaming\Typora\typora-user-images\image-20211124171622785.png)]$

隔壁郑同学

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
【狂神说Java】手把手教你如何分析开源项目

1.如何分析开源项目学习的方式：不知道这个代码怎么来的这个代码跑不起来这个项目对我们有什么帮助，不会模块化分析任何一个开源项目，都可以让自己等到提升代码自动生成：我们平时会写很多业务代码，用Mybatis Plus去生成的，第三方的工具包去生成开源项目：eladmin项目简介一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分离的后台管理系统开发文档： https://el-admin
复制链接

扫一扫