1.如何分析開(kāi)源項(xiàng)目
學(xué)習(xí)的方式：
不知道這個(gè)代碼怎么來(lái)的；
1這個(gè)代碼跑不起來(lái)；
2這個(gè)項(xiàng)目對(duì)我們有什么幫助，不會(huì)模塊化分析；
3任何一個(gè)開(kāi)源項(xiàng)目，都可以讓自己得到提升。
代碼自動(dòng)生成：我們平時(shí)會(huì)寫(xiě)很多業(yè)務(wù)代碼，用Mybatis Plus去生成的，第三方的工具包去 生成。
開(kāi)源項(xiàng)目：eladmin
項(xiàng)目簡(jiǎn)介
一個(gè)基于Spring Boot 2.1.0、Spring Boot Jpa、JWT、Spring Security、Redis、Vue的前后端分離的后臺(tái)管理系統(tǒng)。
開(kāi)發(fā)文檔： https://el-admin.vip
體驗(yàn)地址： https://el-admin.xin
賬號(hào)密碼： admin / 123456
v項(xiàng)目源碼
觀察后端項(xiàng)目
前端：
2.開(kāi)源項(xiàng)目下載
在碼云下載，因?yàn)镚itHub下載太慢了，下載完畢進(jìn)行解壓。
后端：https://gitee.com/elunez/eladmin
前端：https://gitee.com/elunez/eladmin-web
解壓完不要著急運(yùn)行，先去觀察項(xiàng)目：
用了哪些技術(shù)（Springboot、Vue、Redis、MQ…）
是否有數(shù)據(jù)庫(kù)
你的環(huán)境是否匹配(Maven、(npm、node.js)、redis…)
當(dāng)需要的環(huán)境匹配了，再想辦法運(yùn)行。這里列出項(xiàng)目所需的環(huán)境與相關(guān)安裝教程，方便剛?cè)腴T(mén)的同學(xué)：
1、JDK：1.8+
安裝教程：https://www.runoob.com/java/java-environment-setup.html
2、Redis 3.0+
安裝教程：https://www.runoob.com/redis/redis-install.html
3、Maven 3.0+
安裝教程：https://www.runoob.com/maven/maven-setup.html
4、MYSQL 5.5.0+
安裝教程：https://www.runoob.com/mysql/mysql-install.html
5、Node v10+ (最好使用 12，高版本可能會(huì)有問(wèn)題)
安裝教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
注意：
前端安裝完 node 后，最好設(shè)置下淘寶的鏡像源，不建議使用 cnpm（可能會(huì)出現(xiàn)奇怪的問(wèn)題）
npm config set registry https://registry.npm.taobao.org
配置后可通過(guò)下面方式來(lái)驗(yàn)證是否成功
npm config get registry
在 ~/.npmrc 加入下面內(nèi)容，可以避免安裝 node-sass 失敗
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
.npmrc 文件位于
win：C:\Users\[你的賬戶名稱]\.npmrc
linux：直接使用 vi ~/.npmrc
開(kāi)發(fā)準(zhǔn)備
提示：在使用該系統(tǒng)前，還需要做如下準(zhǔn)備。
給 idea (opens new window)或者 eclipse (opens new window)安裝 lombok 插件，我們用它可以省略get，set 方法，可以使代碼更簡(jiǎn)潔。
了解MapStruct，項(xiàng)目用到了他映射實(shí)體，如果你不熟悉可以查看：熟悉MapStruct(opens new window)
你需要有 Spring boot 的基礎(chǔ)。
你還需要有 Vue (opens new window)的基礎(chǔ)。
注意：因?yàn)楸卷?xiàng)目是前后端分離的，所以需要前后端都啟動(dòng)好，才能進(jìn)行訪問(wèn)。
3.如何跑起來(lái)
安裝數(shù)據(jù)庫(kù)，執(zhí)行SQL（先創(chuàng)建數(shù)據(jù)庫(kù)，編碼默認(rèn)utf8）
前端跑起來(lái)（在文件上全選文件名然后cmd）
# 安裝依賴
npm install
# 啟動(dòng)服務(wù) localhost:8013
npm run dev
# 構(gòu)建生產(chǎn)環(huán)境
npm run build:prod
后端項(xiàng)目導(dǎo)入（打開(kāi)idea——import）
后端項(xiàng)目結(jié)構(gòu)（一般前后端分離項(xiàng)目，前端依賴于后端）
只要發(fā)現(xiàn)Swagger，就需要先進(jìn)入Swagger-ui頁(yè)面，因?yàn)榍昂蠖朔蛛x的接口全部都在這里；
打開(kāi)Redis
開(kāi)發(fā)環(huán)境重點(diǎn)需要去看端口號(hào)：server：port：8000（在總文件application.yml里面）前端也是調(diào)這個(gè)端口。
去看Redis的端口號(hào)
看開(kāi)發(fā)環(huán)境dev.yml的JDBC是否有問(wèn)題。
啟動(dòng)后端項(xiàng)目
進(jìn)入頁(yè)面：localhost:8000/swagger-ui.html
前端跑起來(lái)
# 啟動(dòng)服務(wù) localhost:8013
npm run dev
啟動(dòng)成功！用戶名和密碼：admin/123456
4.前后端分離項(xiàng)目的固定套路
從前端開(kāi)始分拆，打開(kāi)控制臺(tái)(VS-Code)，點(diǎn)一個(gè)接口，分析一波調(diào)用關(guān)系
前后端端口調(diào)用不一致：前端：8013 后端：8000；研究怎么操作。
封裝了接口請(qǐng)求 ajax(前后端分離) axios(Vue) request(前端封裝)
找到配置（生產(chǎn)配置、開(kāi)發(fā)環(huán)境配置）
前后端分離項(xiàng)目的重點(diǎn)：找到接口的調(diào)用關(guān)系。
Springboot提供服務(wù)、前端調(diào)用接口數(shù)據(jù)、Vue負(fù)責(zé)渲染頁(yè)面
前端項(xiàng)目固定模板：
每一個(gè)接口的后面都在后端有一個(gè)一一對(duì)應(yīng)的地址。
通過(guò)抓取前端的請(qǐng)求，找到后端對(duì)應(yīng)的接口。
在前端文件中，找對(duì)應(yīng)的接口文件：
在后端文件中，找對(duì)應(yīng)的接口文件：
怎么去跟后端對(duì)接？拿到接口的地址：
去后端找：
后端分析套路：Controller ——> Service ——> Dao文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-454592.html
從前到后知道怎么分析了，但是如何渲染到視圖上的呢？
看前端：搜索一個(gè)接口，查看其地址在哪里調(diào)用了。
Vue標(biāo)準(zhǔn)套路：
template：視圖層
script：js操作，接口的調(diào)用
style：頁(yè)面的樣式
當(dāng)我們要學(xué)習(xí)一個(gè)模塊，將這個(gè)模塊獨(dú)立抽取出來(lái)即可，即刪除對(duì)應(yīng)的模塊，自行修復(fù)刪除部分。
例如：學(xué)習(xí)用戶模塊，除了了user模塊，還需要?jiǎng)h除對(duì)應(yīng)的接口文件：
如果你想測(cè)試這個(gè)接口成不成功，在Swagger UI里測(cè)一下，是否可以將它查出來(lái)。
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-454592.html
到了這里，關(guān)于如何分析一個(gè)前后端分離的項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
