本文主要是介绍分析前后端开源项目(狂神说),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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
这篇关于分析前后端开源项目(狂神说)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!