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

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

相关文章

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

阿里开源语音识别SenseVoiceWindows环境部署

SenseVoice介绍 SenseVoice 专注于高精度多语言语音识别、情感辨识和音频事件检测多语言识别: 采用超过 40 万小时数据训练,支持超过 50 种语言,识别效果上优于 Whisper 模型。富文本识别:具备优秀的情感识别,能够在测试数据上达到和超过目前最佳情感识别模型的效果。支持声音事件检测能力,支持音乐、掌声、笑声、哭声、咳嗽、喷嚏等多种常见人机交互事件进行检测。高效推

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

金融业开源技术 术语

金融业开源技术  术语 1  范围 本文件界定了金融业开源技术的常用术语。 本文件适用于金融业中涉及开源技术的相关标准及规范性文件制定和信息沟通等活动。

安全管理体系化的智慧油站开源了。

AI视频监控平台简介 AI视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒,省去繁琐重复的适配流程,实现芯片、算法、应用的全流程组合,从而大大减少企业级应用约95%的开发成本。用户只需在界面上进行简单的操作,就可以实现全视频的接入及布控。摄像头管理模块用于多种终端设备、智能设备的接入及管理。平台支持包括摄像头等终端感知设备接入,为整个平台提

SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

查看原文>>>全流程SWAP农业模型数据制备、敏感性分析及气候变化影响实践技术应用 SWAP模型是由荷兰瓦赫宁根大学开发的先进农作物模型,它综合考虑了土壤-水分-大气以及植被间的相互作用;是一种描述作物生长过程的一种机理性作物生长模型。它不但运用Richard方程,使其能够精确的模拟土壤中水分的运动,而且耦合了WOFOST作物模型使作物的生长描述更为科学。 本文让更多的科研人员和农业工作者

MOLE 2.5 分析分子通道和孔隙

软件介绍 生物大分子通道和孔隙在生物学中发挥着重要作用,例如在分子识别和酶底物特异性方面。 我们介绍了一种名为 MOLE 2.5 的高级软件工具,该工具旨在分析分子通道和孔隙。 与其他可用软件工具的基准测试表明,MOLE 2.5 相比更快、更强大、功能更丰富。作为一项新功能,MOLE 2.5 可以估算已识别通道的物理化学性质。 软件下载 https://pan.quark.cn/s/57

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