189 8069 5689

webpack4+express+mongodb+vue怎么实现增删改查的示例

这篇文章主要介绍webpack4+express+MongoDB+vue怎么实现增删改查的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联公司致力于互联网品牌建设与网络营销,包括成都网站建设、成都做网站、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。成都创新互联公司为不同类型的客户提供良好的互联网应用定制及解决方案,成都创新互联公司核心团队10年专注互联网开发,积累了丰富的网站经验,为广大企业客户提供一站式企业网站建设服务,在网站建设行业内树立了良好口碑。

什么是go

go是golang的简称,golang 是Google开发的一种静态强类型、编译型、并发型,并具有垃圾回收功能的编程语言,其语法与 C语言相近,但并不包括如枚举、异常处理、继承、泛型、断言、虚函数等功能。

在讲解之前,我们先来看看效果如下所示:

1)整个页面的效果如下:

webpack4+express+mongodb+vue怎么实现增删改查的示例

2) 新增数据效果如下:

webpack4+express+mongodb+vue怎么实现增删改查的示例

3) 新增成功如下:

webpack4+express+mongodb+vue怎么实现增删改查的示例

4) 编辑数据效果如下:

webpack4+express+mongodb+vue怎么实现增删改查的示例

5) 编辑成功效果如下:

webpack4+express+mongodb+vue怎么实现增删改查的示例

6) 删除数据效果如下:

webpack4+express+mongodb+vue怎么实现增删改查的示例

7) 删除成功效果如下:

webpack4+express+mongodb+vue怎么实现增删改查的示例

8) 查询效果如下:

webpack4+express+mongodb+vue怎么实现增删改查的示例

如上的效果,下面我们还是和之前一样,先看看我们整个项目的架构如下所示:

### 目录结构如下:
demo1          # 工程名
| |--- dist        # 打包后生成的目录文件    
| |--- node_modules      # 所有的依赖包
| |----database       # 数据库相关的文件目录
| | |---db.js        # mongoose类库的数据库连接操作
| | |---user.js       # Schema 创建模型
| | |---addAndDelete.js     # 增删改查操作
| |--- app
| | |---index
| | | |-- views       # 存放所有vue页面文件
| | | | |-- list.vue      # 列表数据
| | | | |-- 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转码文件
| |--- app.js        # express入口文件

如上目录架构是我现在整个项目的架构图,其中database目录下存放 db.js ,该文件最主要是使用 mongoose 数据库连接操作,user.js 文件是创建一个Schema模型,也可以理解为表结构,addAndDelete.js 文件内部实现增删改查操作。

先在本地把数据库搭建起来后,再慢慢学习哦,我这边文章实现 vue+mongodb 实现增删改查也是基于上面这些文章的基础之上来进行的,特别是居于这篇 使用Mongoose类库实现简单的增删改查

( https://www.jb51.net/article/150381.htm) 来进行的,增删改查操作及使用Schema 创建模型 都是居于这篇文章的基础之上再进行使用vue来重构下的。本篇文章也是依赖于饿了么vue组件进行开发的。

先来分别讲下代码结构吧:

1)使用express创建服务器

首先我们在项目的根目录新建app.js, 该app.js 主要实现的功能是 启动 3001端口的服务器,并且使用 bodyParser进行解析数据,如下代码:

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

// 创建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 即可创建一个 http://127.0.0.1:3001 的服务器页面了。

2)数据库连接

在database/db.js 链接 mongodb://localhost:27017/dataDb 数据库。使用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)创建数据模型

在database/user.js 中使用 Schema创建一个模型,也就是说上面的 dataDb是数据库名称,这边使用schema创建的模型就是表结构的字段,有如下 name, age, sex 三个字段,代码如下所示:

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

// 创建一个模型
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)实现增删改查路由接口

如下所有的增删改查的代码如下(如果代码看不懂的话,还是返回看这篇文章即可: https://www.jb51.net/article/150381.htm):

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

const router = express.Router();

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

// 新增一条数据 接口为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': '新增成功' });
 }
 });
});

// 查询数据 
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);
 }
 });
});

// 根据 _id 删除数据
router.post('/del', (req, res) => {
 const id = req.body.id;
 // 根据自动分配的 _id 进行删除
 const whereid = { '_id': id };
 User.remove(whereid, (err, docs) => {
 if (err) {
  res.send({ 'code': 1, 'errorMsg': '删除失败' });
 } else {
  res.send(docs);
 }
 })
});

