那么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. Mac Item2 设置别名 永久生效

    使用 Item2 终端, 设置 别名的时候, 按照 网上的说法, 是 去 修改 用户目录下的   .bashrc   或者  .bash_profile 这两个文件都可以, 把 alias 写在 这两 ...

  2. 复用$.ajax方式传递参数错误处理

    1.封装后的方法,在 data:inData 传递参数的方式和一般不一样,如果不注意会出现错误. function getDataByJsonP(methName, inData, fn) { $.a ...

  3. JavaScript中操作有些DOM时关于文本节点和元素节点的问题。

    初学JavaScript时候,经常遇到需要操作的内容因为文本节点而使操作更麻烦或者不能达到效果. 例: <ul id="ull">    <li>111&l ...

  4. Day1 MySql安装和基本操作

    数据和数据库 1.数据:客观事物的符号表示. 2.存储介质:纸,光盘,磁盘,u盘,云盘… 3.存储的目的:检索(查询) 存储数据量加大,导致检索的难度升高. 4.数据库(DB:database):按照 ...

  5. GeeTest 极验验证

    前台Html页面 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> ...

  6. git问题整理

    //1.git常用命令,git的branch 2.git的原理 //4.怎么同步到本地仓库,怎么传到远程仓库 //3.git中 rebase 和 merge的区别 5.git的使用,讲一下? //4. ...

  7. 文件操作示例脚本 tcl

    linux 下,经常会对用到文件操作,下面是一个用 tcl 写的文件操作示例脚本: 其中 set f01 [open "fix.tcl" w] 命令表示 打开或者新建一个文件“fi ...

  8. 关于 MFRC522引脚功能图

    MFRC522是属于13.56mhz芯片.另外SI522也是13.56mhz芯片,SI522 PIN对PIN完全兼容MFRC522,并且软硬件兼容,且引脚功能图都是一样的,功能方面比MFRC522多A ...

  9. SEGGER RTT STOP/SLEEP 模式下使用

    1.问题详述, M3/M4内核在sleep 或者 STOP模式 下,内核是不工作的,因此需要 以下 几步操作 第一步: 开启 低功耗模式下,debug 的连接 DBGMCU_Config(DBGMCU ...

  10. 通过yum安装MySQL5.7.4

    1,进入yum的repo文件夹 cd /etc/yum.repos.d 2,mysql主页已经提供了centos等系统需要的rpm文件,直接去主页下载. 我用的centos6.5,选择Red Hat ...