当前位置：Gxlcms > 数据库问题 > 基于python-flask的数据库可视化系统（增删改查）

基于python-flask的数据库可视化系统（增删改查）

时间：2021-07-01 10:21:17 帮助过：28人阅读

基于python-flask的数据库可视化系统（增删改查）

前言

? 前文介绍了登录页面的开发，现在更进一步，介绍一下网页上数据库系统增删改查的实现。核心技术主要是ajax/flask/sqlalchemy。其中ajax负责在前端和后端之间传递数据，flask负责提供路由，sqlalchemy负责操作数据库。

? 本次构建的是一个仓库系统，主键为自增的id字段，其他字段有代表产品名称的Goods_name，代表销量的Goods_sales_volume，代表产量的Goods_inventory。下面剖析一下核心代码，主要由utils.py、app.py、main.html构成。

核心代码

utils.py

? utils.py模块主要负责提供操作数据库的函数，包含了增删改查功能，调用方式是sqlalchemy。sqlalchemy是一种ORM形式的数据库调用模块，其将表当作类去使用，不用输入原生的sql语句。

  1. <code class="language-python">‘‘‘
  2. Description: sqlalchemy
  3. Author: LJW
  4. Date: 2021-03-19 00:19:27
  5. LastEditTime: 2021-03-19 20:39:56
  6. LastEditors: LJW
  7. ‘‘‘
  8. from sqlalchemy import create_engine  #创建引擎
  9. from sqlalchemy.ext.declarative import declarative_base
  10. from sqlalchemy.orm import sessionmaker
  11. from sqlalchemy import Column, INTEGER, String
  12. HOST_NAME = ‘localhost‘     # 数据库所在服务器ip,因为我是本地数据库所以这里是127.0.0.1
  13. HOST_PORT = ‘3306‘          # 数据库端口
  14. DATABASE_NAME = ‘flasktest‘      # 数据库名
  15. USER_NAME = ‘root‘          # 链接数据的用户名
  16. PWD = ‘root‘              # 链接数据库的密码
  17. DB_URI = ‘mysql+pymysql://{0}:{1}@{2}:{3}/{4}?charset=utf8‘.format(USER_NAME,PWD,HOST_NAME,HOST_PORT,DATABASE_NAME)
  18. engine = create_engine(DB_URI)
  19. Base = declarative_base(engine)
  20. class UserModule(Base):
  21.     """
  22.     创建一个用户的数据模型
  23.     """
  24.     __tablename__ = ‘flasktest‘
  25.     id = Column(INTEGER, primary_key=True, autoincrement=True, comment=‘用户id‘)
  26.     Goods_name = Column(String(30), nullable=False, unique=True, comment=‘商品名‘)
  27.     Goods_sales_volume = Column(INTEGER, nullable=False, comment=‘产量‘)
  28.     Goods_inventory = Column(INTEGER, nullable=False, comment=‘销量‘)
  29.     def __repr__(self):
  30.         return ‘User(id={id}, Goods_name={Goods_name}, Goods_sales_volume={Goods_sales_volume}, Goods_inventory={Goods_inventory})‘.format(
  31.             id=self.id, Goods_name=self.Goods_name, Goods_sales_volume=self.Goods_sales_volume, Goods_inventory=self.Goods_inventory)
  32. def get_db():
  33.     ‘‘‘
  34.     @desc:查询所有数据记录
  35.     ‘‘‘
  36.     names = []
  37.     sales = []
  38.     invents = []
  39.     Session = sessionmaker(bind=engine)
  40.     session = Session()  
  41.     
  42.     nameQuery = session.query(UserModule).all()
  43.     for rec in nameQuery:
  44.         names.append(rec.Goods_name)
  45.         sales.append(rec.Goods_sales_volume)
  46.         invents.append(rec.Goods_inventory)
  47.     return names, sales, invents
  48. def insert_db(Goods_name, Goods_sales_volume, Goods_inventory):
  49.     ‘‘‘
  50.     @desc: 增加一行数据
  51.     ‘‘‘
  52.     Session = sessionmaker(bind=engine)
  53.     session = Session() 
  54.     info = UserModule(Goods_name=Goods_name, Goods_sales_volume=Goods_sales_volume, Goods_inventory=Goods_inventory)
  55.     session.add(info)  # 添加单条数据
  56.     session.commit()
  57. def del_data(del_name):
  58.     ‘‘‘
  59.     @dec: 删除所有对应的Goods_name
  60.     ‘‘‘
  61.     Session = sessionmaker(bind=engine)
  62.     session = Session() 
  63.     session.query(UserModule).filter_by(Goods_name=del_name).delete()
  64.     session.commit()  
  65. def modify_data(name, Goods_inventory, Goods_sales_volume):
  66.     ‘‘‘
  67.     @dec: 修改对应的Goods_name的属性数据
  68.     ‘‘‘
  69.     Session = sessionmaker(bind=engine)
  70.     session = Session() 
  71.     modifyInfo = session.query(UserModule).filter_by(Goods_name=name).first()
  72.     modifyInfo.Goods_inventory = Goods_inventory
  73.     modifyInfo.Goods_sales_volume = Goods_sales_volume
  74.     session.commit()  # 提交
  75. </code>
