webpack4+express+mongodb+vue怎么實現(xiàn)增刪改查的示例

這篇文章主要介紹webpack4+express+MongoDB+vue怎么實現(xiàn)增刪改查的示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，包括成都網(wǎng)站建設(shè)、成都做網(wǎng)站、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務、移動互聯(lián)網(wǎng)營銷等。成都創(chuàng)新互聯(lián)公司為不同類型的客戶提供良好的互聯(lián)網(wǎng)應用定制及解決方案，成都創(chuàng)新互聯(lián)公司核心團隊10年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。

什么是go

go是golang的簡稱，golang 是Google開發(fā)的一種靜態(tài)強類型、編譯型、并發(fā)型，并具有垃圾回收功能的編程語言，其語法與 C語言相近，但并不包括如枚舉、異常處理、繼承、泛型、斷言、虛函數(shù)等功能。

在講解之前，我們先來看看效果如下所示：

1）整個頁面的效果如下：

2) 新增數(shù)據(jù)效果如下：

3) 新增成功如下：

4) 編輯數(shù)據(jù)效果如下：

5) 編輯成功效果如下：

6) 刪除數(shù)據(jù)效果如下：

7) 刪除成功效果如下：

8) 查詢效果如下：

如上的效果，下面我們還是和之前一樣，先看看我們整個項目的架構(gòu)如下所示：

### 目錄結(jié)構(gòu)如下：
demo1          # 工程名
| |--- dist        # 打包后生成的目錄文件    
| |--- node_modules      # 所有的依賴包
| |----database       # 數(shù)據(jù)庫相關(guān)的文件目錄
| | |---db.js        # mongoose類庫的數(shù)據(jù)庫連接操作
| | |---user.js       # Schema 創(chuàng)建模型
| | |---addAndDelete.js     # 增刪改查操作
| |--- app
| | |---index
| | | |-- views       # 存放所有vue頁面文件
| | | | |-- list.vue      # 列表數(shù)據(jù)
| | | | |-- index.vue
| | | |-- components      # 存放vue公用的組件
| | | |-- js        # 存放js文件的
| | | |-- css        # 存放css文件
| | | |-- store       # store倉庫
| | | | |--- actions.js
| | | | |--- mutations.js
| | | | |--- state.js
| | | | |--- mutations-types.js
| | | | |--- index.js
| | | | |
| | | |-- app.js       # vue入口配置文件
| | | |-- router.js      # 路由配置文件
| |--- views
| | |-- index.html      # html文件
| |--- webpack.config.js     # webpack配置文件 
| |--- .gitignore 
| |--- README.md
| |--- package.json
| |--- .babelrc       # babel轉(zhuǎn)碼文件
| |--- app.js        # express入口文件

如上目錄架構(gòu)是我現(xiàn)在整個項目的架構(gòu)圖，其中database目錄下存放 db.js ，該文件最主要是使用 mongoose 數(shù)據(jù)庫連接操作，user.js 文件是創(chuàng)建一個Schema模型，也可以理解為表結(jié)構(gòu)，addAndDelete.js 文件內(nèi)部實現(xiàn)增刪改查操作。

先在本地把數(shù)據(jù)庫搭建起來后，再慢慢學習哦，我這邊文章實現(xiàn) vue+mongodb 實現(xiàn)增刪改查也是基于上面這些文章的基礎(chǔ)之上來進行的，特別是居于這篇 使用Mongoose類庫實現(xiàn)簡單的增刪改查

