express+mongose簡易バックグラウンドデータインタフェースを実現

以前、vueに入門したばかりで、シンプルで完全な純vue 2ファミリーバケツのプロジェクトを作成しました.データはローカルjsonシミュレーションで要求されています.詳細はこちら:vue-proj-demo
データベースへの実際のアクセスを実現するために、node+express+mongoseにアクセスし、以前のvueページのバックグラウンドデータインタフェースを書き始めました.
本明細書に関連するソースコード:vue-node-proj
基本データモデルschema
以下mongodb操作に関する前提は、mongodb環境を構成することである.mongodbのインストール構成、mongoseの基本的な使用については、「http://gjincai.github.io/categories/mongodb/
mongodbは主に3つのデータモデルを構築しています.

ユーザー情報データ構造:主にユーザー名(携帯電話)、パスワード、登録時間

を含む.

商品情報データ構造:主に当該商品の情報であり、brand_idが唯一の標識であり、brand_cateが商品分類(男装、女装...)

ショッピングカート情報データ構造:ショッピングカート商品の大部分のフィールドは商品情報と同じである.主に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
mongoseデータの添削変更の基本操作、詳細は参考:ソースコードここで主に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