「偽全棧」Vue+Node搭建一個商城應用
摘要：
一個入門級的前後端分離專案，包括前端、後端兩個子專案。前端為基於Vue全家桶的多頁面應用，後端基於Koa2+Sequelize，主要提供API介面。(網站備案中，線上預覽地址暫為非標準埠)
線上預覽
前端原始碼
後端原始碼
專案展示
...
一個入門級的前後端分離專案，包括前端、後端兩個子專案。前端為基於Vue全家桶的多頁面應用，後端基於Koa2+Sequelize，主要提供API介面。(網站備案中，線上預覽地址暫為非標準埠)
專案展示
專案特點
- 前端
- Vue-cli3搭建多頁面應用
- 元件化開發
- 使用Vuex管理狀態
- 響應式頁面，適配移動端
- 後端
- 使用Koa2框架
- 支援token驗證登入
技術棧
- 前端：Vue + Vuex + Vue-Router
- 後端：Node + Koa2 + Sequelize
- 第三方庫：axios、tweenjs、leancloud
- 中介軟體：jsonwebtoken、koa-jwt、koa-static等
主要目錄結構
- 前端
. ├─ dist/# build 生成的程式碼 ├─ src/# 原始碼目錄 │├─ assets/# 公用資源，主要是 SCSS │├─ components/# 公用元件 │├─ http/# http 請求相關 │├─ mixin/# mixin │├─ pages/# 頁面 ││├─ cart/# 購物車 ││├─ home/# 首頁 ││├─ member/# 使用者頁 ││├─ product/# 商品詳情頁 │├─ utils/# 工具庫 ├── vue.config.js# 配置多頁面入口 ├── .babelrc ├── package.json 複製程式碼
- 後端
. ├─ database/# 資料庫目錄 ├─ middleware/# 中介軟體 ├─ public/# 釋出的程式碼（靜態資源） ├─ routes/# 服務端路由 ├── app.js# 啟動檔案 複製程式碼
本地執行後端專案
遠端庫中已將前端程式碼打包放入 public 資料夾，因此執行後端專案即可預覽完整效果。
- 克隆遠端庫
git clone [email protected]:BlameDeng/sun-server-demo.git 複製程式碼
- 安裝依賴
yarn 複製程式碼
- 啟動專案
node app 複製程式碼
瀏覽器開啟 http://localhost:8000/home.html 預覽。
本地執行前端專案
前端專案需要後臺資料支援，因此本地執行前端專案需要同時執行服務端專案，並且還需要做一些額外配置工作。
- 克隆遠端庫
git clone [email protected]:BlameDeng/sun-client-demo.git 複製程式碼
- 安裝依賴
yarn 複製程式碼
- 由於使用了 leancloud 的圖形驗證碼功能，因此需要配置 leancloud 應用 appId 和 appKey
- 在leancloud 新建或開啟一個已有應用
- 開啟圖形驗證碼服務（免費）
- 在專案根目錄下新建 key.js 檔案，寫入你的應用 Id 和 Key：
export default {
appId: '你的appId',
appKey: '你的appKey'
}
複製程式碼
- 啟動專案（確保服務端已執行）
yarn serve 複製程式碼
瀏覽器開啟 http://localhost:8080/home.html 預覽。
PS
服務端已經配置好了跨域，因此前後端專案同時執行的時候，8080埠的前端專案可以從8000埠的後端專案獲取資料。如果需要更改後端專案埠，參考以下步驟：
- 修改後端專案根目錄 app.js
將 port 修改為你指定的埠，如3000（修改後需重新執行） 2. 修改前端專案 sun-client-demo > src > http 目錄下 url.js
將 prefix 修改為後端專案指定的埠，如' http://localhost:3000 '。請注意修改的是後端專案執行的埠和前端專案獲取資料的埠，前端專案本身依舊執行在 Vue-cli 指定的埠。