30張圖！手把手帶你盤 Spring Boot 前后端分離實(shí)戰(zhàn)項(xiàng)目！

關(guān)注我的公號時間比較久的小伙伴應(yīng)該清楚，我推薦過很多非常贊的實(shí)戰(zhàn)項(xiàng)目，比如這篇《很哇塞的 3 個 Java 實(shí)戰(zhàn)項(xiàng)目！》、再比如這篇《熬夜收集了 5 個實(shí)用的 Java 開源論壇系統(tǒng)！》 。

但是，有一些學(xué)習(xí) Java 時間比較短的小伙伴，不知道如何在自己本地把項(xiàng)目跑起來。尤其是一些前后端分離的項(xiàng)目，直接把一些不懂前端的小伙伴給整迷糊了。

今天這篇文章，我就從一個初學(xué)者的角度，帶著大家在本地搭建一下項(xiàng)目環(huán)境。

我會使用 uexam^[1] 這個實(shí)戰(zhàn)項(xiàng)目作為案例！

uexam 是一款前后端分離的在線考試系統(tǒng)。這個項(xiàng)目的后端基于 Spring Boot 2.0+MySQL/PostgreSQL+Redis+MyBatis，前端基于 Vue。

開始搭建環(huán)境之前，首先需要通過 Git 將項(xiàng)目克隆到本地。

git clone https://gitee.com/SnailClimb/uexam.git

考試系統(tǒng)本地環(huán)境搭建

你在學(xué)習(xí)任何一個開源項(xiàng)目之前，一定一定一定要仔細(xì)看一下項(xiàng)目的 README 文檔和相關(guān)的介紹文檔。

1.細(xì)讀項(xiàng)目 README

首先，我們來看一下這個項(xiàng)目的 README 文檔。從 README 文檔中，你可以獲取到項(xiàng)目介紹、演示地址、架構(gòu)設(shè)計(jì)、使用教程等非常有用的信息。

根據(jù)項(xiàng)目技術(shù)棧和使用教程這部分的信息，我們判斷出項(xiàng)目啟動需要依賴的外部環(huán)境有：

• MySQL/PostgreSQL ：數(shù)據(jù)庫。
• Redis ：內(nèi)存數(shù)據(jù)庫，用作緩存
• 七牛云存儲 ：存儲一些文件比如圖片（非必須，只在上傳圖片的時候會用到）

并且，項(xiàng)目的數(shù)據(jù)庫腳本在 uexam/source/xzs/sql 目錄下。

2.后端環(huán)境搭建

MySQL 太大眾了，網(wǎng)上一堆教程，我這里以 PostgreSQL 數(shù)據(jù)庫版本來演示。

安裝 PostgreSQL

這里我們使用 Docker 下載最近版的 PostgreSQL 鏡像 ，默認(rèn)大家已經(jīng)安裝了 Docker。

$ docker pull postgres

如果你對 Docker 不熟悉的話，也沒關(guān)系，花半個小時看一下 Guide 哥寫的 《Docker 從入門到上手干事！看這篇就夠了！》這篇文章就 OK 了。

查看 PostgreSQL 鏡像：

$ docker images |grep postgres
postgres                latest              62473370e7ee        2 weeks ago         314MB

運(yùn)行 ·：

$ docker run -d -p 5432:5432 --name postgresql -e POSTGRES_PASSWORD=123456 postgres

安裝 Redis

這里我們使用 Docker 下載最近版的 Redis 鏡像。

$ docker pull redis

查看 Redis 鏡像：

$ docker images |grep redis

運(yùn)行 Redis：

$ docker run -itd --name redis-test -p 6379:6379 redis

創(chuàng)建七牛云存儲(可省略)

備注：如果你在使用系統(tǒng)的過程中不上傳圖片的話，這一步完全可以省略掉。 我這里介紹的比較簡單，大二那會我就開始使用七牛云存儲了，我記得如果你要使用七牛云產(chǎn)品的話，是需要提前進(jìn)行實(shí)名認(rèn)證的。

如果你要為項(xiàng)目配置自己的七牛云存儲的話，你要先有一個七牛云的賬號^[2]。然后，選擇七牛云的對象存儲服務(wù)，點(diǎn)擊創(chuàng)建空間即可。

存儲空間創(chuàng)建完成之后，你需要用到的是 存儲空間名稱 、 CDN 測試域名 以及你的 秘鑰。通過在后端配置文件中配置這些屬性，你就可以成功訪問到對應(yīng)的存儲空間了。

創(chuàng)建數(shù)據(jù)庫并執(zhí)行數(shù)據(jù)庫腳本

創(chuàng)建一個名字叫做xzs 的數(shù)據(jù)庫，然后執(zhí)行相應(yīng)的數(shù)據(jù)庫腳本即可（數(shù)據(jù)庫腳本在 uexam/source/xzs/sql 目錄下）。

項(xiàng)目配置文件修改

修改 application-dev.yml ，將 PostgreSQL 、Redis 的服務(wù)地址改為自己本地的。

application-dev.yml

logging:
  path: ./log/

spring:
  redis:
    host: 127.0.0.1
  datasource:
    url: jdbc:postgresql://127.0.0.1:5432/xzs
    username: postgres
    password: 123456

七牛云相關(guān)的配置在 application.yml 中，application.yml 配置文件中的是一些通用的配置。

application.yml

system:
  qn:
    url: 你自己創(chuàng)建的空間的 url
    bucket: 你自己創(chuàng)建的空間名稱
    access-key: 你自己的 access-key
    secret-key: 你自己的 secret-key

導(dǎo)入項(xiàng)目

注意：你要打開的是 uexam/source/ 目錄下的 xzs 文件，這個才是后端項(xiàng)目的代碼。

