那么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. ZT eoe android4.2 Bluetooth记录01-结构和代码分布

    android4.2 Bluetooth记录01-结构和代码分布 作者:cnhua5更新于 08月21日访问(697)评论(2) 在android4.2中,Google更换了android的蓝牙协议栈 ...

  2. php分享一个n维数组转一维的函数

    好玩,所以做了这么一个函数,来输出唐诗 函数如下 function changearr($arr){ if(count($arr)==count($arr,1)){ return $arr; } el ...

  3. 20165318 2017-2018-2 《Java程序设计》第九周学习总结

    20165318 2017-2018-2 <Java程序设计>第九周学习总结 目录 学习过程遇到的问题及总结 教材学习内容总结 第13章 Java网络编程 代码托管 代码统计 学习过程遇到 ...

  4. Day16 IO流

    流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输特性将流抽象为各种类,方便更直观的进行数据操作. Ja ...

  5. Python：numpy.newaxis

    x1[:,np.newaxis]:增维,转置 从字面上是插入新的维度的意思 demo1: 针对一维的情况 >>> b = np.array([1, 2, 3, 4, 5, 6]) & ...

  6. servlet使用

    一.使用IDEAL创建项目 1) 2) 3) 4) 5) 6) 7) 8) 9) 二.路径介绍: 配置文件: servlet配置文件: package ser_Test; import javax.s ...

  7. Spring AOP源码分析（二）动态A0P自定义标签

    摘要: 本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 之前讲过Spring中的自定义注解,如果声明了自定义的注解,那么就一定 ...

  8. PAT乙级1017

    1017 A除以B (20 分)   本题要求计算 A/B,其中 A 是不超过 1000 位的正整数,B 是 1 位正整数.你需要输出商数 Q 和余数 R,使得 A=B×Q+R 成立. 输入格式: 输 ...

  9. UCOS时钟节拍的讲究

    其实这个值取适中即可,100,200都行,看你的片子是什么,Cortex-M3的片子取200较合适这个值太小,系统调度周期较长,各个任务之间切换较慢,适时性降低,而太大了,中断周期与调试周期接近了,那 ...

  10. SAP函数 CS_WHERE_USED_MAT 反查上层BOM

    遇到用户要根据下层物料反查最上层BOM物料是什么. 试了一下,通过函数 CS_WHERE_USED_MAT 来查询,但是只能往上查询一层,类似事务码CS15的效果.如果要找最上层物料,需要自己写迭代进 ...