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

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.js node.js
所属专栏: Web编程实战
上一篇Vue小模块之功能全面的表格(六)实现带有数组输入的表单
下一篇Vue小模块之功能全面的表格(八)表格数据的更新和删除
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