那么flask这个框架是web开发，那么肯定离不开前端的一些代码，那么python用的web开发框架

　　开发所用的前端模板就是jinja2模板。相对于jinja1比起来性能做到了很大的提升，那么Vue一些原理

　　有很多类似jinja2的东西。就比如 {{ }}，俩者也都用到了，也很实用。那么我们简单来写一个小页面

　　当然，先要起flask服务

代码如下

# -*- encoding: utf-8 -*-
# 网页模板需要导入render_template
from flask import Flask,render_template
# 建立对象
app = Flask(__name__)
app.config.from_pyfile('config.ini')
@app.route('/')
def index():
my_str = "你好世界"
# my_int = 123
# my_list = [4,5,6]
# my_dict = {'name':'小明','age':15}
context = {}
context['my_str'] = my_str
context['my_int'] = 100
context['my_list'] = ['卫生纸','胶条','乱七八糟',78,'再来一个','还是不好看','好乱！']
context['my_dict'] = {'name':'小花','age':15}
# 使用render_template 模块来渲染模板文件，通过第二个参数传递数据变量
# return render_template('day03.html', my_str=my_str, my_int=my_int,my_list=my_list,my_dict=my_dict)
# 推荐使用第二种。用过**引用来将嵌套dict直接传递给模板
return render_template('day03.html',**context)
if __name__ == "__main__":
app.run()
 
