我的第一个flask框架

一 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连接数据库查看是否存入数据库

显示已存储。

猜你喜欢

转载自blog.csdn.net/qq_40123329/article/details/86412248