express+mongoose 實(shí)現(xiàn)簡易后臺數(shù)據(jù)接口

dreambei 發(fā)布于2019-06-26 17:21 / 1444人閱讀

摘要：之前剛?cè)腴T并做好了一個(gè)簡而全的純?nèi)彝暗捻?xiàng)目，數(shù)據(jù)都是本地模擬請求的詳情請移步這里為了真正做到數(shù)據(jù)庫的真實(shí)存取，于是又開始入門了并以此來為之前的頁面寫后臺數(shù)據(jù)接口。

之前剛?cè)腴Tvue并做好了一個(gè)簡而全的純vue2全家桶的項(xiàng)目，數(shù)據(jù)都是本地 json 模擬請求的；詳情請移步這里：vue-proj-demo

為了真正做到數(shù)據(jù)庫的真實(shí)存取，于是又開始入門了 node+express+mongoose 、并以此來為之前的vue頁面寫后臺數(shù)據(jù)接口。

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

基本數(shù)據(jù)模型 schema

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

mongodb 主要建了3個(gè)數(shù)據(jù)模型：

用戶信息數(shù)據(jù)結(jié)構(gòu)：主要包含：用戶名(手機(jī))、密碼、注冊時(shí)間

商品信息數(shù)據(jù)結(jié)構(gòu)：主要是該商品的信息，brand_id是唯一標(biāo)識、brand_cate是商品分類(男裝、女裝...)

購物車信息數(shù)據(jù)結(jié)構(gòu)：購物車商品的大部分字段跟商品信息相同；主要通過name字段將用戶與該用戶購物車信息聯(lián)系起來；cart_num、cart_isSelect分別為該商品購物車中的數(shù)量、是否打鉤選中狀態(tài)。
詳情如下：

// 用戶信息的數(shù)據(jù)結(jié)構(gòu)模型
const userSchema = new Schema({
  name: {type: String},
  pwd: {type: String},
  time: {type: Date, default: Date.now}
})
// 商品的數(shù)據(jù)結(jié)構(gòu)模型
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
})
// 購物車的的數(shù)據(jù)結(jié)構(gòu)模型
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
})

連接數(shù)據(jù)庫

開始連接數(shù)據(jù)庫，當(dāng)數(shù)據(jù)庫 test_nodeVue 不存在時(shí)，會(huì)自動(dòng)創(chuàng)建以此為名字的mongodb數(shù)據(jù)庫。

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

初始化數(shù)據(jù)庫

連接數(shù)據(jù)庫，當(dāng)首次連接的時(shí)候、數(shù)據(jù)庫還是空的；
當(dāng)成功連接上數(shù)據(jù)庫的時(shí)候，先查詢數(shù)據(jù)庫是否為空；若空則往數(shù)據(jù)庫里插入初始化的商品數(shù)據(jù)（initGoods.json）。

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

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

數(shù)據(jù)的更新 update

mongoose 數(shù)據(jù)增刪查改的基本操作，詳情參考：源碼
這里主要說一下 update:
參數(shù)：testModel.update(conditionsObj, updateObj, upsert, function(){})
conditionsObj：查詢條件
updateObj：需要更新的內(nèi)容
upsert：當(dāng)conditionsObj存在，則更新；不存在，則以conditionsObj、upsert為基礎(chǔ)創(chuàng)建

eg：加入購物車的時(shí)候，需要根據(jù)用戶名及商品id判斷該商品是否已經(jīng)存在于用戶的購物車?yán)锩?；若存在，則更新；不存在，則新建：

// 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項(xiàng)目的開發(fā)環(huán)境dev地址: localhost:8080,
后臺node服務(wù)器的訪問地址是: 127.0.0.1:8889,
(本地開啟的mongodb服務(wù)的地址是: 127.0.0.1:27017)

當(dāng)前端與后臺進(jìn)行數(shù)據(jù)交互時(shí)，自然就出現(xiàn)跨域問題。
通過在前端修改 vue-cli 的配置可解決：
vue-cli中的 client/config/index.js 下配置 dev選項(xiàng)的 {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 在請求商品詳情時(shí):

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

這里的請求url /api/goods/detail、對應(yīng)的真實(shí)請求地址是 http://127.0.0.1:8889/api/goods/detail。

proxy的官網(wǎng)文檔: https://vuejs-templates.github.io/webpack/proxy.html

云服務(wù)器 GPU云服務(wù)器 express框架實(shí)現(xiàn)webrtc失敗 js簡易留言板實(shí)現(xiàn) 后臺常駐服務(wù)實(shí)現(xiàn) express數(shù)據(jù)庫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/19071.html

發(fā)表評論

登陸后可評論

0條評論

dreambei

男|高級講師

我要關(guān)注我要私信

TA的文章

hostwinks：印度vps云主機(jī)5折優(yōu)惠,月付$2.99起;印度獨(dú)立服務(wù)器9折優(yōu)惠,月付$36起

閱讀 1730·2021-11-23 10:07
隱藏火狐和谷歌瀏覽器滾動(dòng)條

閱讀 2730·2019-08-30 11:10
2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫

閱讀 2910·2019-08-29 17:08
【VUE入門】父組件給子組件傳值

閱讀 1849·2019-08-29 15:42
設(shè)計(jì)師的春天：中文WebFont解決方案Font-Spider(字蛛)

閱讀 3245·2019-08-29 12:57
一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的CSS

閱讀 2461·2019-08-28 18:06
齒輪數(shù)據(jù)接口標(biāo)準(zhǔn)及應(yīng)用前景

閱讀 3628·2019-08-27 10:56
JavaScript設(shè)計(jì)模式

閱讀 443·2019-08-26 11:33

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

express+mongoose 實(shí)現(xiàn)簡易后臺數(shù)據(jù)接口

相關(guān)文章

基于 Vue2+Node+mongoDB 的前后端分離全棧練手小項(xiàng)目

**vue+socket.io+express+mongodb 實(shí)現(xiàn)簡易多房間在線群聊**

Node +MongoDB 搭建后臺的全過程

用一個(gè)登錄demo貫穿vue+node+mongoDB前后端分離的開發(fā)方式

**react下express+mongodb入門使用**

發(fā)表評論

0條評論

dreambei

男|高級講師

TA的文章

hostwinks：印度vps云主機(jī)5折優(yōu)惠,月付$2.99起;印度獨(dú)立服務(wù)器9折優(yōu)惠,月付$36起

隱藏火狐和谷歌瀏覽器滾動(dòng)條

2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫

【VUE入門】父組件給子組件傳值

設(shè)計(jì)師的春天：中文WebFont解決方案Font-Spider(字蛛)

一步步搭建物聯(lián)網(wǎng)系統(tǒng)——無處不在的CSS

齒輪數(shù)據(jù)接口標(biāo)準(zhǔn)及應(yīng)用前景

JavaScript設(shè)計(jì)模式

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

express+mongoose 實(shí)現(xiàn)簡易后臺數(shù)據(jù)接口

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！