Vue小模块之功能全面的表格(七)通过POST请求添加数据

原创 2018年04月16日 20:35:10

Vue小模块之功能全面的表格(七)通过POST请求添加数据

技术栈

Vue全家桶:
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose

路由与数据库访问

打开server项目
之前写好的mongoose model: todos.js

var mongoose = require('mongoose')

module.exports = mongoose.model('Todos', new mongoose.Schema({
    name: String,
    author: Array,
    content: String,
    status: Number,
    complteDate: Date
}))

在路由中添加post方法

var router = require('express').Router()
var Todo = require('./todos')

router.route('/').get((req, res) => {
    Todo.find((err, todos) => {
        if (err) console.log(err)
        res.json(todos)
    })
}).post((req, res) => {
    var todo = req.body
    todo.status = 0
    Todo.create(todo, (err, todo) => {
        if (err) console.log(err)
        res.json(todo)
    })
})

module.exports = router

之前已经注册过了/todos的路由

app.use('/todos', require('./router'))

提交POST请求

回到client项目,通过axios提交请求,在收到服务器成功在数据库插入数据的消息后,将新数据加入数组中

addAjax() {
    this.$ajax.post('todos', this.currentTodo).then((res) => {
        if (res.data) this.data.push(res.data)
        this.closeEditDialog()
    }).catch((err) => this.$notify({
        type: 'error',
        message: err
    }))
},

效果展示

填写表单
这里写图片描述

提交请求后,新数据显示在表格中
这里写图片描述

小结

目前已实现了表格数据的增加和查找功能,下个阶段将类似地实现表格数据的更新和删除功能

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/sps900608/article/details/79966070

Vue小模块之功能全面的表格(七)通过POST请求添加数据

Vue小模块之功能全面的表格(七)通过POST请求添加数据 技术栈 Vue全家桶: 前端框架 Vue.js 状态管理 Vuex 动态路由匹配 vue-router http服务 axios...
  • sps900608
  • sps900608
  • 2018-04-16 20:35:10
  • 12

vue开发中,对本地数据地址进行请求

原版配置在dev-server.js中,而新版的vue-webpack-template删除了dev-server.js,用webpack.dev.conf.js代替了,所以需要在webpack.de...
  • weixin_38469425
  • weixin_38469425
  • 2018-03-30 19:58:15
  • 35

vue开发公共模块封装(http)

本文主要分享基于vue的移动端ui框架vux简单封装Axios作为我们项目的公共http模块。代码如下:import Vue from 'vue'; import Axios from 'axios'...
  • qq_33203555
  • qq_33203555
  • 2017-08-16 10:09:10
  • 359

vue-自定义组件传值

​ 项目中,我们经常会遇到自定义组件传值的问题,方法很多种,但是原理很简单,下述文档总结实际项目中使用的传值方式。 父组件传递给子组件某一值,子组件内会修改该值,然后父组件需要获取新值 ​ ...
  • ligang2585116
  • ligang2585116
  • 2017-12-23 16:55:48
  • 4158

VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te...
  • u012207345
  • u012207345
  • 2017-12-05 13:25:25
  • 1790

Vue学习第三天 之http请求 Vue-自带vue-resource插件实现http请求

安装 本地环境安装路由插件vue-resource:    cnpm install vue-resource --save-dev    *没有安装淘宝镜像的可以将 cnpm 替换成 n...
  • u013040887
  • u013040887
  • 2018-02-25 14:42:01
  • 12

vue2使用axios post跳坑,封装成模块

终于将vue-resource替换成axios了,其中像application/x-www-form-urlencoded发送的头信息以及返回的response结果这两点都需要注意一下。 ...
  • yusirxiaer
  • yusirxiaer
  • 2017-09-21 23:17:52
  • 2664

Vue axios处理http请求

axios中文文档    https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   ...
  • sinat_17775997
  • sinat_17775997
  • 2017-07-17 13:31:20
  • 706

vue-router使用总结

想自己动手搭建一个 Discuz 论坛?试试腾讯云上实验室吧 https://cloud.tencent.com/developer/labs 原文链接:https://zhuanlan...
  • sinat_17775997
  • sinat_17775997
  • 2017-08-01 09:01:34
  • 3905
收藏助手
不良信息举报
您举报文章:Vue小模块之功能全面的表格(七)通过POST请求添加数据
举报原因:
原因补充:

(最多只允许输入30个字)