#3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架（I 第一部）
0. 本系列教程
#1使用html+css+js制作网站教程 准备
#2使用html+css+js制作网站教程 测试
#3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 番外篇 制作接收php
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
1. 准备
a.python
python在计算机语言不同于非常难学的C语言，非常流行的Java语言，适合初学者的Basic语言，适合网页编程的JavaScript语言等等。它以其代码风格简洁，易学闻名，却也因其的运行效率低下被一些大项目抛弃。其特性使它适合做一些个人小型项目，而不是像c系列的系统。
而本教程主要内容为python作后端，html+js+css做前端，所以不会过于深入python的语法。
推荐python环境搭建使用anacoda
本文使用的版本为3.6.2
b. flask
Flask是一个基于Jinja2和Werkzeug的python微框架，有以下特点：
- 内建的单元测试支持
- 模板使用Jinjia2
- 大量文档
- 客户端会话使用安全cookies
- 开发服务器和调试器
- Restful请求
- 与WSGI 1.0兼容
- 基于unicode
- 大量的扩展
flask是微框架，比较灵活，适合小型项目。
c. flask 环境安装
在命令行中运行
pip install flask
作者是使用vscode编辑，实际上使用任何可以使用任何的编辑器（例记事本）都行
d. flask 基本文件结构
首先要新建文件夹如以下构造
flask-demo(项目总文件夹，名字自取)
–templates(前端部分文件夹)
-run.py(后端文件，名字自取)
-tempcoderunnerfile.py(系统缓存文件)
如图
2. 后端实现
a. flask 基本框架
# coding: utf-8
from flask import Flask,render_template,url_for
app = Flask(__name__)
# 路径对应的执行函数，有路径就对应路径名，没路径就对应index
#如@app.route('/login') 对应def login()
@app.route('/')
def index():
return
if __name__ == '__main__':
app.run(host='127.0.0.1', port='5000', debug=True)#映射
这段代码的作用就是把这个项目映射到127.0.0.1:5000的ip上，不过由于还没有挂网页文件上去，所以看不到什么效果
b. flask 显示前端页面
在flask框架中，使用
render_template('index.html')
可以在用户页面上显示index.html的内容也就是返回index.html
c. flask 给前端传值
想要flask给前端传值，只需要在上面的函数中增加几个参数
render_template('index.html',a=1)
这里给前端也就是index.html，传了参数名为a值为1，可以在前端接收
d. flask 接收前端传值
实现这个功能，要在route和处理函数里面增加，例如前端给后端a=1
app.route('/', methods=['GET','POST'])
def index():
l = request.args.get('a', 0, type=int)
3. 前端实现
a. 分层
在flask 框架中提供了一个小巧简单又方便的把多个文件组合在一起展示的功能，例如：我的全部网页都有一个相同的<head>部分，使用flask框架就可以组合在一起通过在前端插入代码。
index.html
{% extends "head.html" %}
{% block body %}
...
{% endblock %}
head.html
<!doctype html>
<head>
<title>Hi</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
{% block body %}
{% endblock %}
</body>
b. 接收参数
正如我们上面讲的后传前的方法，前端接收后端的参数也十分简单，例如后端传给前端a=1
<h>{{ a }}</h>
这样子就可以在h标签中显示1，此外，flask还提供了在前端中判断参数的方法，例
...
{% if a==1 %}
...
{% endif %}
...
c. 前端给后端传参
这里只能使用post或者get方法，笔者在这推荐jq的ajax异步，例
function sign_up() {
var x = $("#i").val();
if (x != "" && x != " ") {
$.ajax({
type: "GET",
url: "{{ url_for('login') }}",
//url_for是获取路径
data: {
sign_up_name: x
},
dataType: "html",
success: function (data) {
}
})
}
}
d. 登录页面前端
新建一个login.html 文件，里面写上最简单的登录页面
{% extends "head.html" %}
{% block body %}
<h1>sign in</h1>
<input id="u" type="text" />
<buttom onclick="sign_in()">确定</buttom>
<script>
function sign_up() {
var x = $("#i").val();
if (x != "" && x != " ") {
$.ajax({
type: "GET",
url: "{{ url_for('login') }}",
data: {
sign_up_name: x
},
dataType: "html",
success: function (data) {
}
})
}
}
</script>
{% endblock %}
新建一个head.html文件，里面存放标题和引入jq，这对我们以后增加大量页面有帮助
<!doctype html>
<head>
<title>Hi</title>
<!--- 引入新浪的jq--->
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
{% block body %}
{% endblock %}
</body>
4. 前端+后端的简单组合
run.py
from flask import Flask, url_for, request, render_template
app = Flask(__name__)
@app.route('/', methods=['GET'])
def index():
return render_template('index.html',name="xxx")
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5000, debug=True)
templates\head.html
<!doctype html>
<head>
<title>Hi</title>
<!--- 引入新浪的jq--->
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
{% block body %}
{% endblock %}
</body>
templates\index.html
{% extends "head.html" %}
{% block body %}
<h1>Hello {{ name }}!</h1>
{% endblock %}
实践图:
一定要把网页模板文件放在templates目录下，run.py和templates同一目录
访问这个网页要先运行run.py，然后在浏览器输入127.0.0.1:5000
因为作者时间较赶，这个现在还没有任何功能，请期待下一部教程
有问题留言
-END-
#3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)的更多相关文章
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #3使用html+css+js制作网页 番外篇 制作接收php
使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...
- #3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
- #2使用html+css+js制作网站教程 测试
#2使用html+css+js制作网站教程 测试 本系列链接 1 测试 1.1 运行 1.2 审查 1.3 审查技巧 1.4 其他 引言: 编写完代码后就要上机测试代码,获得用户体验,筛选bug 笔者 ...
- #1使用html+css+js制作网站教程 准备
#1使用html+css+js制作网站教程 准备 本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...
- html+css+js实现网页拼图游戏
代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 渗透测试思路 - CTF(番外篇)
渗透测试思路 Another:影子 (主要记录一下平时渗透的一些小流程和一些小经验) CTF(番外篇) 笔者是一个WEB狗,更多的是做一些WEB类型题目,只能怪笔者太菜,哭~~ 前言 本篇 ...
- 《手把手教你》系列技巧篇（三十一）-java+ selenium自动化测试- Actions的相关操作-番外篇（详解教程）
1.简介 上一篇中,宏哥说的宏哥在最后提到网站的反爬虫机制,那么宏哥在自己本地做一个网页,没有那个反爬虫的机制,谷歌浏览器是不是就可以验证成功了,宏哥就想验证一下自己想法,于是写了这一篇文章,另外也是 ...
随机推荐
- 性能测试基础——（MEN）
关于内存在一块其实我并不是很想拿出来说,一般情况下内存这一块都是可优化的,可以通过硬件资源或者调整一些系统或者应用系统的参数配置来进行优化. 很多同僚问到了"内存泄漏"和" ...
- 谈谈 javascript的 call 和 apply用法
定义: ECMAScript规范为所有函数都包含两个方法(这两个方法非继承而来),call和apply,这两个函数都是在特定的作用域中调用函数,能改变函数的作用域,实际上是改变函数体内 this 的值 ...
- 落谷P3041 [USACO12JAN]Video Game G
题目链接 多模式匹配问题,先建 AC 自动机. 套路性的搞个 DP: \(f[i][j]\) 表示前 \(i\) 个字符,当前在 \(AC\) 自动机上的节点是 \(j\) 能匹配到的最多分. 初始化 ...
- Codeforces Edu Round 66 A-E
A. From Hero to Zero 通过取余快速运行第一步即可.由于\(a \% b (a >= b) <= \frac{a}{2}\).所以总复杂度不超过\(O(log_2n)\) ...
- Feign使用注意事项
使用Feign时,为了不写重复代码,需要写feign公共接口方便调用,这时候需要注意以下问题,以发邮件为例 定义公共接口 /** * @author liuyalong * @date 2020/10 ...
- MySQL02-约束
1.DQL查询语句 1.1 排序查询 语法:order by 排序字段1 排序方式1 , 排序字段2 排序方式2... 排序方式: ASC:升序,默认的. DESC:降序. 注意: 如果有多个排序条 ...
- collectd+infludb+grafana实现tomcat JVM监控
前提条件:已安装好java环境,tomcat,influxdb和collectd.本文暂不提供以上内容的安装步骤 系统环境:centos7 原理:开启tomcat的jmx端口,使用collectd的c ...
- Windows单机安装hadoop
版本信息 Hadoop 3.2.0 java version "1.8.0_201" Windows 7专业版,64位 安装过程 jdk安装 下载jdk,解压到目录,D:\Java ...
- WinForm引用ActiveX组件，对Com组件的学习
1.WinForm引用Adobe PDF Reader 工作中写WinForm程序经常会引用第三方的组件,包括引用Com组件,做了一个桌面程序需要展示PDF,看了些其它的开源组件对PDF的兼容性都不是 ...
- Python简单的验证码生成
用python生成简单的四位数验证码: 1 import random 2 3 if __name__ == "__main__": #这句话简单的理解就是,只有在本文件下以下的代 ...