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、等待所以的項目跑成功

6、啟動后端項目（一般前后端分離項目，前端依賴于后端）

只要發現Swagger，就需要先把swagger跑起來，因為前后端分離的接口全部都在這里

進而查看配置文件，默認端口號，有哪些配置，需要改為自己的項目和環境地址！

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

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

打開Redis

開發環境重點需要去看端口號：server：port：8000（在總文件application.yml里面）前端也是調這個端口

第二個點需要去看Redis的端口號

開發環境dev.yml的JDBC沒有問題

跑起來

進入頁面：localhost://8000/swagger-ui.html

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

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