flask + vue + postgres 前后端分离实例----增删

增加

• 在按钮处增加点击触发函数

    <el-button type="primary" icon="el-icon-document-add" circle @click="addBook"/>

• 增加一个弹框，弹框按钮增加点击触发函数

   <div>
     <el-dialog title="Edit Book" :visible.sync="dialogTabVisible" :before-close="closeDialog" left :append-to-body="true" width="30%">
       <el-form ref="ruleForm" :model="ruleForm" class="right">
         <el-form-item label="ID:" prop="form_id">
           <el-input v-model="ruleForm.form_id" style="width:80%" clearable/>
         </el-form-item>
         <el-form-item label="Name:" prop="form_name">
           <el-input v-model="ruleForm.form_name" style="width:80%" clearable />
         </el-form-item>
         <el-form-item label="Author:" prop="form_author">
           <el-input v-model="ruleForm.form_author" style="width:80%" clearable />
         </el-form-item>
         <el-form-item label="Category:" prop="form_category">
           <el-input v-model="ruleForm.form_category" style="width:80%" clearable />
         </el-form-item>
         <el-form-item>
           <el-button type="success" @click="submitForm">Submit</el-button>
           <el-button type="info" @click="cancelDialog">Cancel</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
   </div>

• 点击显示弹框

   addBook () {
   
     this.dialogTabVisible = true
   },

• 点击提交表单

   submitForm () {
   
      const postData = this.ruleForm
      this.axios.post(
        'http://127.0.0.1:5000/add',
        {
   'hostitem': postData}
      ).then(res => {
   
        this.dialogTabVisible = false
        this.getData()
      })
    },

• 后端修改数据库

    @app.route('/add', methods=["POST"])
    def add_book():
        item = request.json.get('hostitem'