Flask系列
不写一行Javascript实现省市区三级联动
几行代码轻松实现图片点击、黏贴、拖拽上传和预览
将机器学习模型部署为REST API
几款基于Flask框架的企业级开源软件
通过GitHub快速部署Flask App 到 Heroku Cloud
在 Heroku 上部署 Python Flask App
用Flask来渲染Markdown
Python开发的Web应用方便分发吗？
今天要给大家介绍一个非常牛的 JavaScript 库,htmx[1]。
htmx 允许你使用属性直接在 HTML 中访问 AJAX、CSS 转换、WebSockets 和服务器发送事件，所以你可以用超文本的简单和强大构建现代用户界面
htmx 很小(~10k min.gz)，无依赖，可扩展，兼容 IE11。
今天就给大家介绍下它的一个应用，不写一行 Javascript 代码，实现省市区 3 级联动的例子，后台可以选择你擅长的，今天我仍然使用 Flask。
index.html
<html> <header> <script src="https://unpkg.com/htmx.org@1.6.1"integrity="sha384-tvG/2mnCFmGQzYC1Oh3qxQ7CkQ9kMzYjWZSNtrRZygHPDDqottzEJsqS4oUVodhW"crossorigin="anonymous"></script> <style> div { border-style: solid; border-color: rgb(3, 3, 122); border-width: 5px; margin-right: 10px; padding-top: 20px; padding-left: 20px; font-size: x-large; height: 60px; width:300px; float: left; } </style> </header> <body> <div> <label>Province</label> <select name="province" hx-get="/cities/" hx-target="#cities" hx-indicator=".htmx-indicator" id ="provinces" hx-trigger="change, load" > {% for province in provinces %} <option value="{{ province.code }}">{{ province.name }}</option> {% endfor %} </select> </div> <div> <label>City</label> <select id="cities" name="city" hx-get="/areas/" hx-trigger="change, htmx:afterSettle" hx-target="#areas" hx-indicator=".htmx-indicator"> {% for city in cities %} <option value="{{ city.code }}">{{ city.name }}</option> {% endfor %} </select> </div> <div> <label>Area</label> <select id="areas"> {% for area in areas %} <option value="{{ area.code }}">{{ area.name }}</option> {% endfor %} </select> </div> </body></html>
从上面的 html 模版代码可以看到，我们需要引入一个 html js 库
<select name="province" hx-get="/cities/" hx-target="#cities" hx-indicator=".htmx-indicator" id ="provinces" hx-trigger="change, load" >
这个 select tag 比 标准 html 多了些内容
hx-get="/cities/" 发送 GET 请求到 /cities/
hx-target="#cities" 刷新目标，本文是刷新 id 为 cities tag.
hx-indicator=".htmx-indicator" 发送 AJAX 请求时，让用户知道后台正在 执行
hx-trigger="change, load" 触发条件， 当内容改变和加载的时候触发
app.py
from flask import Flask, render_template, request,render_template_stringfrom flask_sqlalchemy import SQLAlchemyapp = Flask(__name__)app.config.from_object("config")db = SQLAlchemy(app)@app.route('/')@app.route('/index.html')def index(): provinces = db.session.execute("SELECT * FROM province order by code") return render_template('index.html', provinces=provinces)@app.route('/cities/', methods=['GET'])def get_cities(): templ = """ {%for city in cities %} <option value="{{ city.code }}">{{ city.name }}</option> {% endfor %} """ province = request.args.get("province") cities = db.session.execute("SELECT * FROM city WHERE provinceCode=:province",{"province":province}) return render_template_string(templ, cities=cities)@app.route('/areas/', methods=['GET'])def get_areas(): templ = """ {%for area in areas %} <option value="{{ area.code }}">{{ area.name }}</option> {% endfor %} """ city = request.args.get("city") areas = db.session.execute("SELECT * FROM area WHERE cityCode=:city",{"city":city}) return render_template_string(templ, areas=areas)
后台代码非常简单，没有啥好说的，想要完整代码的可以访问
https://github.com/alitrack/flask
参考资料
[1]
htmx: https://htmx.org/