一、前言

主要是前一段時間有小伙伴問我說自己剛入坑學后端不久，在開源網站上找了個簡單的前后端分離項目，但是自己不會跑起來，讓我給他說說，介于這玩意三兩句話不是很好說清楚，而且不清楚那個小伙伴的知識到何種地步，可能是大學生想找個項目應付一下期末考試吧。畢竟筆者以前也干過這種事，找個開源項目當課程設計啥的~

所以抽空簡單對這方面的分析方法以及必須具備的一個基礎知識點簡單說一下。。。

二、必備基礎知識點

這里主要以前后端分離技術棧為Java和Vue為例。至于有的兄弟學Go，Pyhton和react啥的我就不說了，老鐵我也是個菜鳥，沒那么豐富的學識。下面是一些必備基礎點說明：

基礎點	版本	說明
jdk	8+	java開發工具及運行環境，不多解釋。現在一般開源可能大多數都是8或者17及以上了，這個根據自己已安裝的環境來找對應開源項目就行了。
maven	3.6.1	java依賴管理工具。適配tomcat9就差不多了。
nodejs	盡量最新	js運行基礎環境，也不多解釋了。
npm	盡量最新	前端的包管理工具
數據庫		類似于mysql、redis啥的，多少得知道點。
git		拉取開源項目的，如果不會也行。

大致就這么點，如果你是學后端的那么jdk和maven這個是必不可少的。除此以外數據庫也很重要，但是如果你只是應付課程設計找個項目運行，那只要會導入數據庫腳本就ok了。如果實在不會，或者前端Vue的一些環境不會配置下載啥的，可以找我以前的博客，后者去搜?菜鳥教程 (runoob.com)了解，都比較詳細。另外最好會點Docker，因為可以偷懶創建項目必要的數據庫、中間件環境啥的~但是不強求，這里就不多扯了。

三、拉取開源項目

這里可以通過git去gitee或者github上拉取，如果不會就直接下載zip安裝包即可。這里我們以gitee為例。這里找到一個開源的商城系統，然后將他下載下來。直接點擊“克隆下載”：

如果已有git環境可以復制地址后直接克隆項目：

沒有 git就直接下載zip解壓到本地即可。

四、分析項目結構構建本地環境

一般來說，稍微專業點的項目都會有一個項目結構說明，或者運行說明。比如這個項目上的：

?

這類都會有一些簡單的技術棧介紹或者運行說明。當然大多數也可能沒有，當然只要你沒踩著有坑的項目就沒啥問題，一般有坑的就是，他的項目壓根運行不了或者有各種bug，或者有項目沒有數據庫(sql)文件的，這種就不用看了，下載下來也沒用。?所以建議選一些star較高的項目。

（1）前端模塊分析

一般到手后可以先分析前端的，因為流程比較簡單。

像我剛拉取的這個項目他前端主要用的是Vue3建立的一個vite項目，且有運行說明，照著他說的注釋掉package.json上的pnpm相關代碼，用我們已有的npm包管理工具即可去安裝項目依賴，運行前端項目了。

一般來說，如果是沒有項目運行說明的Vue項目的話，我們可以先看一下前端文件夾下的package.json文件，它相當于前端的依賴配置文件，好比SpringBoot中的pom文件。它定義了這個項目所需要的各個模塊信息和版本，以及整個項目的配置信息，例如項目的名稱，版本，描述等等信息。

這里主要關心的是它上面定義的運行方式及依賴信息，運行上可以研究scripts上這一段，這些腳本是命令行應用程序。 可以通過調用?npm run XXXX?或?yarn XXXX?來運行它們，其中?XXXX?是命令的名稱。 例如：npm run dev。

一般如果是使用vue-cli創建的項目，那么默認是npm run serve。這里這個項目它定義了一個dev的命令，所以他可通過npm run dev運行。所以我們一般進入到這個前端文件根目錄終端后，運行npm install 命令去安裝項目依賴，一般順利的話就會在在根目錄生成一個node_modules文件：

這個就是依賴的主要存放地，如果中間報錯，可以看一下結合package.json文件下的devDependencies參數信息檢查是不是存在依賴沖突或者其他問題。必須確保項目依賴安裝完成，不會影響項目運行。然后運行npm run serve 或者npm run dev 運行項目（Vue的項目一般就是這兩個命令）。

運行成功后根據本地地址訪問就能進入項目前端界面了：

?當然這時候是沒法直接登錄進去的，畢竟我們后端還沒運行呢，所以下一步要準備后端運行環境。

（2）后端運行模塊分析

