week8- flask 框架学习

来源：互联网发布：淘宝网货源怎么找编辑：程序博客网时间：2024/05/29 12:12

首先上学习资料。

欢迎使用 Flask — Flask 0.10.1 文档

里面包含了virtualenv环境的搭设，Flask框架的安装和全面的介绍。

Flask 教程

Flask快速入门

HTML 参考手册

Web重构

本周任务：利用flask框架写一个网站，要求风格类似于案例。要有与之对应的部分。

任务的目的是让我们能够熟练运用flask框架的部分操作。因此对于网站内容部分我直接在百度百科中照搬过来。。。。。内容不是重点。。。。。

观察这个网站，我需要做到：1.重写网页的样式。2.在网页中显示文字和图片。3.实现文字的超链接。4.对字体的修改。5.完成表格。

1.为了能够在网页中显示我们想要的内容，我们需要编写 html文件：

    <!DOCTYPE html>      <html lang="zh-CN">     <head>     <meta charset="utf-8">     <title></title>     <meta name="keywords" content="hello" />     <meta name="description" content="此网页描述" />     </head>     <body>     <h1>helloworld！</h1>    </body>     </html>

对照 HTML 参考手册中对标签的讲解，我们能够明白这段 html 代码实现的是在网页中显示 helloworld！这些字符。

2.为了在网页中显示图片，我们需要将图片的地址传给html文件，单是html是无法完成这项工作的，我们需要flask框架来辅助它。

# -*- coding: UTF-8 -*-from flask import Flask ,render_template, url_forapp = Flask(__name__)@app.route('/')def index():    return render_template('index.html')@app.route('/pictures/')def index1():    img = url_for('static',filename = 'images/saber (1).jpg')    return render_template('index.html',img = img)if __name__ == '__main__':    app.debug = True    app.run()

首先来解释一下这一段代码的：首先创建了一个Flask对象。Flask类的实例将会成为我们的Web服务器网关接口（Web Service Gateway Interface -- WSGI）应用。

第四行告诉app静态资源和模板的位置。__name__即在当前模板目录中。

第六行设置了路由，‘/’表示根路径。并紧接着实现了该路径的方法：利用render_template()方法渲染html模板。

下面是html模板：

    <!DOCTYPE html>      <html lang="zh-CN">     <head>     <meta charset="utf-8">     <title></title>     <meta name="keywords" content="关键字" />     <meta name="description" content="此网页描述" />     </head>     <body>     <div>    <img src="/static/images/saber (2).jpg" />     <img src="{{img}}" />     <div>    </body>     </html>

在这里我们可以知道html代码实现了两张图片的显示。第一张直接写明了路径。而第二张需要通过渲染得到img的含义。

通过url_for()方法我们可以构建代替图片的URL，这样html文件就可以得到图片的地址。函数第一个参数是根目录下的文件夹名，第二个参数是文件夹中的文件名。我们一般将图片（静态文件）都放在static文件夹中。

运行py代码：

显示的是在本机服务器上的地址

通过对比大概可以明白渲染引擎是怎么工作的。这样也就实现了显示图片的操作。

3.HTML标签<a> 定义超链接,它的属性href指向链接的目标。

例如：

<a href="http://www.w3school.com.cn">W3School</a>

这句代码是是将“W3School”连接到了地址 http://www.w3school.com.cn/tags/tag_a.asp 。

4.html中<div></div>标示了段落。在其中<li>标示了列表，<b></b>中的文字会加粗，<i></i>中的文字会变成斜体。

<ul class="introduction">  <li> 阿尔托利亚是不列颠国王尤瑟的孩子，虽然有着成为王的宿命，但她是个女孩，无法继承王位。为了保护年幼的阿尔托利亚，尤瑟把她寄养在了一位贵族骑士那里。<b><i> 魔法师梅林</i>用魔术帮助她隐藏了身份<sup>[2]</sup></b>，同时教授她必要的知识和智慧。<!--<p></p> 普通文本            <b>加粗文本</b> -->  <li> 尤瑟去世后，骑士们希望通过石中剑来选任新国王。一直隐藏身份的阿尔托利亚在众目睽睽下拔出了那柄插在石头上的选王之剑，<b>从此她成为了这个王国的<i>新主人</i><sup>[1]</sup></b> 。</ul>

