vue+express+mongodb 实现增删改查

Posted 2020-11-27 JS-Feng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+express+mongodb 实现增删改查相关的知识，希望对你有一定的参考价值。

一、创建一个vue项目

用脚手架vue-cli搭建一个项目，数据请求用axios方式，写几个按钮用来调接口（vue这块不做多解释，不懂的可以先去官网学习vue-cli：https://cli.vuejs.org/zh/guide/cli-service.html axios：http://www.axios-js.com/）

注意点：在用axios调用接口的时候会产生跨域，所以有配置下：在vue项目根目录下打开config文件夹下的index.js文件中proxyTable中加入配置内容

proxyTable: {
\'/api\':{
target:\'http://localhost:3000\',
changeOrigin:true,
}
},

这里我服务器开的是3000端口，而vue默认是8080端口

二、express接口

1、新创建一个文件夹，用于放服务端代码，这里文件夹名字一mongodb为例

在根目录下打开命令窗口（默认都安装了node）npm init -y 初始化，然后下载依赖包

express模块用来创建路由
mongoose模块用来创建数据库，连接数据库
body-parser模块用来对post请求的请求体进行解析

npm install express body-parser mongoose --save

2、在根目录下创建app.js文件，用来启动express服务

//app.js文件

//引入刚才定义的hero路由
const hero = require(\'./router/hero\')
//1.引入express模块
const express = require(\'express\')

//中间介  解析post ，get 登返回的数据
var bodyParser = require(\'body-parser\');

//2.创建app对象
const app = express()
app.use(bodyParser());
app.use(\'/api\',hero)
//定义简单路由
app.use(\'/\',(req,res) => {
  res.send(\'成功\')
})
//定义服务启动端口
app.listen(3000,() => {
    console.log(\'服务器开启成功，端口3000\')
})

在根目录下打开命令窗口输入node app 执行后打印“服务器开启成功，端口号3000”，这代表服务器已开启，浏览器访问 http://localhost:3000/ 页面会显示：成功

3、创建数据模型

在项目根目录建立一个models文件夹，用来存储数据模型，每个模型都是由一个Schema生产，具体的我们不用太在意，如果有兴趣可自行百度。

在models文件夹中创建一个hero.js文件,内容如下

//hero.js文件

//引入mongoose模块
const mongoose = require(\'mongoose\')

//定义数据模型，可以看到，我们下面创建了一个表，表中的数据有name、age、sex等字段，并且这些字段的数据类型也定义了，最后将model导出即可
const heroSchema = mongoose.Schema({
  name :String,
  age : String,
  sex : String,
  address : String,
  dowhat : String,
  imgArr:[],
  favourite:String,
  explain:String
}, { collection: \'myhero\'})
//这里mongoose.Schema最好要写上第二个参数，明确指定到数据库中的哪个表取数据，我这里写了myhreo，目的就是为了以后操作数据要去myhreo表中。
// 这里不写第二个参数的话，后面你会遇到坑。

//导出model模块
const Hero = module.exports = mongoose.model(\'hero\',heroSchema);

4、创建exress增删改查业务代码

在项目根目录创建一个router文件夹，文件夹中创建一个hero.js文件,内容如下,分别为增删改查、添加图片等路由，在逻辑代码中药注意在这里插入了一下内容用来连接mongodb数据库。

// 连接数据库
mongoose.connect("mongodb://localhost:27017/test", { useNewUrlParser: true });
const conn = mongoose.connection;
conn.on("error", () => console.error("连接数据库失败"));

//引入express模块
const express = require("express");
//定义路由级中间件
const router = express.Router();
//引入数据模型模块
const Hero = require("../models/hero");

// mongoose.js
const mongoose = require("mongoose");

// 连接数据库
mongoose.connect("mongodb://localhost:27017/test", { useNewUrlParser: true });
const conn = mongoose.connection;
conn.on("error", () => console.error("连接数据库失败"));

// 查询所有英雄信息路由
router.get("/hero", (req, res) => {
  Hero.find({})
    .sort({ update_at: -1 })
    .then(heros => {
      
      res.json(heros);
    })
    .catch(err => {
      
      res.json(err);
    });
});

router.get("/user", (req, res) => {
  res.end("来啦");
});

// 通过ObjectId查询单个英雄信息路由
router.get("/hero/:id", (req, res) => {
  Hero.findById(req.params.id)
    .then(hero => {
      res.json(hero);
    })
    .catch(err => {
      res.json(err);
    });
});

// 添加一个英雄信息路由
router.post("/hero", (req, res) => {
  //使用Hero model上的create方法储存数据
  
  Hero.create(req.body, (err, hero) => {

    if (err) {
      res.json(err);
    } else {
      console.log(\'1\');
     res.json(hero);
    }
  });

});

//更新一条英雄信息数据路由
router.put("/hero/:id", (req, res) => {
  Hero.findOneAndUpdate(
    { _id: req.params.id },
    {
      $set: {
        name: req.body.name,
        age: req.body.age,
        sex: req.body.sex,
        address: req.body.address,
        dowhat: req.body.dowhat,
        favourite: req.body.favourite,
        explain: req.body.explain
      }
    },
    {
      new: true
    }
  )
    .then(hero => res.json(hero))
    .catch(err => res.json(err));
});

// 添加图片路由
router.put("/addpic/:id", (req, res) => {
  Hero.findOneAndUpdate(
    { _id: req.params.id },
    {
      $push: {
        imgArr: req.body.url
      }
    },
    {
      new: true
    }
  )
    .then(hero => res.json(hero))
    .catch(err => res.json(err));
});

//删除一条英雄信息路由
router.delete("/hero/:id", (req, res) => {
  console.log(req.params.id);
  Hero.findOneAndRemove({
    _id: req.params.id
  })
    .then(hero => res.send(`${hero.title}删除成功`))
    .catch(err => res.json(err));
});

module.exports = router;