后端項目一般需要結合SpringBoot項目結構進行分析，首先推薦在IntelliJ IDEA 中將后端跟目錄文件打開，如果有小伙伴用的eclipse，后面這塊就不用看了，可以提前退出群聊。因為我基本沒咋用過那款軟件，所以不咋了解，如果沒有IntelliJ IDEA 可以找資源好吧。下面直接進入后端運行分析流程：

Step1：配置Maven加載依賴

在IDEA中打開后端文件后第一件事要配置Maven環境，如果用IDEA自帶的maven加載依賴會很慢，一般推薦由我們自己配置的Maven來加載項目依賴。

按照上圖流程配置完成后點擊根目錄的pom.xml文件，一般IDEA就會自動加載項目依賴了，或者在pom文件下右鍵單擊選擇maven后重新加載項目：

直到pom文件內的依賴加載完成就可以進行下一步了。如果其中有些模塊爆紅沒有完全加載，我們可以看一下，比如像這個log4j-core的日志依賴，不會影響項目直接運行的，可以選擇性忽視即可。

如果是Mybatis依賴或者驅動啥的比較核心切直接影響系統使用的就得注意了，必須下載完對應依賴才行?。

Step2：找到啟動文件，查看配置文件

一般來說，如果用IDEA打開SpringBoot項目文件，在加載完項目依賴后代碼文件就可以正常顯示了（如果沒加載完依賴，代碼段會各種報紅），IDEA彈出會識別到項目服務的提示，然后再下面導航欄將項目的運行模塊啟動類加載出來：

單擊對應的啟動類之后就能找到該服務了，比如這里可以看到我們這個項目有兩個啟動文件模塊。如果沒有識別出來也可以在文件中找就行了。

這個后面可以通過啟動類進行運行。但是找這個啟動類并不是唯一目的，我們需要根據這個啟動類找到啟動模塊的配置文件，也就是這兩個模塊中對應的applicaiton.yml文件，一般在resources下打開就行了。

?這里這個項目就很清楚了，核心配置就在applicaiton.yml下，然后各有三個不同環境下使用的配置文件，分別是dev、docker、prod。也就是用于開發階段、容器化部署、生產階段的配置。進入其中一個application.yml文件看一下：

spring:# 環境 dev|test|prodprofiles:active: dev#文件上傳設置servlet:multipart:max-file-size: 100MBmax-request-size: 100MBenabled: truejackson:date-format: yyyy-MM-dd HH:mm:sstime-zone: GMT+8
# mybaits-plus配置
mybatis-plus:# MyBatis Mapper所對應的XML文件位置mapper-locations: classpath*:/mapper/*Mapper.xmlglobal-config:# 關閉MP3.0自帶的bannerbanner: falsedb-config:# 主鍵類型 0:數據庫ID自增 1.未定義 2.用戶輸入 3 id_worker 4.uuid 5.id_worker字符串表示id-type: AUTO#字段策略 0:"忽略判斷",1:"非 NULL 判斷"),2:"非空判斷"field-strategy: NOT_NULL# 默認數據庫表下劃線命名table-underline: true
sa-token:# token名稱 (同時也是cookie名稱)token-name: Authorization# 是否允許同一賬號并發登錄 (為true時允許一起登錄, 為false時新登錄擠掉舊登錄)is-concurrent: true# 在多人登錄同一賬號時，是否共用一個token(不共用，避免登出時導致其他用戶也登出)is-share: false# token風格(默認可取值：uuid、simple-uuid、random-32、random-64、random-128、tik)token-style: uuid# 是否輸出操作日志is-log: false

這里很明顯他默認的環境是開發環境dev，所以我們找到applicaiton-dev.yml去配置需要的配置信息即可。

#application-dev.yml
server:port: 8085
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/yami_shops?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&zeroDateTimeBehavior=convertToNull&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=trueusername: rootpassword: rootdriver-class-name: com.mysql.cj.jdbc.Drivertype: com.zaxxer.hikari.HikariDataSourcehikari:minimum-idle: 0maximum-pool-size: 20idle-timeout: 10000auto-commit: trueconnection-test-query: SELECT 1data:redis:host: 127.0.0.1port: 6379database: 0
logging:config: classpath:logback/logback-dev.xml
xxl-job:accessToken: default_tokenlogPath: /data/applogs/xxl-job/jobhandleradmin:addresses: http://localhost:8080/xxl-job-admin

這里就可以清晰的看到這個項目所用的數據庫，中間件信息了。首先就是一個本地的mysql數據庫，然后還有本地的redis（緩存），還有一個分布式任務調度平臺xxl-job。所以我們將這些配置信息換成我們自己的本地信息就可以了。

Step3：準備并配置數據庫/中間件環境

