1.pip install flask +request 两大库
2.建立templates,放跳转的html
3.flask.py
——3.1创建app
——3.2 准备函数 处理浏览器的请求
——3.3 运行app
from flask import Flask, render_template,request
import pandas as pd
#1.创建app
#2.准备函数 处理浏览器的发送的请求
#3.运行app
app = Flask(__name__)
#@app.route("/")
#demo1传数据给网页
# def index():
# s = "你好zzs!"
# lst = {"a","b","c"}
# return render_template("helloword.html", s=s, lst=lst)
#demo2从网页接收数据
# @app.route("/")
# def index():
# return render_template("login.html")
#
# @app.route("/login",methods=['post'])
# def login():
# username= request.form.get("username")
# password=request.form.get("pwd")
# if username == "zzs" and password == "123":
# return render_template("login.html",msg="登录成功")
# else:
# return render_template("login.html", msg="登录失败")
#demo3 echarts可视化
@app.route('/')
def index():
data=[{'value':123,'name':'坐在'},{'value':456,'name':'阁楼'},{'value':200,'name':'吃'},{'value':354,'name':'芒果'}]
return render_template("visual.html",data=data)
if __name__ == '__main__':
app.run()
4.简单传输 hello.html
```python
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#">{{s}}</a>
<hr/>
{{lst}}
<hr/>
{% for item in lst%}
传送数:{{item}}
{% endfor %}
</body>
</html>
5.简单验证 获取页面数据 login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<body>
<form action="login" method="post">
用户名<input type="text" name="username">
密码<input type="password" name="pwd">
<input type="submit" value="登录">
{{msg}}
</form>
</body>
</html>
6.简单echarts可视化 visual.html
——从echarts网站上看样式、复制样式代码
——sricpt引入相应链接,可从bootcdn中找
——data数据改为自己的。
注意: 去引号可以用 data|tojson
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入echarts-->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
</head>
<body>
echarts展示
<div id="main" style="width: 600px;height: 600px;background: pink">
<script>
var ma = echarts.init(document.getElementById("main"))
//配置echarts
var option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data:{{data|tojson}}
}
]
};
ma.setOption(option)
</script>
</div>
</body>
</html>