#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)
python在计算机语言不同于非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网页编程的JavaScript语言等等。它以其代码风格简洁,易学闻名,却也因其的运行效率低下被一些大项目抛弃。其特性使它适合做一些个人小型项目,而不是像c系列的系统。
建议参考网站
廖雪峰的官方网站
菜鸟教程
而本教程主要内容为python作后端,html+js+css做前端,所以不会过于深入python的语法。
推荐python环境搭建使用anacoda
本文使用的版本为3.6.2
Flask是一个基于Jinja2和Werkzeug的python微框架,有以下特点:
其他python框架参考点击跳转简书
flask官网
在命令行中运行
pip install flask
作者是使用vscode编辑,实际上使用任何可以使用任何的编辑器(例记事本)都行
首先要新建文件夹如以下构造
flask-demo(项目总文件夹,名字自取)
–templates(前端部分文件夹)
-run.py(后端文件,名字自取)
-tempcoderunnerfile.py(系统缓存文件)
# 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上,不过由于还没有挂网页文件上去,所以看不到什么效果
在flask框架中,使用
render_template('index.html')
可以在用户页面上显示index.html的内容也就是返回index.html
想要flask给前端传值,只需要在上面的函数中增加几个参数
render_template('index.html',a=1)
这里给前端也就是index.html,传了参数名为a值为1,可以在前端接收
实现这个功能,要在route和处理函数里面增加,例如前端给后端a=1
app.route('/', methods=['GET','POST'])
def index():
l = request.args.get('a', 0, type=int)
在flask 框架中提供了一个小巧简单又方便的把多个文件组合在一起展示的功能,例如:我的全部网页都有一个相同的部分,使用flask框架就可以组合在一起通过在前端插入代码。
index.html
{% extends "head.html" %}
{% block body %}
...
{% endblock %}
head.html
<head>
<title>Hititle>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">script>
head>
<body>
{% block body %}
{% endblock %}
body>
正如我们上面讲的后传前的方法,前端接收后端的参数也十分简单,例如后端传给前端a=1
<h>{{ a }}h>
这样子就可以在h标签中显示1,此外,flask还提供了在前端中判断参数的方法,例
...
{% if a==1 %}
...
{% endif %}
...
这里只能使用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) {
}
})
}
}
新建一个login.html
文件,里面写上最简单的登录页面
{% extends "head.html" %}
{% block body %}
<h1>sign inh1>
<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,这对我们以后增加大量页面有帮助
<head>
<title>Hititle>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">script>
head>
<body>
{% block body %}
{% endblock %}
body>
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
<head>
<title>Hititle>
<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
因为作者时间较赶,这个现在还没有任何功能,请期待下一部教程
有问题留言
本作续集