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;

這個文件會在app.js中引入，上面app.js中代碼已引入

三、mongodb數據持久化

為了方便我們查詢和觀看效果，可以先在數據庫中插入一條數據

1、下載 mongodb https://www.mongodb.com/download-center/community 具體安裝可以自行去百度，這里不做解釋

2、下載mongo可視化工具 https://studio3t.com/download/ 數據庫客戶端,可以方便的操作數據庫

3、開啟數據庫：在安裝目錄下 執行命令mongod -dbpath "自己的安裝目錄/data" 

4、在安裝目錄下的lib中執行命令 mongo  

show dbs 查看數據庫

use test 創建數據庫

db.myhero.insert({

//根據創建的數據模型 插入的數據

//myhero是一個集合

})

插入數據后年可以在studio3t中直接查看  。       

更多的數據庫操作命令可以百度去查，這里不做過多擴展。

四、執行程序

開啟數據庫=》開啟服務器=》開啟vue項目

可以在vue頁面調用接口操作數據了

===========================================================================

結束   大家有好的見解可以提出來，不懂的地方可以提問，謝謝！