这一段代码的实现：

</pre><ul class="introduction"><li> 阿尔托利亚是不列颠国王尤瑟的孩子，虽然有着成为王的宿命，但她是个女孩，无法继承王位。为了保护年幼的阿尔托利亚，尤瑟把她寄养在了一位贵族骑士那里。<strong><em> 魔法师梅林</em>用魔术帮助她隐藏了身份<sup>[2]</sup></strong>，同时教授她必要的知识和智慧。  </li><li> 尤瑟去世后，骑士们希望通过石中剑来选任新国王。一直隐藏身份的阿尔托利亚在众目睽睽下拔出了那柄插在石头上的选王之剑，<strong>从此她成为了这个王国的<em>新主人</em><sup>[1]</sup></strong> 。</li></ul></p><p>5.<table></table>标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。</p><p><pre name="code" class="html"><table border="4"><colgroup>    <col width="16%">    <col width="14%">    <col width="14%">    <col width="14%">    <col width="14%">    <col width="14%">    <col width="14%"></colgroup><thead><tr><th bgcolor = "#CCCCCC">Master</th><th bgcolor = "#CCCCCC">力量</th><th bgcolor = "#CCCCCC">耐久</th><th bgcolor = "#CCCCCC">敏捷</th><th bgcolor = "#CCCCCC">魔力</th><th bgcolor = "#CCCCCC">幸运</th><th bgcolor = "#CCCCCC">宝具</th></tr><tr><td  bgcolor = "#CCCCCC" width="70" align="left" valign="center"><div class="para">卫宫士郎</div></td><td bgcolor = "#CCCCCC" width="70" align="left" valign="center"><div class="para">B</div></td><td bgcolor = "#CCCCCC" width="70" align="left" valign="center"><div class="para">C</div></td><td bgcolor = "#CCCCCC" width="70" align="left" valign="center"><div class="para">C</div></td><td bgcolor = "#CCCCCC" width="70" align="left" valign="center"><div class="para">B</div></td><td bgcolor = "#CCCCCC" width="71" align="left" valign="center"><div class="para">B</div></td><td bgcolor = "#CCCCCC" width="71" align="left" valign="center"><div class="para">C<sup>[1]</sup></div></td></tr><tr><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">远坂凛</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">A</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">B</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">B</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">A</div></td><td  bgcolor = "#CCCCCC"width="71" align="left" valign="center"><div class="para">A+</div></td><td  bgcolor = "#CCCCCC"width="71" align="left" valign="center"><div class="para">A++<sup>[1]</sup></div></td></tr><tr><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">卫宫切嗣</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">B</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">A</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">A</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">A</div></td><td  bgcolor = "#CCCCCC"width="71" align="left" valign="center"><div class="para">D</div></td><td  bgcolor = "#CCCCCC"width="71" align="left" valign="center"><div class="para">A++</div></td></tr><tr><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">间桐樱</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">A</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">A</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">D</div></td><td  bgcolor = "#CCCCCC"width="70" align="left" valign="center"><div class="para">A++</div></td><td  bgcolor = "#CCCCCC"width="71" align="left" valign="center"><div class="para">C</div></td><td  bgcolor = "#CCCCCC"width="71" align="left" valign="center"><div class="para">A++</div></td></tr></table>

这一段代码的实现：

Master力量耐久敏捷魔力幸运宝具

卫宫士郎

C^[1]

远坂凛

A+

A++^[1]

卫宫切嗣

A++

间桐樱

A++

5.网页的样式我借用了案例的样式。通过<link>嵌入样式：

<link href="/static/blei.css" rel="stylesheet" type="text/css">

掌握这些方法就能把网页模仿的和案例比较相像了。

网站部分截图：

其他几页都是叙述性的文字没有什么实际意义我就不截图了。

代码更新在了我的github上。请大家多多指导~

0 0