单位外部网站建设价格,购买网站app制作,高报师培训机构排名,河南建设信息网首页我们啰啰嗦嗦讲了4篇#xff0c;都是在调接口#xff0c;啥时候能看到漂亮的页面呢#xff1f;别急#xff0c;今天我们就来实现。 来我们先来实现一个简单的页面。不多说#xff0c;上代码。
app.route(/)
def index():user {username: clannadhh}return html都是在调接口啥时候能看到漂亮的页面呢别急今天我们就来实现。 来我们先来实现一个简单的页面。不多说上代码。
app.route(/)
def index():user {username: clannadhh}return htmlheadtitle首页/title/headbodyh1Hello, user[username] /h1/body/html 如无意外你可以看到下图 但是我接受唔到咯。辣么难看又要写一堆HTML。如果我们需要返回一个含有大量动态内容的大型以及复杂的 HTML 页面的话代码将会有多么复杂啊如果你需要改变你的网站布局在一个大的应用程序该应用程序有几十个视图每一个直接返回HTML这显然 是脑子瓦特了。 这时候我们就要引入模板一说了。那什么是模板呢我们把包含变量和运算逻辑的 HTML 或其他格式的文本叫做模板执行这些变量替换和逻辑计算工作的过程被称为渲染。 Jinjia2模板是Python web编程中主流的模板语言从Django模板发展而来但比Django的模板性能更好。由于Flask是基于Werkzeug和Jiajia2发展而来的因此在安装Flask的时候会自动安装Jinjia2。 Jiajia2语法 Jinjia2 模板由内容、变量、表达式、标签和注释5个部分组成。
普通内容一般是没有特殊含义的内容渲染模板时不对其进行解析。变量在Jinjia2 中是可以定义变量的当模板渲染时变量就会被替换为其对应的值。表达式可以针对变量做一些算术或者逻辑运算。标签用于在渲染模板时进行逻辑控制。注释就像平时的代码注释模板渲染时不对其做解析。实际上渲染前会被删除掉。 我们在template文件夹下创建一个 base.html这个就是我们博客的首页基模板。为了让我们的博客看起来更加大气我们用Bootstrap4来实现前端渲染。这里我们直接用CDN引入即可至于样式什么的你们照搬我的就可以。等有时间自己慢慢研究我们此次的目标要放在Flask上。
!DOCTYPE html
html langzh-cn
headmeta charsetutf-8title{% block title %}我的个人博客{% endblock %}/titlescript srchttps://cdn.bootcss.com/jquery/3.3.1/jquery.min.js/scriptscript srchttps://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js/scriptlink hrefhttps://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css relstylesheet
/head
body
{# 我是一段注释 #}
{% include header.html %} {# 这里导入header.htm #}
{% block content %} {# 表明要加入当前模板中的对应块的内容 #}h1 {# 这里传递了变量username #}你好啊sapn classtext-danger{{ username }}/sapn , 欢迎您~/h1
{% endblock content%}/body
/html 接着再新建一个header.html这个渲染的是我们博客的导航栏会显得好看很多。
nav classnavbar navbar-expand-sm navbar-dark bg-darka classnavbar-brand href# stylefont-size: 1.5rem;我的个人博客/a
/nav 我们接着修改一下app.py。从flask中导入,用于渲染我们的模板
form flask import render_template 接着修改一下我们之前的hello world。
app.route(/)
def index():username clannadhhreturn render_template(base.html, usernameusername) 接着运行访问如无意外我们就可以看到雏形了。 emmmm看起来还不错的样子。到这里你们是不是发现Jinjia2的语法也不难理解嘛。在模板里我们通常要添加一些特殊格式定义的内容下面是常见的三种 {{ ... }} 用来标记变量。像我们上面就用了username。 {% ... %} 用来标记语句比如 if 语句for 语句等。 {# ... #} 用来写注释。 我们再来伪造一些假数据。然后顺便美化一下。 在template目录下新建一个article文件夹接着新建一个list.html。这个才是我们真正的首页的模板它继承于base.html。 接着修改一下hello world。
app.route(/)
def index():username clannadhharticles [{title: 石正丽新研究:需持续监控蝙蝠, detail: 石正丽新研究:需持续监控蝙蝠},{title: 建议增设火车青年票, detail: 建议增设火车青年票},{title: 审议现场人大代表张伯礼哭了, detail: 审议现场人大代表张伯礼哭了},{title: 31省区市首次确诊病例0新增, detail: 31省区市首次确诊病例0新增},{title: 世界首个新冠疫苗人体临床数据, detail: 世界首个新冠疫苗人体临床数据},]return render_template(article/list.html,usernameusername,articlesarticles) 然后是修改list.html的内容。
{% extends base.html %}{% block content %}div classcontainerdiv classrow mt-4div classcol-md-8 col-lg-8 col-sm-8{% for article in articles %}div classcard row mt-4div classcard-headerdiv classmt-0a stylefont-weight: bold; color: black; font-size: 24px;href#{{ article.title }}/a/div/divdiv classcard-body mt-0p stylecolor: black; font-size: 16px;{{ article.detail }}/p/div/div{% endfor %}/div/div/div
{% endblock content %}好了我们跑起来看看效果。emmmm整理效果不错。 今天内容好像有点多。希望大家能够坚持下来跟着我一步步把自己的博客做下来。 觉得可以的话点击下方的打赏按钮呗~