app.py

路由模块，负责提供路由/视图函数，是连接前端和数据库的桥梁。这里我们选用的都是POST请求。

  1. json.loads(request.get_data(as_text=True))读取前端传递的json数据
  2. @app.route(‘/searchdb‘, methods=[‘POST‘])提供路由地址，即请求地址
  3. jsonify(res)返回json数据给前端
  1. <code class="language-python">@app.route(‘/searchdb‘, methods=[‘POST‘])
  2. def searchdb():
  3.     if request.method == ‘POST‘:
  4.         data = json.loads(request.get_data(as_text=True))
  5.         print(data)
  6.         if data[‘did‘] == ‘search‘:
  7.             name, sale, invent = utils.get_db() 
  8.             #如果查询出来的是database类的结构，需要转string，再转json
  9.             res = {
  10.                 ‘name‘: name,
  11.                 ‘sales‘:sale,
  12.                 ‘invent‘:invent
  13.             }
  14.             print(res)
  15.             return jsonify(res)
  16. @app.route(‘/deletedb‘, methods=[‘POST‘])
  17. def deldb():
  18.     if request.method == ‘POST‘:
  19.         data = json.loads(request.get_data(as_text=True))
  20.         del_name = data[‘delname‘]
  21.         utils.del_data(del_name)
  22.         res = {
  23.             ‘code‘:‘200‘
  24.         }
  25.         return jsonify(res)
  26.     
  27. @app.route(‘/insertdb‘, methods=[‘POST‘])
  28. def insertdb():
  29.     if request.method == ‘POST‘:
  30.         data = json.loads(request.get_data(as_text=True))
  31.         utils.insert_db(data[‘name‘], data[‘sales‘], data[‘inventory‘])
  32.         res = {
  33.             ‘code‘:‘200‘
  34.         }
  35.         return jsonify(res)
  36. @app.route(‘/modifydb‘, methods=[‘POST‘])
  37. def modifydb():
  38.     if request.method == ‘POST‘:
  39.         data = json.loads(request.get_data(as_text=True))
  40.         utils.modify_data(data[‘name‘], data[‘inventory‘], data[‘sales‘])
  41.         res = {
  42.             ‘code‘:‘200‘
  43.         }
  44.         return jsonify(res)
  45. </code>
main.html

除了需要新增input、button按钮外，还需要新增ajax请求的js代码，

这里给出修改部分的代码示例。

  1. $("#modified").click(function() {})是jq代码，用于触发button的click事件。
  2. $("textarea").val(newcontent);可用于修改textarea文本框内容
  3. JSON.stringify(）封装前端要发送的数据
  1. <code class="language-javascript">    <script type="text/javascript">
  2.   
  3.         $("#modified").click(function(){
  4.             modifyData()
  5.         })
  6.         function modifyData() {
  7.             var names = $(‘#add1‘).val();
  8.             var sales = $(‘#add2‘).val();
  9.             var invents = $(‘#add3‘).val();
  10.             // delete behavior
  11.             $.ajax({
  12.                 cache: false,
  13.                 type: "POST",
  14.                 url: "/modifydb", 
  15.                 //JSON封装发送的数据
  16.                 data: JSON.stringify({
  17.                     "name": names,
  18.                     "sales": sales,
  19.                     "inventory": invents
  20.                 }),
  21.                 async: false,
  22.                 dataType : "json",  // 服务器返回的数据形式, 如果是render_template就是html / 一般是json
  23.                 success: function(res) {
  24.                     alert("修改成功!" + res[‘code‘]);
  25.                     // alert(res[‘code‘]);
  26.                 },
  27.                 error: function(err, type) {
  28.                     alert("密码输错 或 有BUG导致请求发送失败咯!");
  29.                     console.log("ajax错误类型：" + type); //查看错误类型
  30.                     console.log(err);
  31.                 }
  32.             });
  33.         }
  34.     </script>
  35. </code>

展示

技术图片

后记

  1. web开发的核心是增删改查，有了这些可以开发简单的小网页。但想要进阶还需要了解并发、多线程等知识。
  2. jquery、js应尽快掌握，写出质量高的代码
  3. falsk开发里有时候还会用到jinja模板，目前暂时没用到，需要关注。

基于python-flask的数据库可视化系统（增删改查）

标签：增删改   提交   bug   base   inventory   prim   一个   后端   def   

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！