分析前后端开源项目(狂神说)

2024-03-27 18:58
文章标签 分析 项目 开源 狂神

本文主要是介绍分析前后端开源项目(狂神说),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

项目源码
后端源码前端源码
githubhttps://github.com/elunez/eladminhttps://github.com/elunez/eladmin-web
码云https://gitee.com/elunez/eladminhttps://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、等待所以的项目跑成功

img

img

在这里插入图片描述

​ 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
在这里插入图片描述

在这里插入图片描述

这篇关于分析前后端开源项目(狂神说)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/853072

相关文章

Nginx分布式部署流程分析

《Nginx分布式部署流程分析》文章介绍Nginx在分布式部署中的反向代理和负载均衡作用,用于分发请求、减轻服务器压力及解决session共享问题,涵盖配置方法、策略及Java项目应用,并提及分布式事... 目录分布式部署NginxJava中的代理代理分为正向代理和反向代理正向代理反向代理Nginx应用场景

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Redis中的有序集合zset从使用到原理分析

《Redis中的有序集合zset从使用到原理分析》Redis有序集合(zset)是字符串与分值的有序映射,通过跳跃表和哈希表结合实现高效有序性管理,适用于排行榜、延迟队列等场景,其时间复杂度低,内存占... 目录开篇:排行榜背后的秘密一、zset的基本使用1.1 常用命令1.2 Java客户端示例二、zse

Redis中的AOF原理及分析

《Redis中的AOF原理及分析》Redis的AOF通过记录所有写操作命令实现持久化,支持always/everysec/no三种同步策略,重写机制优化文件体积,与RDB结合可平衡数据安全与恢复效率... 目录开篇:从日记本到AOF一、AOF的基本执行流程1. 命令执行与记录2. AOF重写机制二、AOF的

idea+spring boot创建项目的搭建全过程

《idea+springboot创建项目的搭建全过程》SpringBoot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目,:本文主要介绍idea+springb... 目录一.idea四种搭建方式1.Javaidea命名规范2JavaWebTomcat的安装一.明确tomcat

pycharm跑python项目易出错的问题总结

《pycharm跑python项目易出错的问题总结》:本文主要介绍pycharm跑python项目易出错问题的相关资料,当你在PyCharm中运行Python程序时遇到报错,可以按照以下步骤进行排... 1. 一定不要在pycharm终端里面创建环境安装别人的项目子模块等,有可能出现的问题就是你不报错都安装

MyBatis Plus大数据量查询慢原因分析及解决

《MyBatisPlus大数据量查询慢原因分析及解决》大数据量查询慢常因全表扫描、分页不当、索引缺失、内存占用高及ORM开销,优化措施包括分页查询、流式读取、SQL优化、批处理、多数据源、结果集二次... 目录大数据量查询慢的常见原因优化方案高级方案配置调优监控与诊断总结大数据量查询慢的常见原因MyBAT

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

分析 Java Stream 的 peek使用实践与副作用处理方案

《分析JavaStream的peek使用实践与副作用处理方案》StreamAPI的peek操作是中间操作,用于观察元素但不终止流,其副作用风险包括线程安全、顺序混乱及性能问题,合理使用场景有限... 目录一、peek 操作的本质:有状态的中间操作二、副作用的定义与风险场景1. 并行流下的线程安全问题2. 顺

MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

《MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决》MyBatis默认开启一级缓存,同一事务中循环调用查询方法时会重复使用缓存数据,导致获取的序列主键值均为1,... 目录问题原因解决办法如果是存储过程总结问题myBATis有如下代码获取序列作为主键IdMappe