「偽全棧」Vue2.5+Node.js搭建一個多頁面商城應用

一個入門級的前後端分離專案，包括前端、後端兩個子專案。前端為基於Vue全家桶的多頁面應用（現已新增React單頁版），後端基於Koa2+Sequelize，主要提供API介面。

線上預覽
前端原始碼
後端原始碼

專案展示

專案特點

1. 前端

• Vue-cli3搭建多頁面應用
• 元件化開發
• 使用Vuex管理狀態
• 響應式頁面，適配移動端

2. 後端

• 使用Koa2框架
• 支援token驗證登入

技術棧

• 前端：Vue + Vuex + Vue-Router
• 後端：Node + Koa2 + Sequelize
• 第三方庫：axios、tweenjs、leancloud
• 中介軟體：jsonwebtoken、koa-jwt、koa-static等

主要目錄結構

1. 前端

.
├─ dist/              # build 生成的程式碼
├─ src/               # 原始碼目錄
│   ├─ assets/        # 公用資源，主要是 SCSS
│   ├─ components/    # 公用元件
│   ├─ http/          # http 請求相關
│   ├─ mixin/         # mixin
│   ├─ pages/         # 頁面
│   │   ├─ cart/      # 購物車
│   │   ├─ home/      # 首頁
│   │   ├─ member/    # 使用者頁
│   │   ├─ product/   # 商品詳情頁
│   ├─ utils/         # 工具庫
├── vue.config.js     # 配置多頁面入口
├── .babelrc
├── package.json
複製程式碼

2. 後端

.
├─ database/            # 資料庫目錄
├─ middleware/          # 中介軟體
├─ public/              # 釋出的程式碼（靜態資源）
├─ routes/              # 服務端路由
├── app.js              # 啟動檔案
複製程式碼

本地執行後端專案

遠端庫中已將前端程式碼打包放入 public 資料夾，因此執行後端專案即可預覽完整效果。

1. 克隆遠端庫

git clone git@github.com:BlameDeng/sun-server-demo.git
複製程式碼

2. 安裝依賴

yarn
複製程式碼

3. 啟動專案

node app
複製程式碼

瀏覽器開啟 http://localhost:8000/home.html 預覽。

本地執行前端專案

前端專案需要後臺資料支援，因此本地執行前端專案需要同時執行服務端專案，並且還需要做一些額外配置工作。

1. 克隆遠端庫

git clone git@github.com:BlameDeng/sun-client-demo.git
複製程式碼

2. 安裝依賴

yarn
複製程式碼

3. 由於使用了 leancloud 的圖形驗證碼功能，因此需要配置 leancloud 應用 appId 和 appKey

• 在 leancloud 新建或開啟一個已有應用
• 開啟圖形驗證碼服務（免費）

  

• 在專案根目錄下新建 key.js 檔案，寫入你的應用 Id 和 Key：

export default {
    appId: '你的appId',
    appKey: '你的appKey'
}
複製程式碼

4. 啟動專案（確保服務端已執行）

yarn serve
複製程式碼

瀏覽器開啟 http://localhost:8080/home.html 預覽。

PS

服務端已經配置好了跨域，因此前後端專案同時執行的時候，8080埠的前端專案可以從8000埠的後端專案獲取資料。如果需要更改後端專案埠，參考以下步驟：

1. 修改後端專案根目錄 app.js

將 port 修改為你指定的埠，如3000（修改後需重新執行）

2. 修改前端專案 sun-client-demo > src > http 目錄下 url.js

將 prefix 修改為後端專案指定的埠，如'http://localhost:3000'。請注意修改的是後端專案執行的埠和前端專案獲取資料的埠，前端專案本身依舊執行在 Vue-cli 指定的埠。