1. 程式人生 > >「偽全棧」Vue+Node搭建一個商城應用

「偽全棧」Vue+Node搭建一個商城應用

一個入門級的前後端分離專案,包括前端、後端兩個子專案。前端為基於Vue全家桶的多頁面應用,後端基於Koa2+Sequelize,主要提供API介面。(網站備案中,線上預覽地址暫為非標準埠)

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

專案展示

cover.jpg
detail.png

專案特點

  1. 前端
  • Vue-cli3搭建多頁面應用
  • 元件化開發
  • 使用Vuex管理狀態
  • 響應式頁面,適配移動端
  1. 後端
  • 使用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 複製程式碼
  1. 後端
.
├─ database/            # 資料庫目錄
├─ middleware/          # 中介軟體
├─ public/              # 釋出的程式碼(靜態資源)
├─ routes/ # 服務端路由 ├── app.js # 啟動檔案 複製程式碼

本地執行後端專案

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

  1. 克隆遠端庫
git clone [email protected]:BlameDeng/sun-server-demo.git
複製程式碼
  1. 安裝依賴
yarn
複製程式碼
  1. 啟動專案
node app
複製程式碼

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

本地執行前端專案

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

  1. 克隆遠端庫
git clone [email protected]:BlameDeng/sun-client-demo.git
複製程式碼
  1. 安裝依賴
yarn
複製程式碼
  1. 由於使用了 leancloud 的圖形驗證碼功能,因此需要配置 leancloud 應用 appId 和 appKey
  • leancloud 新建或開啟一個已有應用
  • 開啟圖形驗證碼服務(免費)
    image.png
  • 在專案根目錄下新建 key.js 檔案,寫入你的應用 Id 和 Key:
export default {
    appId: '你的appId',
    appKey: '你的appKey'
}
複製程式碼
  1. 啟動專案(確保服務端已執行)
yarn serve
複製程式碼

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

PS

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

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

image.png
將 port 修改為你指定的埠,如3000(修改後需重新執行) 2. 修改前端專案 sun-client-demo > src > http 目錄下 url.js

image.png

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