week8- flask 框架学习

最新推荐文章于 2023-03-29 13:32:45 发布
最新推荐文章于 2023-03-29 13:32:45 发布
阅读量960 收藏
点赞数
分类专栏： python 文章标签： python flask框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/deepexpert_wendongdi/article/details/42026881
版权

首先上学习资料。


欢迎使用 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_for

app = 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力量耐久敏捷魔力幸运宝具
卫宫士郎
B
C
C
B
B
C [1]
远坂凛
A
B
B
A
A+
A++ [1]
卫宫切嗣
B
A
A
A
D
A++
间桐樱
A
A
D
A++
C
A++

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

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


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


网站部分截图：


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


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

闻DD
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ET-week06-member-system-by-flask-mysql
04-06
【标题】"ET-week06-member-system-by-flask-mysql" 涉及的是一个使用Python的Flask框架和MySQL数据库构建的会员管理系统。在这个项目中，开发人员旨在创建一个简单但功能完整的用户注册和登录系统，以实现基本的...
stepik_flask_week_2
03-25
标题 "stepik_flask_week_2" 暗示了这是一个关于使用 Flask 框架进行 Web 开发的课程或项目，可能源自知名的在线学习平台 Stepik。在第二周的学习中，你可能会深入理解 Flask 的核心概念和基本用法。Flask 是一个轻...
WEEX框架（一）框架简介和快速上手体验
zhiming的专栏
02-12 8844
框架简介 Weex，是能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验的框架，并支持iOS、安卓、Web等多端部署，由阿里巴巴研发和维护。 对于移动开发者来说，Weex主要解决了频繁发版和多端研发两大痛点，同时解决了前端语言性能差和显示效果受限的问题。 开发者只需要在自己的APP中嵌入Weex的SDK，就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS，可以像发布网页一样轻松部署在服务端，
七周七种前端框架：前言
言川的博客
10-29 2083
目的前端技术日新月异，几个月不学就会发现落后了好多。而且各种前端框架一年一个花样，简直眼花缭乱。这篇博客是希望对最近两年流行的前端框架做一个基本的介绍，不求深入理解其实现细节，只是为了对他们的主要特点有一个整体认识，理解其思想，而不是死记硬背API。具体要用的时候，还是需要再仔细看文档。所以如果你对其中某些框架已经很熟练了，完全不用再看对应的章节了。哪几种其实并没有想好是哪七种，目前计划是这几个：
前端架构师-week2-脚手架架构设计和框架搭建
最新发布
chengbo_eva的博客
03-29 1175
前端架构师-week2-脚手架架构设计和框架搭建
阿里Weex框架快速体验与环境搭建
曹银飞的专栏
09-30 3万+
目录阿里Weex框架快速体验与环境搭建weex sdk集成到Android工程weex服务项目搭建Weex优雅的“降级”到 HTML51. 前言Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。 对于移动开发者来说，Weex主要解决了频繁发版和多端研发两大痛点，同时解决了前端语言性能差和显示效果受限的问
week——input新属性，显示年周
飞一样的编程
06-06 1044
显示为几年的第几周
flask-week-2-IP：该应用程序将帮助我的父母列出和预览来自各种来源的新闻报道
02-20
标题中的“flask-week-2-IP”是一个项目名称，暗示了这可能是一个基于Flask框架的Web应用程序，用于在第二周的学习过程中构建。Flask是Python编程语言中的一款轻量级Web应用框架，它提供了基础结构来创建动态网页、...
week-5-event-app：FDIS Rookie组的源（已完成）代码第五周：专注于使用Flask-Login进行身份验证
02-18
Flask-Login是Python Flask框架的一个扩展，用于处理Web应用中的用户登录状态管理。在Web应用中，用户身份验证是一个关键的安全环节，它确保只有经过验证的用户才能访问特定的受保护资源。 首先，让我们深入理解...
Unit-2-Build-week-app
03-05
- Flask或Django框架：用Python构建Web应用，Flask轻量级，Django功能全面。 - API接口设计：创建RESTful API，使用HTTP请求方法如GET、POST、PUT和DELETE。 8. **项目组织**： - 文件夹结构：合理规划项目目录...
week13
锦色流年
06-03 205
1.描述软件架构与框架之间的区别与联系 答： 软件架构：软件架构是关于软件系统组织的重要决定的集合，把系统分解为一些部件，描述这些部件的职责及它们之间的协作行为。 软件框架：框架是特定语言和技术的架构应用解决方案 区别： 框架是具体语言和技术相关的，架构是语言无关的。 框架是集成了你的代码和多种第三方解决方案的工具，让你聚焦业务逻辑代码而不是技术实现；架构更宏观，是软件如何设计或组织的...
Weex框架开发 基于windows系统的环境搭建
lixiaotao_1的博客
02-17 742
1 安装依赖node.js 1.1 node 版本 C:\Users\**&gt;node -v v10.15.1 1.2 npm包管理工具版本（当前，node会同时安装npm） C:\Users\**&gt;npm -v 6.4.1 1.3 安装week-toolkit C:\Users\**&gt;npm install -g weex-toolkit WINDOWS下安装wee...
Weex 前端框架介绍
mengzuixilou的专栏
09-28 4977
前言：一个月前曾经就开撸Weex，也没写博客，中间因为某些事情耽搁了。直到前几天重新拾起来，居然有一种不认识的感觉。故而，录下此篇。 什么是Weex阿里天施曾经这样说过：“从技术的发展趋势来看，“前端技术扩展到Native端”这个领域很大，未来可能会更多出色的方案，RN也好、Weex也好，其实只是想把这个领域按照自身的理解做的更好。”
WeexConf 2018干货系列|Weex + Ui
淘系技术
01-24 725
侑夕 阿里巴巴高级前端工程师本文是2018年 Weex Conf 中议题《Weex + Ui》的内容文档整理，主要给大家介绍飞猪 Weex 技术体系从无到有的过程，包括 ...
最流行的android组件大全
weixin_34056162的博客
01-19 373
目录 [−] 工具和教程 UI组件 类库 游戏引擎 Android HTML5应用 Android 是目前最流行的移动操作系统(还需要加之一吗？)。 随着新版本的不断发布， Android的功能也日益强大， 涌现了很多流行的应用程序， 也催生了一大批的优秀的组件。本文试图将目前流行的组件收集起来以供参考， 如果你发现本文还没有列出的组件，欢迎在评论中贴出来，我会定期的更新本文。...
Weex
大强博客
06-02 2583
Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。 快速开始 高性能 Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。 跨平台 你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的...
week8---10月30日 div 布局——常用组件
bluechen10的专栏
10-29 390
一、复习 多行多列布局要点 二、新课 （一）常用页面组件 1、横向导航组件     横向导航可以采用标记直接排列，也可以使用列表项左浮动实现，还可以使用滑动门或下拉菜单实现。 普通横向导航组件滑动门技术下拉菜单导航 2、提示框 鼠标移动到热点文字上时可以出现一个提示框，用户通过提示感兴趣时还可以单击进入相关页面，使用JavaScript响应鼠标事件可以弹出独立的信息对话
Weex 入门这一篇就够了
热门推荐
Star的博客
03-10 5万+
一：Vue.js 了解 Vue.js 环境配置 （1） 安装 nodejs （2） 安装 webpack : npm install webpack -g （3）安装 vue-cli 脚手架：npm install vue-cli -g Vue.js 项目创建 （1）vue init webpack vue-hello ( vue-hello 为项目名称 ) （2）c...
Python -- Flask 框架学习
其实我是C先生--的博客
07-04 261
学习使用Flask框架：基于 Python 3 的 Flask 教程中文版 先mark , 等学习到一定程度，再记录。
G组-基于Flask框架的艺术创作平台-测试报告V1.0.4.2005251
08-08
本测试报告是针对G组基于Flask框架的艺术创作平台的版本V1.0.4.2005251进行的测试总结。在本报告中，我们将对该版本的测试目的、测试计划、测试过程和结果等进行详细描述，以便对该平台进行全面的评估和改进。 一、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值