标签：__ vue postgres flask list app db import model

配置数据库

• 新建exts.py import数据库

  from flask_sqlalchemy import SQLAlchemy
  
  db = SQLAlchemy()
  

• 在app.py中配置数据库

  from exts import db
  
  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)
  

• 新建models.py, 创建数据库模型

  from exts import db
  
  
  class Books(db.Model):
      __tablename__ = 'books'
      id = db.Column(db.Integer, primary_key=True)
      name = db.Column(db.String(64))
      author = db.Column(db.String(64), nullable=False)
      category = db.Column(db.String(64), nullable=False)
      def __repr__(self):
          return '<Book %r>' % self.name
  

• 新建create_db.py

  from exts import db
  from models import Books
  
  db.create_all()
  

• 执行create_db.py python create_db.py, 在数据库中创建数据表
  

例子

• app.py

  import json
  from models import *
  from flask import Flask
  from flask_cors import *
  from exts import db
  
  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()
      books = query2dict(books)
      return json.dumps(books)
  

• index.vue

  <template>
      <div>
          <div>
              <el-row>
                  <el-button type="primary" icon="el-icon-edit" circle />
                  <el-button type="primary" icon="el-icon-delete" circle />
                  <el-button type="primary" icon="el-icon-document-add" circle />
              </el-row>
          </div>
          <div>
          <el-table
              :key="itemKey"
              :data="tableData"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              border
              :row-style="{height: '50px'}"
              @selection-change="handleSelectionChange"
              >
              <el-table-column type="selection" width="40" />
              <el-table-column prop="id" label="ID" align="center" />
              <el-table-column prop="name" label="Name" align="center" />
              <el-table-column prop="author" label="Author" align="center" />
              <el-table-column prop="category" label="Category" align="center" />
              </el-table>
          </div>
      </div>
  </template>
  <script>
  export default {
      data () {
          return {
              itemKey: 0,
              tableData: [],
              selectData: []
          }
      },
      created () {
          this.getData()
      },
      methods: {
          getData () {
              this.axios.post(
                  'http://127.0.0.1:5000/'
              ).then(res => {
                  const data = res.data
                  data.forEach((item) => {
                      this.tableData.push(item)
                      this.itemKey = Math.random()
                  })
              })
          },
          handleSelectionChange (val) {
              this.selectedData = val
          }
      }
  }
  </script>
  

• 效果
  

标签：__,vue,postgres,flask,list,app,db,import,model
来源： https://blog.csdn.net/u013269668/article/details/121881039

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。