那么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. 循环while 和 continue

    while 1: print("行动吧") # 组成:while 条件: #条件为真,则执行语句块.之后再回去判断条件是否为真,再执行....till条件为假为止. 语句块 # 条 ...

  2. ACE.js自定义提示实现方法

    ACE.js自定义提示实现方法 时间 2015-11-19 00:55:22  wsztrush's blog 原文  http://wsztrush.github.io/编程技术/2015/11/0 ...

  3. jquery与json的结合

    通过AJAX异步减少网络内容传输,而JSON则可以把传输内容缩减到纯数据:然后利用jQuery内置的AJAX功能直接获得JSON格式的数据:在客户端直接绑定到数据控件里面,从而达到最优. 1 2 3 ...

  4. php5.5.* mysqlnd驱动安装

    1.什么是mysqlnd驱动? PHP手册上的描述: MySQL Native Driver is a replacement for the MySQL Client Library (libmys ...

  5. jdk8环境下，添加重复注解的美好体验

    为了实现业务层缓存,定义了几个注解:@Cache.able.@Cache.put.@Cache.del 分别实现对业务方法的 缓存检测.缓存插入 和 缓存清除. public @interface C ...

  6. juquery去除字符串前后的空格

    1.  去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); }

  7. leetcode 39. Combination Sum 、40. Combination Sum II 、216. Combination Sum III

    39. Combination Sum 依旧与subsets问题相似,每次选择这个数是否参加到求和中 因为是可以重复的,所以每次递归还是在i上,如果不能重复,就可以变成i+1 class Soluti ...

  8. 使用Message

    Message按照定义解释就是topic内容的数据类型, 也称之为topic的格式标准. 1.结构与类型 基本的msg包括bool. int8. int16. int32. int64(以及uint) ...

  9. ZOJ 3872 浙江2015年省赛试题

    D - Beauty of Array Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu S ...

  10. ORP计

    ORP计 ORP计通过测量铂或金电极与参比电极之间的电位差,转换成氧化还原电位信号.氧化还原电位测量用电极可与转换放大器组合,转换放大器部分与pH测量用相同.ORP计可用于排水处理(氰基处理.铬酸处理 ...