WhiteJotter

---

這是一個簡單的前後端分離項目，主要使用Vue.js + SpringBoot技術開發。

除了作為入門練習之外，我還希望該專案可以作為一些常見Web專案的腳手架，幫助您簡化網站建立的過程。它被稱為白色筆記本，因為它從 0 開始，並隨著時間的推移逐漸提高。

前端倉庫：https://github.com/realdonald1994/WhiteJotter_Vue

後端倉庫：https://github.com/realdonald1994/WhiteJotter

歡迎加入白喬特！

整體展示

1. 首頁

作為展示頁面，包括本專案開發的主要參考資料、近期更新以及Slogan

2. 圖書館

提供圖書、電影資訊展示功能

3. 筆記本

提供筆記、博文展示功能

4.後台管理

包括儀表板、內容管理、使用者及權限管理等。

5.關於我

個人介紹及相關連結

建築學

• 應用

• 科技

技術堆疊

1. 前端技術棧

1.Vue.js
2.ElementUI
3.axios
4.Vuex

2. 後端技術棧

1.Spring引導
2.Spring數據+JPA
3.MySQL
4.四郎

3. 資料庫

1.Mysql

4、伺服器

1.Centos7
2.Nginx
3.FastDFS

5. 測試

1.Junit
2.開玩笑

部署

1.clone專案到本地

前端：

git clone https://github.com/realdonald1994/WhiteJotter_Vue

後端：

git clone https://github.com/realdonald1994/WhiteJotter

2.在mysql中建立資料庫white_jotter ，運行項目，資料會自動注入。

Redis埠為6379（預設埠），密碼為空。

3.資料庫在後端專案的src main resources目錄下的application.properties檔案中配置，mysql版本為8.0.15。

4.在IntelliJ IDEA中運行後端專案。為了確保專案運行成功，可以右鍵pom.xml ，選擇maven->reimport並重新啟動項目

至此，伺服器啟動成功，同時執行前端項目，存取http: // localhost: 8080 ，即可進入登入頁面，預設帳號為admin ，密碼為123

如果要做二次開發，請繼續看第五步和第六步。

5.進入前端項目根目錄，在命令列中依序輸入以下命令：

# Install dependencies
  npm install

# Start the project at localhost: 8080
  npm run dev

由於wj-front專案中已經配置了連接埠轉發，將資料轉發到SpringBoot，所以專案啟動後，在瀏覽器中輸入http: // localhost: 8080存取我們的前端項目，所有請求都將資料轉發到SpringBoot通過連接埠轉送（注意此時不要關閉SpringBoot專案）。

6.最後就可以使用WebStorm等工具開啟wj-front專案並繼續開發了。開發完成後，專案要上線的時候，還是會進入wj-front目錄，然後執行以下指令：

 npm run build

指令執行成功後，會在wj-front目錄下產生一個dist資料夾，將資料夾中的assets和index.html兩個檔案複製到nginx即可。

 mvn clean install

最後在新產生的target目錄下輸入命令列java -jar xxx.jar 。啟動後端伺服器。

在nginx檔案下輸入命令列： start nginx 。啟動前端伺服器。

更新

2020年

08-20 新增Redis
06-09 使用 Vue test utils 和 Jest 新增單元測試
06-04 使用gzip解決網頁載入緩慢
06-02 專案部署在雲端伺服器上，網站首次發布？
05-29 前後端分離項目
04-20 使用開源markdown編輯器實現文章展示與管理模組

…