链接静态文件 + flask-moment的本地化时间和日期

来源:互联网 发布:怎样延长淘宝收货时间 编辑:程序博客网 时间:2024/06/05 10:59

各位看官,记得上回说到定义了用户页面及自定义错误界面,接下来博主介绍:
1,页面中添加图片
2,显示时间

准备工作:先下载一张图片在static文件夹下(flask自动创建,与template文件夹类似),取名:cal.jpg

ok,准备工作结束,开始:
1,老规矩,先html文件,在user.html文件中添加:

 <img src="{{ img }}">  #别急,img是在hello.py中设的变量

2,开始添加并修改hello.py 的代码:

@app.route('/user/<name>')def user(name):    img = url_for('static',filename='cal.jpg') #关于url_for函数有两种用法,还有一种参数直接给视图函数名    return render_template('user.html',name = name,img=img)    #注意与上一篇博客进行对比,添加了img变量

3,运行程序,出效果,见下文

———-开始flask-moment

1,还是先html ,这里分两次,一是base.html 文件,原有基础添加代码:

{% block scripts %} {{ super() }}  #注意这里是对bootstrap中的JavaScript进行继承    {{ moment.include_moment() }}  #在hello.py中会引入moment模块{% endblock %}

2,第二次 在user.html 文件中:

<p>The local date and time is {{ moment(current_time).format('LLL') }}</p># 这里的current_time是hello.py的变量    <p>That was {{ moment(current_time).fromNow(refresh = True) }}</p>  #没有对moment().format()与moment().fronNow()深究,先记住吧

3,最后对hello.py 修改,写到此,觉得其实先对hello.py进行修改,在对html文件修改会比较好。:

PS:以下贴的是总的hello.py 代码,包括上一篇博客功能以及本篇:

#_*_ coding:utf-8 _*_from flask import Flask,render_template,url_forfrom flask.ext.bootstrap import Bootstrapfrom flask.ext.moment import Momentfrom datetime import datetime# 1,要添加extend bootstrap 模板,要导入Bootstrap才可以# 2,404中视图函数忘记加return# 3,使用图片,要在user.html 中添加<img src=“{{img}}”>才可以用app = Flask(__name__)bootstrap = Bootstrap(app)moment = Moment(app)@app.route('/user/<name>')def user(name):    img = url_for('static',filename='cal.jpg')    return render_template('user.html',name = name,img=img,current_time=datetime.utcnow())@app.errorhandler(404)def page_not_found(e):    return render_template('404.html'),404  #2,if __name__ == '__main__':    app.run(debug=True)

第三步要点:
1,datetime.utcnow()函数的使用
2,Moment模块的引入,以及在base.html中的moment代码,还有在user.html中的moment代码都值得关注与记忆
3,flask-Moment 模块除了依赖moment.js ,还依赖jquery.js ,只不过在Bootsrap中已经引入jquery.js。

以下是总效果图:这里写图片描述
至此,第二,三章基本结束。

0 0