express+mongoose 實現簡易後臺數據接口

以前剛入門vue並作好了一個簡而全的純vue2全家桶的項目，數據都是本地 json 模擬請求的；詳情請移步這裏：vue-proj-demo

爲了真正作到數據庫的真實存取，因而又開始入門了 node+express+mongoose 、並以此來爲以前的vue頁面寫後臺數據接口。

本文涉及的源碼： vue-node-proj

基本數據模型 schema

如下涉及到mongodb操做的前提，是要配置好mongodb環境的；
mongodb 的安裝配置、mongoose 的基本使用，請參考 http://gjincai.github.io/categories/mongodb/

mongodb 主要建了3個數據模型：

1. 用戶信息數據結構：主要包含：用戶名(手機)、密碼、註冊時間

2. 商品信息數據結構：主要是該商品的信息，brand_id是惟一標識、brand_cate是商品分類(男裝、女裝...)

3. 購物車信息數據結構：購物車商品的大部分字段跟商品信息相同；主要經過name字段將用戶與該用戶購物車信息聯繫起來；cart_num、cart_isSelect分別爲該商品購物車中的數量、是否打鉤選中狀態。
   詳情以下：

// 用戶信息的數據結構模型
const userSchema = new Schema({
  name: {type: String},
  pwd: {type: String},
  time: {type: Date, default: Date.now}
})
// 商品的數據結構模型
const goodsSchema = new Schema({
  brand_id: Number,
  brand_cate: String,
  brand_cateName: String,
  brand_status: String,
  brand_name: String,
  brand_price: Number,
  brand_desc: String,
  brand_pic: String
})
// 購物車的的數據結構模型
const cartsSchema = new Schema({
  name: String,
  brand_id: Number,
  brand_cate: String,
  brand_name: String,
  brand_price: Number,
  brand_desc: String,
  brand_pic: String,
  cart_num: Number,
  cart_isSelect: Boolean
})

鏈接數據庫

開始鏈接數據庫，當數據庫 test_nodeVue 不存在時，會自動建立以此爲名字的mongodb數據庫。

const database = mongoose.connect('mongodb://127.0.0.1:27017/test_nodeVue')
database.connection.on('error', function(error){
  console.log('數據庫test_nodeVue鏈接失敗：' + error)
  return
})
database.connection.once('open', function(){
  console.log('數據庫test_nodeVue鏈接成功')
  // 初始化數據庫
  initData();
})

初始化數據庫

鏈接數據庫，當首次鏈接的時候、數據庫仍是空的；
當成功鏈接上數據庫的時候，先查詢數據庫是否爲空；若空則往數據庫裏插入初始化的商品數據（initGoods.json）。

const initData = function () {
  // 初始化商品goods
  db.goodsModel.find({}, function(err, doc){
    if (err) {
      console.log('initData出錯：' + err);
    } else if (!doc.length) {
      console.log('db goodsModel open first time');
      // 初始化數據，遍歷插入
      initGoods.map(brand => {
        db.goodsModel.create(brand)
      })
      // console.log(initGoods)

    } else {
      console.log('db open not first time');
    }
  })
}

數據的更新 update

mongoose 數據增刪查改的基本操做，詳情參考：源碼
這裏主要說一下 update:
參數：testModel.update(conditionsObj, updateObj, upsert, function(){})
conditionsObj：查詢條件
updateObj：須要更新的內容
upsert：當conditionsObj存在，則更新；不存在，則以conditionsObj、upsert爲基礎建立

eg：加入購物車的時候，須要根據用戶名及商品id判斷該商品是否已經存在於用戶的購物車裏面；若存在，則更新；不存在，則新建：

// api addToCart
app.get('/api/goods/addToCart', function (req, res) {
  let brand_id = req.query.brand_id
  let name = req.query.name
  let newCart = req.query
  db.cartsModel.update({brand_id: brand_id, name: name}, {$set:newCart}, {upsert:true}, function(err){
    if (err) {
      console.log('加入購物車失敗：' + err);
      res.json({code: 700, msg:'加入購物車失敗：' + err})
      return
    } else {
      // add
      res.json({code: 200, msg:'加入購物車成功'})
      return
    }
  })
})

vue-cli 跨域請求配置

前端vue項目的開發環境dev地址: localhost:8080,
後臺node服務器的訪問地址是: 127.0.0.1:8889,
(本地開啓的mongodb服務的地址是: 127.0.0.1:27017)

當前端與後臺進行數據交互時，天然就出現跨域問題。
經過在前端修改 vue-cli 的配置可解決：
vue-cli中的 client/config/index.js 下配置 dev選項的 {proxyTable}:

proxyTable: {
  // proxy all requests starting with /api to jsonplaceholder
  '/api': {
    target: 'http://127.0.0.1:8889/api',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''  // 若target中沒有/api、這裏又爲空，則404；
    }
  }
}

而後，eg 在請求商品詳情時:

this.$http({
  url: '/api/goods/detail',
  method: 'GET',
  params: {
    brand_id: this.$route.params.id
  }
})
  .then((res) => {
    // doSomething
  })

這裏的請求url /api/goods/detail、對應的真實請求地址是 http://127.0.0.1:8889/api/goods/detail。

proxy的官網文檔: https://vuejs-templates.github.io/webpack/proxy.html