準(zhǔn)備工作:在pycharm中將flask設(shè)置為debug模式,點(diǎn)擊Flask(app.py),編輯配置,進(jìn)來后將FLASK_DEBUG的勾打上;
上面的弄好之后,再來看一下Flask目錄(如果你要運(yùn)行本文的代碼,目錄要和下圖的目錄一致)
附上3個(gè)html的代碼
(1)register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://localhost:5000/result" method="post">
<p>姓名:<input type="text" name="姓名"></p> {##這里的name屬性,可以在后臺(tái)調(diào)用時(shí)使用#}
<p>年齡:<input type="text" name="年齡"></p>
<p>性別:<input type="text" name="性別"></p>
<p>地址:<input type="text" name="地址"></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
(2)result.html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1.5">
{# <!--[(key,value),(key,value)1````]-->#}字典
{% for key,value in result.items()%} <!--[(key,value),(key,value)1````]-->
<tr>
<td>{{key}}</td>
<td> {{value}}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
(3)index.html代碼
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
歡迎光臨!</br>
現(xiàn)在是{{ var }}!</br>
角色:{{ cha }} </br>
數(shù)字:{{ number }}
{% for person in cha %}
<li>{{ person }}</li>
{% endfor %}
</br>
任務(wù):
<table border="1.5">
{# <!--[(key,value),(key,value)1````]-->#}
{% for key,value in task.items()%} <!--[(key,value),(key,value)1````]-->
<tr>
<td>{{key}}</td>
<td> {{value}}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
下面的程序便是在pycharm中運(yùn)行Flask的python程序
from flask import Flask, render_template, request
import datetime
app = Flask(__name__)
#路由解析,通過用戶訪問的路徑
@app.route('/')
def hello_world(): # put application's code here
return '傻子'
@app.route("/index")
def hello():
return "你是都比嗎"
# 通過用戶訪問路徑,獲取用戶字符串參數(shù)
@app.route("/usr/<name>")
def welcome(name):
return "你是都比嗎,%s" % name
# 通過用戶訪問路徑,獲取用戶整型參數(shù) 此外還有float類型
@app.route("/user/<int:id>")
def welcome2(id):
return "你是,%d 號(hào)會(huì)員" % id
#返回給用戶html文件
@app.route("/")
def index2():
return render_template("index.html")
# 向頁(yè)面?zhèn)鬟f有個(gè)變量
@app.route("/")
def index3():
time = datetime.date.today()
name = ['學(xué)生', '老師', '醫(yī)生']
num = [1, 2, 3]
task = {'zh': 3000, 'wang': 6000}
return render_template("index.html", var=time, cha=name, number=num, task=task)
# 表單提交
@app.route('/test/register')
def register():
return render_template("test/register.html")
@app.route('/result', methods=['POST', 'GET']) #注意:這里用谷歌瀏覽器能運(yùn)行,用edge瀏覽器則不行 'POST', 'GET'必須大寫
def result():
if request.method == 'POST':
result = request.form
return render_template("test/result.html",result = result)
# 路由的路徑不能重復(fù),用戶只能通過唯一路徑訪問函數(shù)
if __name__ == '__main__':
app.run()
運(yùn)行結(jié)果如下:
比如我們要想訪問這個(gè)文件,應(yīng)該在http://127.0.0.1:5000/ 加上文件路徑,所以在谷歌瀏覽器中輸入
http://127.0.0.1:5000//test/register文章來源:http://www.zghlxwxcb.cn/news/detail-487114.html
# 表單提交
@app.route('/test/register') #這里是文件路徑
def register():
return render_template("test/register.html")
運(yùn)行后的結(jié)果如下
然后我們點(diǎn)擊提交,返回如下的一個(gè)頁(yè)面
具體寫代碼的時(shí)候有很多細(xì)節(jié),我把整個(gè)項(xiàng)目文件放到這,可以在這里下載
鏈接: link.文章來源地址http://www.zghlxwxcb.cn/news/detail-487114.html
到了這里,關(guān)于使用pycharm+flask創(chuàng)建一個(gè)html網(wǎng)頁(yè)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!