另外，如果你配置過 IDEA 命令行啟動項(xiàng)目的話，通過在控制臺使用 idea . 命令即可快速打開項(xiàng)目。

打開項(xiàng)目之后，等待其下載安裝好 pom.xml 配置的一些 jar 包。

啟動項(xiàng)目

后端環(huán)境 Ready 之后，直接運(yùn)行 XzsApplication 即可。

啟動成功后，打開下面的鏈接即可跳轉(zhuǎn)到對應(yīng)的端：

• 學(xué)生系統(tǒng)地址：http://localhost:8000/student
• 管理端地址：http://localhost:8000/admin

注意：這種方式，前端雖然也啟動了，也能訪問，不過是內(nèi)嵌在后端項(xiàng)目中。如果如果我們需要前后端分離的話，需要單獨(dú)運(yùn)行前端項(xiàng)目

3.Web 環(huán)境搭建

這一步需要你的本地有 Node 開發(fā)環(huán)境。

如果你不知道如何搭建 Node 開發(fā)環(huán)境的話，Windows 用戶可以看 Microsoft 的《直接在 Windows 上設(shè)置 Node.js 開發(fā)環(huán)境》這篇文章，介紹的非常詳細(xì)。

Mac 用戶的話就比較簡單了，推薦直接使用 Homebrew 安裝即可：brew install node （NPM 已經(jīng)默認(rèn)包含在了 Node 環(huán)境中）。

安裝完成之后，建議你測試一下本地是否成功安裝 Node 和 NPM ：

• Node : node -v
• NPM : npm -v

Node 環(huán)境搭建好了之后，我們就開始正式搭建本地 Web 環(huán)境了！

Web 端代碼在 uexam/source/vue 下，我們需要首先進(jìn)入這個目錄,然后分別對 xzs-admin (管理端) 和 xzs-student （學(xué)生端）執(zhí)行下面兩個命令。

1.下載相關(guān)依賴

$ npm install

2.啟動項(xiàng)目

$ npm run serve

啟動完成之后，打開下面的鏈接即可跳轉(zhuǎn)到對應(yīng)的端：

• 學(xué)生系統(tǒng)地址：http://localhost:8001 （賬號為：student/123456）
• 管理端地址：http://localhost:8002 ( 賬號為：admin/123456)

4.小程序端環(huán)境搭建

小程序端代碼在 uexam/source/wx/xzs-student 目錄下。

首先，你需要申請一個微信小程序測試賬號，申請地址以及詳細(xì)說明在這里：https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html 。

登錄我們剛剛申請的小程序測試賬號，AppID(小程序 ID) 和 AppSecret(小程序密鑰) 是我們需要用到的。

其次，你需要修改后端配置文件 application.yml 中微信小程序相關(guān)的配置。

application.yml

system:
  wx:
    appid: 你申請的小程序測試號的 appid
    secret: 你申請的小程序測試號的 secret
    token-to-live: 12h   #token 過期時間
    security-ignore-urls:
      - /api/wx/student/auth/bind
      - /api/wx/student/auth/checkBind
      - /api/wx/student/user/register

另外，為了能夠打開微信小程序，我們還需要下載 微信開發(fā)者工具 。微信開發(fā)者工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 。

選擇適合自己的操作系統(tǒng)版本，下載穩(wěn)定版即可。

最后，我們打開微信開發(fā)工具按照下面的步驟導(dǎo)入項(xiàng)目即可。

選擇導(dǎo)入項(xiàng)目。

選擇 uexam/source/wx/xzs-student 文件夾。

注意檢查這里的 AppID 屬性是不是你自己申請的測試的一樣。

等待一會，咱們的小程序環(huán)境就 OK 了。

考試系統(tǒng)本地使用體驗(yàn)

環(huán)境搭建了之后，不要一上來就看項(xiàng)目代碼。先自己走一遍系統(tǒng)提供的主要功能！

這個考試系統(tǒng)的樣式以及操作體驗(yàn)都是非常不錯的，這也是我推薦這個項(xiàng)目很重要的一個原因。

管理端

添加學(xué)科

在創(chuàng)建題目之前，你需要首要創(chuàng)建學(xué)科。這里我們創(chuàng)建的學(xué)科是編程，年級是三年級。

添加題目

可以看到這里可以添加多種題型: 單選題、多選題、判斷題、填空題、簡答題。

我們以單選題為例，添加題目界面如下。

添加成功之后，題目列表就會出現(xiàn)我們剛剛添加的題目。

添加試卷

有了學(xué)科和題目之后才能添加試卷。

添加成功之后，試卷列表就會出現(xiàn)我們剛剛添加的試卷。

添加學(xué)生

注意：這里的學(xué)生要和我們前面創(chuàng)建的學(xué)科對應(yīng)的年級對應(yīng)上。

學(xué)生端

使用我們剛剛創(chuàng)建的學(xué)生賬號登錄，你會發(fā)現(xiàn)主頁多了一個試卷。這個試卷就是我們剛剛在管理端創(chuàng)建的。

試卷答題界面如下。

小程序端

使用我們剛剛創(chuàng)建的學(xué)生賬號登錄。

點(diǎn)擊底部 tab 欄的“試卷”，你會發(fā)現(xiàn)主頁多了一個試卷。

點(diǎn)開試卷之后的效果如下。

總結(jié)

這篇文章我手把手帶著大家走了一遍: Spring Boot 項(xiàng)目的后端環(huán)境搭建（Maven）->Vue 前端項(xiàng)目環(huán)境搭建->小程序環(huán)境搭建 。

我個人感覺應(yīng)該是介紹的非常詳細(xì)了，大家跟著做基本就可以在本地把項(xiàng)目跑起來了。

如果這篇文章對你有幫助的話，歡迎點(diǎn)贊+在看+分享啊！筆芯!

參考資料