// 更新数据
router.post('/update', (req, res) => {
 console.log(req.body)
 // 需要更新的数据
 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%


  
  
 
                      
                 
                                        取 消   确 定                                                                                       取 消   确 定          
是否确认删除?
     取 消   确 定     
   export default {  data() {   return {    formLabelWidth: '120px',   name: '',   age: '',   sex: '',   options2: [    {    value: '1',    label: '男'    }, {    value: '2',    label: '女'    }   ],   tableData: [],   // 新增页面   add: {    name: '',    age: '',    sex: ''   },   // 修改页面   update: {    name: '',    age: '',    sex: ''   },   dialogVisible: false,   dialogVisible2: false,   dialogVisible3: false,   row: null,   _id: ''   }  },  created() {   this.query();  },  methods: {   setData(datas) {   if (datas.length > 0) {    for (let i = 0; i < datas.length; i++) {    if (datas[i].sex * 1 === 1) {     this.$set(datas[i], 'sex', '男');    } else if (datas[i].sex * 1 === 2) {     this.$set(datas[i], 'sex', '女');    }    }   }   return datas;   },   // 查询数据   query(isquery) {   const obj = {    name: this.name,    age: this.age,    sex: this.sex   };   this.$http.post('/api/query', obj).then((res) => {    if (res.ok) {    this.tableData = res.body ? this.setData(res.body) : [];    if (isquery) {     this.$message({     message: '查询成功',     type: 'success'     });    }    } else {    if (isquery) {     this.$message({     message: '查询失败',     type: 'warning'     });    }    this.tableData = [];    }   });   },   newAdd() {   this.dialogVisible = true;   },   editFunc(row) {   this.dialogVisible2 = true;   this._id = row._id;   this.$set(this.$data.update, 'name', row.name);   this.$set(this.$data.update, 'age', row.age);   this.$set(this.$data.update, 'sex', row.sex);   this.row = row;   },   delFunc(row) {   this.dialogVisible3 = true;   console.log(row);   this.row = row;   },   // 编辑页面提交   editConfirm() {   const id = this._id,    name = this.update.name,    age = this.update.age,    sex = this.update.sex;   const obj = {    id: id,    name: name,    age: age,    sex: sex   };   this.$http.post('/api/update', obj).then((res) => {    if (res.ok) {    // 删除成功    this.$message({     message: '更新成功',     type: 'success'    });    // 重新请求下查询    this.query(false);    } else {    // 删除成功    this.$message({     message: '更新失败',     type: 'success'    });    }    this.dialogVisible2 = false;   });   },   // 删除提交   delConfirm() {   const obj = {    'id': this.row._id   };   this.$http.post('/api/del', obj).then((res) => {    console.log(res.body)    if (res.body.ok) {    // 删除成功    this.$message({     message: '删除成功',     type: 'success'    });    // 成功后,触发重新查询下数据     this.query();    } else {    // 删除失败    this.$message({     message: res.body.errorMsg,     type: 'warning'    });    }    this.dialogVisible3 = false;   });   },   // 新增提交   addConfirm() {   // 新增的时候,姓名,年龄,性别 不能为空,这里就不判断了。。。   const obj = {    name: this.add.name,    age: this.add.age,    sex: this.add.sex   };   this.$http.post('/api/add', obj).then((res) => {    console.log(111);    console.log(res);    if (res.body.code === 0) {    this.$message({     message: '新增成功',     type: 'success'    });    // 成功后,触发重新查询下数据     this.query();    } else {    this.$message({     message: res.body.errorMsg,     type: 'warning'    });    }    this.dialogVisible = false;   });   }  }  }

6. 解决跨域问题,及接口如何访问的?

首先我们是使用express启动的是 http://127.0.0.1:3001 服务器的,但是在我们的webpack中使用的是8081端口的,也就是说页面访问的是http://127.0.0.1:8081/ 这样访问的话,因此肯定会存在接口跨域问题的,因此我们需要在webpack中使用 devServer.proxy 配置项配置一下,如下代码配置:

module.exports = {
 devServer: {
 port: 8081,
 // host: '0.0.0.0',
 headers: {
  'X-foo': '112233'
 },
 inline: true,
 overlay: true,
 stats: 'errors-only',
 proxy: {
  '/api': {
  target: 'http://127.0.0.1:3001',
  changeOrigin: true // 是否跨域
  }
 }
 },
}

因为我list.vue页面所有的请求都是类似于这样请求的 this.$http.post('/api/query', obj); 因此当我使用 /api/query请求的话,它会被代理到 http://127.0.0.1:3001/api/query, 这样就可以解决跨域的问题了,同时我们在项目的根目录中的 将路由应用到 app.js 中,有如下这句代码:

const addAndDelete = require('./database/addAndDelete');
app.use('/api', addAndDelete);

当请求http://127.0.0.1:3001/api/query的时候,会自动使用 addAndDelete.js 中的 /query的接口方法。

以上是“webpack4+express+mongodb+vue怎么实现增删改查的示例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


文章名称:webpack4+express+mongodb+vue怎么实现增删改查的示例
文章网址:http://cdxtjz.cn/article/gpcocd.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。