那么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. Java 的字符串，String、StringBuffer、StringBuilder 有什么区别？

    String 是 Java 语言非常基础和重要的类,提供了构造和管理字符串的各种基本逻辑.它是典型的 Immutable 类,被声明成为 final class,所有属性也都是 final 的.也由于 ...

  2. Codeforces gym 101343 J.Husam and the Broken Present 2【状压dp】

     2017 JUST Programming Contest 2.0 题目链接:Codeforces gym 101343 J.Husam and the Broken Present 2 J. Hu ...

  3. PHP开发者应了解的24个库

    @PHP开发者应了解的24个库 本文由 伯乐在线 - 贾朝藤 翻译.未经许可,禁止转载!英文出处:tutorialzine.欢迎加入翻译组. 作为一个PHP开发者,现在是一个令人激动的时刻.每天有许许 ...

  4. SharePoint 改动passwordWeb Part部署方案

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u012025054/article/details/31773231 SharePoint 改动pa ...

  5. [JSOI2016]扭动的回文串

    题目 非常板子了 看到求什么最长的回文,我们就想到枚举回文中心的方法 首先对于这个回文串只包含在一个串内的情况,我们随便一搞就可以了,大概\(Manacher\)一下就没有了 对于那种扭动的回文串,我 ...

  6. Robot Framework自动化测试---Selenium API

    一.浏览器驱动 通过不同的浏览器执行脚本. Open Browser Htpp://www.xxx.com chrome 浏览器对应的关键字: firefox FireFox ff internete ...

  7. JavaScript里的创建对象（一）

    一.序 面向对象有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.ECMA-262把对象定义为“无序属性的集合,其属性可以包含基本值.对象或者函数”. 使用Obje ...

  8. 国行ME860刷MIUI3.9.27

    刷机前: 系统版本:45.2.3.ME860.ChinaRetail.en.CN Android版本:2.3.4 基带版本:BP_N_01.38.00R WEBtop版本:WT_1.2.0-144_8 ...

  9. 在 .NET Core项目中使用UEditor图片、文件上传服务

    在.NET Framework中使用UEditor时,只需要将UEditor提供的后端服务,部署为一个子程序,即可直接使用文件上传相关的服务,但是UEditor官方并未提供.Net Core的项目,并 ...

  10. oracle 序列 视图 索引 同义词

    序列 Oracle 12C 之后,Oracle 之中提供的是一种手工的自动增长列控制,而这样的控制在 Oracle 之中使用序列(对象)完成. 序列的创建: CREATE SEQUENCE 序列名称 ...