基於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語句。
'''
Description: sqlalchemy
Author: LJW
Date: 2021-03-19 00:19:27
LastEditTime: 2021-03-19 20:39:56
LastEditors: LJW
'''
from sqlalchemy import create_engine #創建引擎
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker
from sqlalchemy import Column, INTEGER, String
HOST_NAME = 'localhost' # 數據庫所在服務器ip,因為我是本地數據庫所以這里是127.0.0.1
HOST_PORT = '3306' # 數據庫端口
DATABASE_NAME = 'flasktest' # 數據庫名
USER_NAME = 'root' # 鏈接數據的用戶名
PWD = 'root' # 鏈接數據庫的密碼
DB_URI = 'mysql+pymysql://{0}:{1}@{2}:{3}/{4}?charset=utf8'.format(USER_NAME,PWD,HOST_NAME,HOST_PORT,DATABASE_NAME)
engine = create_engine(DB_URI)
Base = declarative_base(engine)
class UserModule(Base):
"""
創建一個用戶的數據模型
"""
__tablename__ = 'flasktest'
id = Column(INTEGER, primary_key=True, autoincrement=True, comment='用戶id')
Goods_name = Column(String(30), nullable=False, unique=True, comment='商品名')
Goods_sales_volume = Column(INTEGER, nullable=False, comment='產量')
Goods_inventory = Column(INTEGER, nullable=False, comment='銷量')
def __repr__(self):
return 'User(id={id}, Goods_name={Goods_name}, Goods_sales_volume={Goods_sales_volume}, Goods_inventory={Goods_inventory})'.format(
id=self.id, Goods_name=self.Goods_name, Goods_sales_volume=self.Goods_sales_volume, Goods_inventory=self.Goods_inventory)
def get_db():
'''
@desc:查詢所有數據記錄
'''
names = []
sales = []
invents = []
Session = sessionmaker(bind=engine)
session = Session()
nameQuery = session.query(UserModule).all()
for rec in nameQuery:
names.append(rec.Goods_name)
sales.append(rec.Goods_sales_volume)
invents.append(rec.Goods_inventory)
return names, sales, invents
def insert_db(Goods_name, Goods_sales_volume, Goods_inventory):
'''
@desc: 增加一行數據
'''
Session = sessionmaker(bind=engine)
session = Session()
info = UserModule(Goods_name=Goods_name, Goods_sales_volume=Goods_sales_volume, Goods_inventory=Goods_inventory)
session.add(info) # 添加單條數據
session.commit()
def del_data(del_name):
'''
@dec: 刪除所有對應的Goods_name
'''
Session = sessionmaker(bind=engine)
session = Session()
session.query(UserModule).filter_by(Goods_name=del_name).delete()
session.commit()
def modify_data(name, Goods_inventory, Goods_sales_volume):
'''
@dec: 修改對應的Goods_name的屬性數據
'''
Session = sessionmaker(bind=engine)
session = Session()
modifyInfo = session.query(UserModule).filter_by(Goods_name=name).first()
modifyInfo.Goods_inventory = Goods_inventory
modifyInfo.Goods_sales_volume = Goods_sales_volume
session.commit() # 提交
app.py
路由模塊，負責提供路由/視圖函數，是連接前端和數據庫的橋梁。這里我們選用的都是POST請求。
json.loads(request.get_data(as_text=True))讀取前端傳遞的json數據@app.route('/searchdb', methods=['POST'])提供路由地址，即請求地址jsonify(res)返回json數據給前端
@app.route('/searchdb', methods=['POST'])
def searchdb():
if request.method == 'POST':
data = json.loads(request.get_data(as_text=True))
print(data)
if data['did'] == 'search':
name, sale, invent = utils.get_db()
#如果查詢出來的是database類的結構，需要轉string，再轉json
res = {
'name': name,
'sales':sale,
'invent':invent
}
print(res)
return jsonify(res)
@app.route('/deletedb', methods=['POST'])
def deldb():
if request.method == 'POST':
data = json.loads(request.get_data(as_text=True))
del_name = data['delname']
utils.del_data(del_name)
res = {
'code':'200'
}
return jsonify(res)
@app.route('/insertdb', methods=['POST'])
def insertdb():
if request.method == 'POST':
data = json.loads(request.get_data(as_text=True))
utils.insert_db(data['name'], data['sales'], data['inventory'])
res = {
'code':'200'
}
return jsonify(res)
@app.route('/modifydb', methods=['POST'])
def modifydb():
if request.method == 'POST':
data = json.loads(request.get_data(as_text=True))
utils.modify_data(data['name'], data['inventory'], data['sales'])
res = {
'code':'200'
}
return jsonify(res)
main.html
除了需要新增input、button按鈕外，還需要新增ajax請求的js代碼，
這里給出修改部分的代碼示例。
$("#modified").click(function() {})是jq代碼，用於觸發button的click事件。$("textarea").val(newcontent);可用於修改textarea文本框內容JSON.stringify(）封裝前端要發送的數據
<script type="text/javascript">
$("#modified").click(function(){
modifyData()
})
function modifyData() {
var names = $('#add1').val();
var sales = $('#add2').val();
var invents = $('#add3').val();
// delete behavior
$.ajax({
cache: false,
type: "POST",
url: "/modifydb",
//JSON封裝發送的數據
data: JSON.stringify({
"name": names,
"sales": sales,
"inventory": invents
}),
async: false,
dataType : "json", // 服務器返回的數據形式, 如果是render_template就是html / 一般是json
success: function(res) {
alert("修改成功!" + res['code']);
// alert(res['code']);
},
error: function(err, type) {
alert("密碼輸錯 或 有BUG導致請求發送失敗咯!");
console.log("ajax錯誤類型：" + type); //查看錯誤類型
console.log(err);
}
});
}
</script>
展示
后記
- web開發的核心是增刪改查，有了這些可以開發簡單的小網頁。但想要進階還需要了解並發、多線程等知識。
- jquery、js應盡快掌握，寫出質量高的代碼
- falsk開發里有時候還會用到jinja模板，目前暫時沒用到，需要關注。