一 Flask框架介绍
Flask是一个使用 Python 编写的轻量级 Web 应用框架。Flask也被称为 “microframework” ,因为它使用简单的核心,用 extension 增加其他功能。Flask没有默认使用的数据库、窗体验证工具。
Flask的app.py入门程序
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
if __name__ == "__main__":
app.run()
点击链接
二 Flask常用模板
https://blog.csdn.net/yang9520/article/details/79740374 (render_template)
https://segmentfault.com/a/1190000007605055 (request)
三 准备工作
在python中建立工程(包括一中的文件app.py文件)
创建templates,static文件夹(导入jQuery)
配置python虚拟环境,pip安装flask框架
四 SQlite数据库
下载sqlite创建my_plan.db文件(在命令行创建,然后复制到项目目录)参见下载安装教程
五 前端实现
简单的入门也可以参考 参考这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my_page_PengHui Liu</title>
<script type="text/javascript" src="/static/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function submitform(form)
{
if(document.getElementById("class").value==""||document.getElementById("content").value==""||document.getElementById("measure").value=="")
{
alert("请确保已经添加所有必填项目!");
}
$(document).ready(function () {
var element = new Object();
element.class = document.getElementById("class").value;
element.content = document.getElementById("content").value;
element.measure = document.getElementById("measure").value;
var data = JSON.stringify(element)
$.ajax({
url: "/submitform",
type: "POST",
data: data,
success: function (msg) {
alert(msg.time)
}
})
})
//数据传送之后,清空输入框
document.getElementById("class").value="";
document.getElementById("content").value="";
document.getElementById("measure").value="";
return true;
}
</script>
</head>
<body>
<form id="myForm">
<div id="things_plan">
<h1>2019陛下事宜</h1>
</div>
<div id="content_body">
<h4>添加标签</h4>
<input type="text" id="class" style="height:30px;width:700px;" /><br>
<h4>添加flag</h4>
<input type="text" id="content" style="height:30px;width:700px;" /><br>
<h4>添加奖惩</h4>
<input type="text" id="measure" style="height:30px;width:700px;" /><br>
<h4><input type="Submit" value="提交" onClick="submitform(this.form)"/></h4>
</div>
</form>
</body>
</html>
六 后台实现
from flask import Flask,request,render_template
import json
import sqlite3
database=r'C:\Users\hui\Desktop\my_project\project\my_plan.db'
def connect_db():
return sqlite3.connect(database)
app = Flask(__name__)
@app.route('/')
def hello():
return render_template('my_page.html')
@app.route('/submitform',methods=['post'])
def submitform():
db=connect_db()
cu=db.cursor()
data=request.get_data()
data = json.loads(data.decode("utf-8"))
print(data)
cu.execute(r"insert into my_plan_table Values(" + repr(data['class']) + "," + repr(data['content']) + "," + repr(data['measure']) + ")")
db.commit()
db.close()
return '1'
if __name__== '__main__':
app.run()
七 界面展示
提交前
提交后
提交后清空输入框
python后台显示数据以传回后台
用navicat连接数据库查看是否存入数据库
显示已存储。