「僞全棧」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 指定的端口。