對于這種項目我們一般有兩種方式配置所需的環境，第一就是在本地下載好mysql數據庫，redis和xxl-job。然后填入對應的本地信息就可以了。有點條件的可以用docker容器去創建數據庫/中間件環境。比如我這塊就直接用docker創建這3個容器了：

root@young-virtual-machine:~/桌面# docker ps -f name=mall4j
CONTAINER ID   IMAGE                         COMMAND                   CREATED        STATUS         PORTS                                                  NAMES
a699de0cfec8   mall4j-mysql                  "docker-entrypoint.s…"   21 hours ago   Up 7 minutes   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   mall4j-mysql
32c51afd9354   redis:latest                  "docker-entrypoint.s…"   21 hours ago   Up 7 minutes   0.0.0.0:6379->6379/tcp, :::6379->6379/tcp              mall4j-redis
6a46a19481b3   xuxueli/xxl-job-admin:2.4.1   "sh -c 'java -jar $J…"   3 weeks ago    Up 7 minutes   0.0.0.0:8088->8088/tcp, :::8088->8088/tcp              mall4j-xxl-job

然后將數據庫文件，也就是這個項目db目錄下的yami_shop.sql文件導入數據庫。一般如果一個開源的項目沒有sql文件的話，特別是對于后端，就不用clone了，這類項目就算運行起來也無濟于事。

docker可以直接通過命令導入，本地化可以用命令或者用可視化工具比如Navicat Premium 16導入也行。?導入成功后稍微確認一下是不是確實導入了：

root@young-virtual-machine:/opt# docker exec -it mall4j-mysql mysql -uroot -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 435
Server version: 8.0.27 MySQL Community Server - GPLCopyright (c) 2000, 2021, Oracle and/or its affiliates.Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| yami_shops         |
+--------------------+
5 rows in set (0.44 sec)mysql> use yami_shops;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -ADatabase changed
mysql> show tables;
+-----------------------+
| Tables_in_yami_shops  |
+-----------------------+
| tz_area               |
| tz_attach_file        |
| tz_basket             |
| tz_brand              |
| tz_category           |
| tz_category_brand     |
| tz_category_prop      |
| tz_delivery           |
| tz_hot_search         |
| tz_index_img          |
| tz_message            |
| tz_notice             |
| tz_order              |
| tz_order_item         |
| tz_order_refund       |
| tz_order_settlement   |
| tz_pick_addr          |
| tz_prod               |
| tz_prod_comm          |
| tz_prod_favorite      |
| tz_prod_prop          |
| tz_prod_prop_value    |
| tz_prod_tag           |
| tz_prod_tag_reference |
| tz_shop_detail        |
| tz_sku                |
| tz_sms_log            |
| tz_sys_config         |
| tz_sys_log            |
| tz_sys_menu           |
| tz_sys_role           |
| tz_sys_role_menu      |
| tz_sys_user           |
| tz_sys_user_role      |
| tz_transcity          |
| tz_transcity_free     |
| tz_transfee           |
| tz_transfee_free      |
| tz_transport          |
| tz_user               |
| tz_user_addr          |
| tz_user_addr_order    |
| tz_user_collection    |
+-----------------------+
43 rows in set (0.01 sec)

導入成功后就可以將我們的配置信息更新到本地的開源項目中了：

server:port: 8085
spring:datasource:#url: jdbc:mysql://localhost:3306/yami_shops?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&zeroDateTimeBehavior=convertToNull&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=trueurl: jdbc:mysql://192.168.100.128:3306/yami_shops?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&zeroDateTimeBehavior=convertToNull&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=trueusername: rootpassword: rootdriver-class-name: com.mysql.cj.jdbc.Drivertype: com.zaxxer.hikari.HikariDataSourcehikari:minimum-idle: 0maximum-pool-size: 20idle-timeout: 10000auto-commit: trueconnection-test-query: SELECT 1data:redis:
#      host: 127.0.0.1port: 6379database: 9host: 192.168.100.128
logging:config: classpath:logback/logback-dev.xml
xxl-job:accessToken: default_tokenlogPath: /data/applogs/xxl-job/jobhandleradmin:addresses: http://192.168.100.128:8088/xxl-job-admin

像我這個項目就得將兩個Application模塊中dev配置里的mysql、redis、xxl-job信息分別更新為自己的本地地址。另外需要說明的是，如果用的容器化數據庫記得在Linux系統中開放防火墻/安全組策略，最后就可以運行后端項目了。

Step4：運行后端，訪問系統

后端啟動成功后，重新刷新一下之前運行的前端界面，在數據庫中找到登錄的賬號密碼信息，一般在什么user、admin 表里面，然后進行登錄。

如果可以正常登錄訪問，那么前后端項目基本就算跑起來。

如果到處是bug，基本就是踩坑了~

耗子尾汁吧~