　　这简单的写一下，介绍一下。那么我们这里需要配合html来一起使用。注意一点，这里需要建一个文件夹名为 templates 的文件夹，不然在html中导入的话，你会找不到Py文件中所传递的参数，html页面的，代码如下
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>flask网页模板的学习</title>
</head>
<body>
<div>
<!-- 双中括弧是输出。单中括弧是逻辑判断 以后的注释要用{# #} 需要注意的是，这样的注释是在html中的简单注释，我们现在是动态的在传数据形式，那么以后的注释都要统一规范，我只是在我传入数据的时候写了几个简单的注释，下面的之后全是以{# #}来当注释的 小细节要注意，不然错误的话不好找 -->
这是我们第一个网页模板 <br /><br />
<!-- 这里是注释。最基本的模板语法输出一个变量 -->
<!-- {{ my_str + ", 前端页面" }} <br /><br /> -->
<!-- 模板语法可以做简单的运算 -->
{{ my_int + 10 }} <br /><br />
<!-- list的操作，可以引用下表的方式输出list元素 -->
{{ my_list }}<br />
{{ my_list[0] }}<br />
{{ my_list.1 }}<br /><br /><br />
{{ my_dict["name"] }} <br />
{{ my_dict }} <br />
{{ my_dict.age }} <br />
{# 使用{% %} 来定义简单的逻辑控制代码 #}
{% if my_int %}
整型存在
{% else %}
不存在
{# 使用if判断。一定要有endif 用来结束逻辑判断#}
{% endif %}
<ul>
{# 使用for循环来遍历list #}
{% for item in my_list %}
<li>{{ item }}</li>
{# 使用for循环也要用endfor#}
{% endfor %}
</ul>
{# 使用if for 嵌套来实现单双行背景色 #}
　　我这里用的是内联样式，为了更直观，并不是很正规。
<table style="border:1px solid black;padding: 5px;">
{% for item in my_list %}
{% if loop.index % 2 == 0 %}
<tr style="">">
<td>{{ item }}</td>
</tr>
{% else %}
<tr style="">">
<td>{{ item }}</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
</body>
</html>
　　
　　那么简单的页面就基本完成了。  至于详细的会以后再做补充。 还是那句话，业务依据逻辑 ，逻辑推敲代码，代码完成业务！
 
　　

flask中的简单的前端写入的更多相关文章

  1. flask中使用ajax 处理前端请求，每隔一段时间请求不通的接口，结果展示同一页面

    需求: flask中使用ajax 处理前端请求,每隔一段时间请求不通的接口,结果展示同一页面 用到 setTimeout方法,setTimeout(function(){},1000):setTime ...

  2. flask中使用ajax 处理前端请求，每隔一段时间请求一次

    需求: flask中使用ajax 处理前端请求,每隔一段时间请求一次,并展示在页面 使用 setInterval(function(){},1000)方法 结果展示: html:(test.html) ...

  3. flask中使用ajax 处理前端请求 弹框展示

    菜小鱼初次使用 ajax,想前端提交数据,后端处理后,将结果以弹框的形式展示,在网上查看了好多,不停的调试,终于调通了 html: <html> <head></head ...

  4. flask中使用ajax 处理前端请求，结果展示在同一页面，不点击页面不展示

    在同一页面点击按钮,后端处理后展示在同一页面,不点击隐藏该结果:与上一篇大同小异,需要在 html.flask.js微调 效果展示: (未点击查询) (点击查询) html: <html> ...

  5. flask中的response

    1.Response 在flask中你想向前端返回数据,必须是Response的对象,这里和django必须是HttpResponse 对象一样, 主要将返回数据的几种方式 视图函数中return 字 ...

  6. 第三篇 Flask 中的 request

    第三篇 Flask 中的 request   每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前 ...

  7. Flask学习之旅--用 Python + Flask 制作一个简单的验证码系统

    一.写在前面 现在无论大大小小的网站,基本上都会使用验证码,登录的时候要验证,下载的时候要验证,而使用的验证码也从那些简简单单的字符图形验证码“进化”成了需要进行图文识别的验证码.需要拖动滑块的滑动验 ...

  8. 初识Flask框架，以及Flask中的模板语言jinjia2和Flask内置的Session

    一.web框架的对比 首先我们先来看下比较火的web框架 1.Django: 优点:大而全,所有组件都是组织内部开发高度定制化,教科书级别的框架 缺点:大到浪费资源,请求的时候需要的资源较高 2.Fl ...

  9. 用flask开发个人博客（4）—— flask中4种全局变量

    https://blog.csdn.net/hyman_c/article/details/53512109 一  current_app current_app代表当前的flask程序实例,使用时需 ...

随机推荐

  1. 开发一个shopify插件

       开发一个shopify插件,shopify商城可以安装该插件:当用户在商城下单后,插件把订单数据按照指定格式传给disruptsports服务器:   https://help.shopify. ...

  2. iis和apache共用80端口，IIS代理转发apache

    为什么共用80端口应该不用多说了,服务器上程序运行环境有很多套,都想抢用80端口,所以就有了共用80端口的解决方案. 网上很多的教程一般都是设置APACHE使用默认80端口,代理转发IIS的网站,II ...

  3. SC review 5.2 设计可复用软件

    行为子类型与Liskov替换原则 Java 中编译器执行的规则(静态类型检查): • 子类型可以增加方法,但不可删 • 子类型需要实现抽象类型中的所有未实现方法 • 子类型中重写的方法必须有相同或子类 ...

  4. [转] pom.xml 配置详解

    From:http://blog.csdn.net/ithomer/article/details/9332071 Maven是一个项目管理工具,通过pom.xml来实现. pom.xml 配置文件 ...

  5. JAVA 泛型通配符 ? EXTENDS SUPER 的用法

    1. <? extends Hero> ArrayList heroList<? extends Hero> 表示这是一个Hero泛型或者其子类泛型heroList 的泛型可能 ...

  6. Java8新特性 -- Lambda基础语法

    Lambda 表达式的基础语法: Java8引入了一个新的操作符 “->”  该操作符称为箭头操作符或Lambda操作符, 该操作符将Lambda表达式拆分为两部分: 左侧: Lambda表达式 ...

  7. python multiprocessing 使用

    如何在Pool中使用Queue,Stack Overflow的回答,戳这里 其实吧官方文档看一遍应该就大部分都懂了. 需要注意的是:在使用多进程的时候,我们的进程函数的传入参数必须是pickle-ab ...

  8. P2607 [ZJOI2008]骑士

    题目描述 Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火绵延五百里, ...

  9. shell基础--cat命令的使用

    一.cat的常用用法 1.总结 2.实验 (1).非交互式编辑 [root@~_~ day5]# cat > cattest.sh <<STOP > hello > ST ...

  10. [消息传输123]ActiveMQ

    http://www.uml.org.cn/zjjs/201802111.asp https://www.cnblogs.com/cyfonly/p/6380860.html