文章目錄

• • 1.如何分析開源項(xiàng)目
  • • • 項(xiàng)目簡介
      • 項(xiàng)目源碼
  • 2.觀察開源項(xiàng)目
  • 3.開源項(xiàng)目下載
  • 4.跑起來是第一步
  • 5.前后端分離項(xiàng)目固定套路
  • 6.如何找到一個(gè)開源項(xiàng)目

1.如何分析開源項(xiàng)目

學(xué)習(xí)的方式：

不知道這個(gè)代碼怎么來的

這個(gè)代碼跑不起來

這個(gè)項(xiàng)目對我們有什么幫助，不會模塊化分析

任何一個(gè)開源項(xiàng)目，都可以讓自己等到提升

代碼自動生成：我們平時(shí)會寫很多業(yè)務(wù)代碼，用Mybatis Plus去生成的，第三方的工具包去生成

開源項(xiàng)目：eladmin

項(xiàng)目簡介

一個(gè)基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分離的后臺管理系統(tǒng)

開發(fā)文檔： https://el-admin.vip

體驗(yàn)地址： https://el-admin.xin

賬號密碼： admin / 123456

項(xiàng)目源碼

后端源碼前端源碼

github	https://github.com/elunez/eladmin	https://github.com/elunez/eladmin-web
碼云	https://gitee.com/elunez/eladmin	https://gitee.com/elunez/eladmin-web

2.觀察開源項(xiàng)目

后端：

前端：

3.開源項(xiàng)目下載

在碼云下載，因?yàn)镚itHub下載太慢了，下載完畢進(jìn)行解壓

解壓完不要著急運(yùn)行

先去觀察項(xiàng)目：

1、用了哪些技術(shù)（Springboot、Vue、Redis、MQ…）

2、是否有數(shù)據(jù)庫

3、你的環(huán)境是否匹配(Maven、(npm、node.js)、redis…)

需要的環(huán)境匹配了再想辦法運(yùn)行

4.跑起來是第一步

1、安裝數(shù)據(jù)庫，執(zhí)行SQL（先創(chuàng)建數(shù)據(jù)庫，編碼默認(rèn)utf8）

2、前端跑起來（在文件上全選文件名然后cmd）

3、后端項(xiàng)目導(dǎo)入跑起來（打開idea——import）

4、等待所以的項(xiàng)目跑成功

6、啟動后端項(xiàng)目（一般前后端分離項(xiàng)目，前端依賴于后端）

只要發(fā)現(xiàn)Swagger，就需要先把swagger跑起來，因?yàn)榍昂蠖朔蛛x的接口全部都在這里

進(jìn)而查看配置文件，默認(rèn)端口號，有哪些配置，需要改為自己的項(xiàng)目和環(huán)境地址！

（尤其是端口號和用戶名密碼）

前端：就是安裝依賴。啟動測試運(yùn)行，看接口是否異常

打開Redis

開發(fā)環(huán)境重點(diǎn)需要去看端口號：server：port：8000（在總文件application.yml里面）前端也是調(diào)這個(gè)端口

第二個(gè)點(diǎn)需要去看Redis的端口號

開發(fā)環(huán)境dev.yml的JDBC沒有問題

跑起來

進(jìn)入頁面：localhost://8000/swagger-ui.html

前端跑起來：（推薦VS Code打開文件夾）

5.前后端分離項(xiàng)目固定套路

1、從前端開始分拆，打開控制臺，點(diǎn)一個(gè)接口，分析一波調(diào)用關(guān)系

2、前后端端口調(diào)用不一致：前端：8013 后端：8000；研究怎么操作的

• 封裝了接口請求 ajax(前后端分離) axios(Vue) request(前端封裝)

• 找到配置（生產(chǎn)配置、開發(fā)環(huán)境配置）

• 前后端分離項(xiàng)目的重點(diǎn)：找到接口的調(diào)用關(guān)系

• Springboot提供服務(wù)、前端調(diào)用接口數(shù)據(jù)、Vue負(fù)責(zé)渲染頁面

• 前端項(xiàng)目固定套路

• 通過抓取前端的請求，找到后端對應(yīng)的接口

怎么去跟后端對接：

拿到接口的地址：

去后端找：

• 后端分析套路：Controller–Service–Dao

• 現(xiàn)在從前到后知道怎么分析了，但是如何渲染到視圖上的呢？看前端
  -

• Vue標(biāo)準(zhǔn)套路

template：視圖層

script：js操作，接口的調(diào)用

style：頁面的樣式

• 如果你現(xiàn)在自己的項(xiàng)目或者要學(xué)習(xí)一個(gè)模塊，將這個(gè)模塊獨(dú)立抽取出來即可，刪除法
• 比如需要學(xué)習(xí)用戶模塊，除了了user模塊
  

如果你想測試這個(gè)接口成不成功，在這里測一下，能不能把他查出來就行了

6.如何找到一個(gè)開源項(xiàng)目

layui

Semantic UI

Grabient

Vue Element Admin

1、找分類（Java、python）

2、看收藏（star），大家都覺得不錯(cuò)的，就是比較好的，有學(xué)習(xí)的價(jià)值

3、看具有價(jià)值

4、根據(jù)自身的理解情況：Java、SSM、Springboot…階段性成果、

5、如何學(xué)習(xí)Java：Java進(jìn)階路線七個(gè)階段

后端開發(fā)去寫前端非常難看，可以使用第三方的：Ant Design Pro 或 Element

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的【狂神说】分析前后端分离开源项目?的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。