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

Posted 2022-12-04 究极死胖兽

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
    ))
,

效果展示

填写表单

提交请求后，新数据显示在表格中

小结

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