express+mongoose 实现简易后台数据接口

dreambei 发布于2019-06-26 17:21 / 1368人阅读

摘要：之前刚入门并做好了一个简而全的纯全家桶的项目，数据都是本地模拟请求的详情请移步这里为了真正做到数据库的真实存取，于是又开始入门了并以此来为之前的页面写后台数据接口。

之前刚入门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数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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