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

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

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

   

     
       
         
           
         
         
           
         
         
           
         
         
           
         
         
           Submit
           Cancel
         
       
     
   

• 点击显示弹框

   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')
        book = Books(id=item['form_id'], name=item['form_name'], author=item['form_author'], category=item['form_category'])
        db.session.add(book)
        db.session.commit()
        return json.dumps({'code': 200})

• 效果
  

• 点击调用删除函数

• 删除函数

    deleteBook () {
      if (Array.isArray(this.selectedData) && this.selectedData.length === 0) {
        this.$message({
          message: 'Please select at least one host'
        })
      } else {
        this.$/confirm/i('Do you really want to delete these hosts?', 'Notification', {
          /confirm/iButtonText: '/confirm/i',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          console.log(this.selectedData)
          const postData = this.selectedData
          this.axios.post(
            'http://127.0.0.1:5000/delete',
            {'selected': postData}
          ).then(res => {
            this.selectedData.forEach((select) => {
              this.tableData.forEach((item, i) => {
                if (item.ip === select.ip) {
                  this.tableData.splice(i, 1)
                }
              })
            })
          })
        })
      }
    },

• 后端从数据库中删除数据

    @app.route('/delete', methods=["POST"])
    def delete_book():
        books = request.json.get('selected')
        print(books)
        for book in books:
            b = Books.query.get(book['id'])
            db.session.delete(b)
            db.session.commit()
        return json.dumps({'code': 200})

• 可以选择删除
  

• app.py

    import json
    from models import *
    from flask import Flask
    from flask_cors import *
    from exts import db
    from flask import request

    app = Flask(__name__)
    app.config['SQLALCHEMY_DATAbase_URI'] = 'postgresql://postgres:Password@hostip:5432/postgres'
    app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
    app.config["SQLALCHEMY_ECHO"] = True
    db.init_app(app)
    CORS(app, resources=r'/*')




    def query2dict(model_list):
        if isinstance(model_list, list):
            if isinstance(model_list[0], db.Model):
                lst = []
                for model in model_list:
                    dic = {}
                    for col in model.__table__.columns:
                        dic[col.name] = getattr(model, col.name)
                    lst.append(dic)
                return lst
            else:
                lst = []
                for result in model_list:
                    lst.append([dict(zip(result.keys, r)) for r in result])
                return lst
        else:
            if isinstance(model_list, db.Model):
                dic = {}
                for col in model_list.__table__.columns:
                    dic[col.name] = getattr(model_list, col.name)
                return dic
            else:
                return dict(zip(model_list.keys(), model_list))

    @app.route('/', methods=["POST"])
    def query_books():
        books = Books.query.all()
        if books:
            books = query2dict(books)
        return json.dumps(books)


    @app.route('/add', methods=["POST"])
    def add_book():
        item = request.json.get('hostitem')
        book = Books(id=item['form_id'], name=item['form_name'], author=item['form_author'], category=item['form_category'])
        db.session.add(book)
        db.session.commit()
        return json.dumps({'code': 200})


    @app.route('/delete', methods=["POST"])
    def delete_book():
        books = request.json.get('selected')
        print(books)
        for book in books:
            b = Books.query.get(book['id'])
            db.session.delete(b)
            db.session.commit()
        return json.dumps({'code': 200})

• index.vue