关于Flask

Flask-logo
Flask是一个使用Python编写的轻量级的Web应用框架。
Flask官网
Flask中文文档(1.1.1)

URL的构建

Flask中提供了 url_for() 函数来进行URL的构建,它接受 函数名(视图函数名) 作为第一个参数,可以接收任意多个 关键参数(对应着变量规则里面的变量),说到这里大家应该明白这个 url_for() 函数的作用了吧?

为什么不在把 URL 写死在模板中,而要使用反转函数 url_for() 动态构建?

  • 反转通常比硬编码 URL 的描述性更好。
  • 你可以只在一个地方改变 URL ,而不用到处乱找。
  • URL 创建会为你处理特殊字符的转义和 Unicode 数据,比较直观。
  • 生产的路径总是绝对路径,可以避免相对路径产生副作用。
  • 如果你的应用是放在 URL 根路径之外的地方(如在 /myapplication 中,不在 / 中), url_for() 会为你妥善处理。

下面展示了一个 url_for() 函数的常用用法:

1
2
url_for('index')  # 没有指定参数
url_for('login', username='JohnWick') # 指定关键字

对于上述代码中的未指定关键字参数的URL构建,就像我们常见的URL一样,比如:https://www.baidu.com。那么对指定关键参数的URL构建则是:https://www.baidu.com/?username=JohnWick,这就是Flask构建URL的方式,很简单对吧?但是一旦你在JavaScript中使用 url_for() 来进行动态构建URL时就会发现文档这样的做法是有问题的。

JavaScript 中使用 url_for()

比如下面一个常见场景:

1
2
3
4
5
$(function(){
$('.card_no').click(function(){
var card_no = $(this).text();
window.location.href = "{{url_for('card_detail', card_no=card_no) }}";
});

想在 url_for 中,传递前面获取的 card_no ,但是在实际运行中是获取不到值,为什么呢?因为在模版渲染的时候将 card_no 变成了字符串 card_no 而不是 js 中的局部变量 card_no

解决办法

最简单的解决办法就是:

1
2
3
4
5
$(function(){
$('.card_no').click(function(){
var card_no = $(this).text();
window.location.href = "{{url_for('card_detail'}}?card_no=" + card_no;
});

:warning: 注意: 如果你采取上述的解决方案,那么你的视图函数的路由就 不能再使用变量规则 来进行获取URL中的变量的值了,否则会导致异常。正确的获取解决方案中的URL中 card_no 的值方式如下:

1
2
3
@app.route('/card_detail')
def card_detail():
card_no = request.args.get('card_no')

这样你就可以愉快的使用 js 来做一些有意思的事情了 😛