( https://www.jb51.net/article/150381.htm) 來進行的，增刪改查操作及使用Schema 創(chuàng)建模型 都是居于這篇文章的基礎(chǔ)之上再進行使用vue來重構(gòu)下的。本篇文章也是依賴于餓了么vue組件進行開發(fā)的。

先來分別講下代碼結(jié)構(gòu)吧：

1）使用express創(chuàng)建服務器

首先我們在項目的根目錄新建app.js, 該app.js 主要實現(xiàn)的功能是 啟動 3001端口的服務器，并且使用 bodyParser進行解析數(shù)據(jù)，如下代碼：

// 引入express模塊
const express = require('express');

// 創(chuàng)建app對象
const app = express();

const addAndDelete = require('./database/addAndDelete');

const bodyParser = require("body-parser")

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

// 使用
app.use('/api', addAndDelete);

// 定義服務器啟動端口 
app.listen(3001, () => {
 console.log('app listening on port 3001');
});

進入我們項目的根目錄后，運行 node app.js 即可創(chuàng)建一個 http://127.0.0.1:3001 的服務器頁面了。

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

在database/db.js 鏈接 mongodb://localhost:27017/dataDb 數(shù)據(jù)庫。使用mongoose類庫，如果不理解mongoose類庫的話，可以返回來看我這篇文章（https://www.jb51.net/article/150381.htm）如下代碼：

var mongoose = require('mongoose');
var DB_URL = 'mongodb://localhost:27017/dataDb';

/* 鏈接 */
mongoose.connect(DB_URL);

/* 鏈接成功 */
mongoose.connection.on('connected', function() {
 console.log('Mongoose connection open to ' + DB_URL);
});

// 鏈接異常
mongoose.connection.on('error', function(err) {
 console.log('Mongoose connection error:' + err);
});

// 鏈接斷開

mongoose.connection.on('disconnected', function() {
 console.log('Mongoose connection disconnected');
});
module.exports = mongoose;

3）創(chuàng)建數(shù)據(jù)模型

在database/user.js 中使用 Schema創(chuàng)建一個模型，也就是說上面的 dataDb是數(shù)據(jù)庫名稱，這邊使用schema創(chuàng)建的模型就是表結(jié)構(gòu)的字段，有如下 name, age, sex 三個字段，代碼如下所示：

/*
 定義一個user的Schema
*/
const mongoose = require('./db.js');
const Schema = mongoose.Schema;

// 創(chuàng)建一個模型
const UserSchema = new Schema({
 name: { type: String }, // 屬性name，類型為String
 age: { type: Number, default: 30 }, // 屬性age，類型為Number，默認值為30
 sex: { type: String }
});

// 導出model模塊
const User = module.exports = mongoose.model('User', UserSchema);

4）實現(xiàn)增刪改查路由接口

如下所有的增刪改查的代碼如下(如果代碼看不懂的話，還是返回看這篇文章即可： https://www.jb51.net/article/150381.htm):

// 引入express 模塊 
const express = require('express');

const router = express.Router();

// 引入user.js
const User = require('./user');

// 新增一條數(shù)據(jù) 接口為add
router.post('/add', (req, res) => {
 const user = new User({
 name: req.body.name,
 age: req.body.age,
 sex: req.body.sex
 });
 user.save((err, docs) => {
 if (err) {
  res.send({ 'code': 1, 'errorMsg': '新增失敗' });
 } else {
  res.send({ "code": 0, 'message': '新增成功' });
 }
 });
});

// 查詢數(shù)據(jù) 
router.post('/query', (req, res) => {
 const name = req.body.name,
 age = req.body.age,
 sex = req.body.sex;
 const obj = {};
 if (name !== '') {
 obj['name'] = name;
 }
 if (age !== '') {
 obj['age'] = age;
 }
 if (sex !== '') {
 obj['sex'] = sex;
 }
 User.find(obj, (err, docs) => {
 if (err) {
  res.send({ 'code': 1, 'errorMsg': '查詢失敗' });
 } else {
  res.send(docs);
 }
 });
});

// 根據(jù) _id 刪除數(shù)據(jù)
router.post('/del', (req, res) => {
 const id = req.body.id;
 // 根據(jù)自動分配的 _id 進行刪除
 const whereid = { '_id': id };
 User.remove(whereid, (err, docs) => {
 if (err) {
  res.send({ 'code': 1, 'errorMsg': '刪除失敗' });
 } else {
  res.send(docs);
 }
 })
});

// 更新數(shù)據(jù)
router.post('/update', (req, res) => {
 console.log(req.body)
 // 需要更新的數(shù)據(jù)
 const id = req.body.id,
 name = req.body.name,
 age = req.body.age,
 sex = req.body.sex;
 const updateStr = {
 name: name,
 age: age,
 sex: sex
 };
 const ids = {
 _id: id
 };
 console.log(ids);
 User.findByIdAndUpdate(ids, updateStr, (err, docs) => {
 if (err) {
  res.send({ 'code': 1, 'errorMsg': '更新失敗' });
 } else {
  res.send(docs);
 }
 });
});
module.exports = router;

5）搭建vue頁面，如何通過頁面的接口請求？

在app/index/views/list.vue 基本代碼如下(所有的html代碼是基于餓了么vue組件的，最主要一些form表單組件的用法及表格的插件及彈窗的插件)，代碼如下：

 #list-container 
 width 100%