#3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架（I 第一部）
- 0. 本系列教程
- 1. 准备
- a.python
- b. flask
- c. flask 环境安装
- d. flask 基本文件结构
- 2. 后端实现
- a. flask 基本框架
- b. flask 显示前端页面
- c. flask 给前端传值
- d. flask 接收前端传值
- 3. 前端实现
- a. 分层
- b. 接收参数
- c. 前端给后端传参
- d. 登录页面前端
- 4. 前端+后端的简单组合
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是微框架，比较灵活，适合小型项目。
其他python框架参考点击跳转简书
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():returnif __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_templateapp = 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制作网页 制作登录网页
#3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
- Python番外篇：Python代码生成春联 三种版本
Hello,大家好,我是wangzirui32,今天就是虎年春节了,先祝大家虎虎生威,虎年大吉!愿大家在新的一年里万事如意,心想事成! 文章目录 1. 普通版本 1.1 引入所需模块 1.2 生成春联 ...
- Ember.js 入门指南——番外篇，路由、模板的执行、渲染顺序
2019独角兽企业重金招聘Python工程师标准>>> 在Ember中路由和模板的执行都是有一定顺序的,它们的顺序为:主路由à子路由1à子路由2à子路由3à--.模板渲染的顺序与路由 ...
- 学习笔记（番外篇）——python批量转换图片格式
2019独角兽企业重金招聘Python工程师标准>>> #-*- coding:utf-8 -*- from PIL import Image import os import gl ...
- 人工智能基础（高中版）教材补充和资源分享之番外篇 Cozmo+Python+ROS+AI
ROS Melodic的迷失与救赎::https://blog.csdn.net/column/details/28058.html GitChat::沉迷机器人操作系统的一个理由和四种修仙秘籍 原文 ...
- #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网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码...
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...
最新文章
- 用Python实现坦克大战游戏 | 干货贴
- 网络营销专员表示网络营销中设置不当会影响蜘蛛爬虫对网站抓取
- element.onclick = fun与element onclick=fun()的区别
- AnyChat SDK支持哪些开发语言？
- 关于 varchar2 的最大长度
- Qt for ios / Qt for Android 设置透明状态栏
- 使用google map实现周边搜索的功能_「转」“搜索”的原理，架构，实现，实践，面试不用再怕了...
- 东力减速机电机型号_东力齿轮减速电机的选型
- RabbitMQ使用教程(超详细)
- android 调用onclick事件,在Android上使用onClick()事件时出错
- 关于永洪科技官网被再次冒充事件的详细说明
- 贼好玩！我用Python写了一个AI玩星际争霸2！
- 惠普HP DeskJet Ink Advantage 2777 驱动
- Ceph Calamari安装问题汇总
- Flying Saucer一些问题
- filezilla删除服务器文件,FileZilla的设置FTP服务器
- 17未央，我备一曲离殇
- Eclipse 报错The method xxx of type must override a superclass method、Description Resource Path Locati
- 初学JavaScript之猜测new操作符的原理
- spring 定义自己的标签 学习