#3使用html+css+js制作网页番外篇使用python flask 框架 (I)

技术2026-04-20 15

#3使用html+css+js制作网页番外篇使用python flask 框架（I 第一部）

0. 本系列教程1. 准备a.pythonb. flaskc. 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(): 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标签中显示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>  <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

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-

Processed: 0.009, SQL: 9

#3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)