vue nodejs elementUI mysql express demo

vue-nodejs-elementUI-mysql-express-demo

vue+nodejs前後端分離項目，學習使用，包含基本的入門操作。包括從開始創建專案到最後部署的實作過程及過程中遇到的一些問題整理。

專案預覽地址： 預覽地址-- aixiaodou.cn

評論討論網址： 個人部落格-- https://blog.csdn.net/qq_32442967/article/details/103459148

資料庫位址：express-demo/doc/demo2.sql

MySQL資料庫

資料庫為demo2

建立demo2資料庫>運行sql語句

修改express-demo 專案中model/connDb.js 資料庫連線配置

express-demo-web: 前端web項目

 # 安装依赖
npm install

# 运行项目
npm run dev

express-demo：後端nodejs項目

 # 安装依赖
npm install

# 运行项目
npm start

---

本項目為入門項目，採用前（vue）後（nodejs）端分離模式

主要運用技術：

• 前端：vue+ elementUI+ axios+ vue-cli+ webpack+ vue-router+ vuex+ js-cookie
• 後端：nodejs+ express+ jsonwebtoken
• 資料庫： mysql
• 部署環境：nginx
• 部署伺服器：linux centos7

現有功能介紹：

1. toolsDown 工具下載模組：從資料庫查詢列表，分類進行展示
2. login、register 登入、註冊、登出登入模組：首頁&工具下載頁面可無登入預覽，使用者清單頁面登入後可見。 將sessionToken 存到cookie 中，登入後的userId 存到localstorage 中。 根據是否登入來顯示右上角為登入還是頭像。
3. userManage 使用者清單模組：分頁，模糊搜尋, 使用者編輯、刪除功能
4. friend_link 友情連結介面：將友鍊和備案資訊放到資料庫中
5. 軟體下載次數統計
6. 用戶修改、刪除功能

---

V 1.0.2 下載統計/登入註冊校驗（第5-6項）

1. 優化Token校驗
2. 軟體下載次數統計
3. 用戶修改、刪除功能

V 1.0.1 實現基本功能（第1-4項）－主要記錄一些遇到的問題

前端

1. 控制頁面是否登入才可存取：根據token來判斷是否有登錄，配置router 參考鏈接
2. 將登入後取得的userId存到localstorage，在取得使用者資訊是帶上userId取得登入使用者訊息，顯示右上角頭像

後端

1. nodejs連接mysql資料庫,如果使用了連接池，一定要在使用完釋放連接，否則會造成超過最大連接數參考鏈接

部署

1. nginx部署vue專案後，正常存取沒問題，刷新就會出現404的問題解決方法
2. nodejs在linux中持久運行使用了forever 參考鏈接

---

V 1.0.0 建立前後端項目

前端

1. 使用vue-cli+ webpack產生vue項目
2. 設定router，store，utils，axios，elementUI，連接埠號碼...

後端

1. 使用express產生nodejs專案參考鏈接
2. 安裝jsonwebtoken 依賴包，產生token，在登入成功後返回前端參考鏈接
3. 安裝mysql 資料庫依賴套件

解決前後端分離項目跨域問題（設定請求頭） 參考鏈接

• 前端：axios中request 攔截器，設定sessionToken，作為後端校驗使用，判斷是否為允許的伺服器
• 後端：在app.js中設定請求頭- 加入app.all()
• 後端：由於自訂了請求頭sessionToken ，為複雜跨域請求，就會有一次options預請求，對method為options的請求快速處理返回200

資料庫

1. 建立資料庫>表格【user, tools_down, friend_link】
2. 模擬測試數據