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

dreambei 發布于2019-06-26 17:21 / 1385人閱讀

摘要：之前剛入門并做好了一個簡而全的純全家桶的項目，數據都是本地模擬請求的詳情請移步這里為了真正做到數據庫的真實存取，于是又開始入門了并以此來為之前的頁面寫后臺數據接口。

之前剛入門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個數據模型：

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

商品信息數據結構：主要是該商品的信息，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

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

GPU云服務器云服務器 express框架實現webrtc失敗 js簡易留言板實現后臺常駐服務實現 express數據庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19071.html

基于 Vue2+Node+mongoDB 的前后端分離全棧練手小項目

摘要：本文源碼簡介之前剛入門并做好了一個簡而全的純全家桶的項目，數據都是本地模擬請求的詳情請移步這里為了真正做到數據庫的真實存取，于是又開始入門了并以此來為之前的頁面寫后臺數據接口。本文源碼：Github 簡介：之前剛入門vue并做好了一個簡而全的純vue2全家桶的項目，數據都是本地 json 模擬請求的；詳情請移步這里：vue-proj-demo 為了真正做到數據庫的真實存取，于是又...

jay_tian 2019-06-26 17:20 評論0 收藏0
vue+socket.io+express+mongodb 實現簡易多房間在線群聊

摘要：項目簡介主要是通過做一個多人在線多房間群聊的小項目來練手全棧技術的結合運用。編譯運行開啟服務，新建命令行窗口啟動服務端，新建命令行窗口啟動前端頁面然后在瀏覽器多個窗口打開，注冊不同賬號并登錄即可進行多用戶多房間在線聊天。項目簡介主要是通過做一個多人在線多房間群聊的小項目、來練手全棧技術的結合運用。項目源碼：chat-vue-node 主要技術： vue2全家桶 + socket....

android_c 2019-06-26 17:25 評論0 收藏0
Node +MongoDB 搭建后臺的全過程

摘要：搭建后臺的全過程近期基于搭建前端項目，搭建后臺，遇到了不少問題，總結博客如下，有什么不正確的地方，請大家批評指正是非關系型數據庫。是用來啟動的，是的命令行客戶端。 Node + mongoDB 搭建后臺的全過程近期基于 vue-cil 搭建前端項目， express + mongoose 搭建后臺，遇到了不少問題，總結博客如下，有什么不正確的地方，請大家批評指正^?_?^！ mong...

voidking 2019-06-26 17:47 評論0 收藏0
用一個登錄demo貫穿vue+node+mongoDB前后端分離的開發方式

摘要：一般如果不成功，可以試著看看端口號是否被占用等問題。如下數據庫地址用戶名密碼地址端口號數據庫連接數據庫實例化連接對象連接錯誤連接成功然后再去下創建創建在下創建創建，這個地方的對應數據庫中的最后，我們回到路由的中，使用引入模型。這篇文章記錄一下如何使用vue+node+mongoDB開發出一個登錄的小demo。從而打通前端到后端一整條技能樹。文章會先從介紹后端創建API接口連接mong...

MiracleWong 2019-08-23 12:21 評論0 收藏0
react下express+mongodb入門使用

摘要：個人用的是腳手架創建的用于開發接口注意使用腳手架時，會自帶，如果再次執行安裝了，運行會報錯，此時需要卸載，然后重新安裝就了。個人用的是create-react-app腳手架創建的APP Express:用于開發web接口！！！注意：使用腳手架時，node_modules 會自帶express，如果再次執行 npm install express --save 安裝了 expr...

JohnLui 2019-06-26 17:53 評論0 收藏0