鱼C论坛

 找回密码
 立即注册
查看: 2137|回复: 0

[技术交流] 《FlaskWeb开发:基于Python的Web应用开发实战》第3节

[复制链接]
发表于 2017-7-13 16:23:55 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 落叶飞空 于 2017-7-13 18:58 编辑

基于给自己的网页加上Bootstrap的效果:
1.首先在工作目录下新建一个templates文件夹。
2.在文件夹中新建一个index.html、user.html。
        <1>.index.html中的内容如下:
               
  1. <h1>Hello,World!</h1>
复制代码

        <2>.user.html中的内容如下:
  1. {% extends "bootstrap/base.html" %}
  2. {% block title%}Flasky{%endblock%}
  3. {%block navbar %}
  4. <div class="nvbar navbar-inverse" role="navigation" >
  5.     <div class="container">
  6.         <div class="navbar-header">
  7.             <button type="button" class="navbar-toggle"
  8.                     data-toggle="collapse" data-target=".navbar-collapse">
  9.                 <span class="sr-only">Toggle navigation</span>
  10.                 <span class="icon-bar"></span>
  11.                 <span class="icon-bar"></span>
  12.                 <span class="icon-bar"></span>
  13.             </button>
  14.             <a class="navbar-brand" href="/">Flasky</a>
  15.         </div>
  16.         <div class="navbar-collapse collapse">
  17.             <ul class="nav navbar-nav">
  18.                 <li><a href="/">Home</a></li>
  19.                 <li><a >FishC</a></li>
  20.             </ul>
  21.         </div>

  22.     </div>
  23. </div>
  24. {% endblock%}

  25. {% block content %}
  26. <div class="container">
  27.     <div class="page-header">
  28.         <h1>Hello,{{name}}!</h1>
  29.     </div>
  30. </div>
  31. {% endblock %}
复制代码


3.新建一个名为lesson3.py的文件,内容如下:
               
  1.         from flask import Flask, render_template
  2. from flask_bootstrap import Bootstrap

  3. app = Flask(__name__)
  4. bootstrap = Bootstrap(app)


  5. @app.route('/')
  6. def index():
  7.     return render_template('index.html')


  8. @app.route('/user/<name>')
  9. def user(name):
  10.     return render_template('user.html', name=name)

  11. if __name__ == '__main__':
  12.     app.run(debug=True)
复制代码


4.cmd中运行如下代码:
        python lesson3.py runserver -h 127.0.0.1 -p 80

程序效果如下:
                1111.png


学习内容:
1.Jinjia2模板内容的引用。
      
  1. @app.route('/user/<name>')
  2. def user(name):
  3.     return render_template('user.html', name=name)
复制代码

        上述代码中会将浏览器获得的变量内容传给templates目录下的user.html文件中的{{name}}变量。

2.使用Bootstrap渲染网页。
      
  1. {% extends "bootstrap/base.html" %}
  2. {% block title%}Flasky{%endblock%}
  3. {%block navbar %}
  4. <div class="nvbar navbar-inverse" role="navigation" >
  5.     <div class="container">
  6.         <div class="navbar-header">
  7.             <button type="button" class="navbar-toggle"
  8.                     data-toggle="collapse" data-target=".navbar-collapse">
  9.                 <span class="sr-only">Toggle navigation</span>
  10.                 <span class="icon-bar"></span>
  11.                 <span class="icon-bar"></span>
  12.                 <span class="icon-bar"></span>
  13.             </button>
  14.             <a class="navbar-brand" href="/">Flasky</a>
  15.         </div>
  16.         <div class="navbar-collapse collapse">
  17.             <ul class="nav navbar-nav">
  18.                 <li><a href="/">Home</a></li>
  19.                 <li><a >FishC</a></li>
  20.             </ul>
  21.         </div>

  22.     </div>
  23. </div>
  24. {% endblock%}

  25. {% block content %}
  26. <div class="container">
  27.     <div class="page-header">
  28.         <h1>Hello,{{name}}!</h1>
  29.     </div>
  30. </div>
  31. {% endblock %}
复制代码

        <1>.上述代码中,第一行代码的作用是:
                Jinja2 中的extends 指令从Flask-Bootstrap 中导入bootstrap/base.html, 从而实现模板继
承。
        <2>.这段代码的作用是创建导航栏,class中的内容是Bootsrap中的css样式。
  1. {%block navbar %}
  2. <div class="nvbar navbar-inverse" role="navigation" >
  3.     <div class="container">
  4.         <div class="navbar-header">
  5.             <button type="button" class="navbar-toggle"
  6.                     data-toggle="collapse" data-target=".navbar-collapse">
  7.                 <span class="sr-only">Toggle navigation</span>
  8.                 <span class="icon-bar"></span>
  9.                 <span class="icon-bar"></span>
  10.                 <span class="icon-bar"></span>
  11.             </button>
  12.             <a class="navbar-brand" href="/">Flasky</a>
  13.         </div>
  14.         <div class="navbar-collapse collapse">
  15.             <ul class="nav navbar-nav">
  16.                 <li><a href="/">Home</a></li>
  17.                 <li><a >FishC</a></li>
  18.             </ul>
  19.         </div>

  20.     </div>
  21. </div>
  22. {% endblock%}
复制代码

<3>.这段代码是设置网页的主题内容,起重{{name}}变量是通过render_template('user.html', name=name)传入进来的:
  1. {% endblock%}

  2. {% block content %}
  3. <div class="container">
  4.     <div class="page-header">
  5.         <h1>Hello,{{name}}!</h1>
  6.     </div>
  7. </div>
  8. {% endblock %}
复制代码


最后网站效果可以通过下列地址查看(手机和电脑访问效果不一样哦!):
http://60.205.181.198/user/Fishc

评分

参与人数 3荣誉 +5 鱼币 +12 贡献 +5 收起 理由
小甲鱼 + 3
康小泡 + 4
不二如是 + 5 + 5 + 5 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 22:55

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表