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>{{ 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
有问题留言

5. 登录功能准备

a.python中操控mysql

要想做一个登录系统,数据库是必不可少的,本文用了mysql做数据库,相关教程可以自行百度

db = MySQLdb.connect("地址(一般是localhost)", "用户名(一般是root)", "密码","数据库名")#连接数据库
print("数据库连接")
# 使用cursor()方法获取操作游标
cursor = db.cursor()
# SQL 插入语句
sql = "mysql语句"
print("取注册位数")
# 执行sql语句
cursor.execute(sql)
# 提交到数据库执行
db.commit()
results = cursor.fetchall()#结果

b. 安装数据库

菜鸟教程

c.安装mysqlclient python库

下载地址下载对应python版本的mysqlclient库,然后打开cmd命令提示符,cd到下载目录下,执行

pip install xxx.whl

安装库

d.mysql语句教程

菜鸟教程

e.mysql 创建数据表

1.登录mysql

mysql -u root -p

然后输入密码,其中root为用户名

2.进入web

use web;

3.创建数据表

CREATE TABLE IF NOT EXISTS `users`(
`uid` INT UNSIGNED AUTO_INCREMENT,
`name` VARCHAR(100) NOT NULL,
`udate` DATE NOT NULL,
PRIMARY KEY ( `uid` )
)ENGINE=InnoDB DEFAULT CHARSET=utf8;
ALTER TABLE users ADD unique(`name`)

其中

  • 第2行uid是用户排行,为int类型,即整数,AUTO_INCREMENT为自增
  • 第3行name是用户名,为varchar(100),即100字符内的字符串,不为空
  • 第4行udate是注册日期吧,不为空
  • 第5行设置uid为键值
  • 第6行设置utf8编码
  • 第7行设置用户名为唯一,不可重复

    6.前端登录页面

    b.目录

    |flask-demo
    |-templates
    |--index.html
    |--login.html
    |--head.html
    |-run.py

    a.代码

    login.html
    {% extends "head.html" %}
    {% block body %}
    <h1>sign up</h1>
    <input id="i" type="text" />
    <buttom onclick="sign_up()">确定</buttom>
    <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_for('login_in') }}取login_in页面的url地址
    url: "{{ url_for('login_in') }}",
    data: {
    sign_up_name: x
    },
    dataType: "html",
    success: function (data) {
    if (data == "haven") {
    alert("已经有这个用户名了");
    } else {
    window.location.href = "./login";
    }
    }

    })
    }
    }

    function sign_in() {
    var x = $("#u").val();
    if (x != "" && x != " ") {
    $.ajax({
    type: "GET",
    url: "{{ url_for('login_in') }}",
    data: {
    sign_in_name: x
    },
    dataType: "html",
    success: function (data) {
    if (data == 'none') {
    alert("没有此用户");
    } else {
    window.location.href = "./login";
    }
    }

    })
    }
    }
    </script>
    {% 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>
    本段代码主要为引入jq文件

index.html

{% extends "head.html" %}
{% block body %}
{% if user %}

<h1>Hello {{ user }}!</h1>
<h>your are the {{ uid }}th user in our site</h>
<button onclick="logout()">登出</button>
<br />
<table id="t">

</table>

<div id="ti" style="display: none;">{{ users_x }}</div>
<script lang="Javascript">
$(window).load(function () {
var t = $("#t");
for (var key in $("#ti").value) {
console.debug(key);
t.append("<tr><td>" + key[1] + "</td><td>" + key[1] + "</td></tr>");
}
});

function logout() {
$.ajax({
type: "GET",
url: "/login?l=1",
dataType: "html",
success: function (data) {
location.reload();
}

})
}
</script>
{% else %}
<button onclick="login()">登入/注册</button>
<h1>please enter your name</h1>
<script lang="Javascript">
function login() {
window.location.href = "./login_in";
}
</script>
{% endif %}
{% endblock %}

本段代码为首页

7.后端

run.py

from flask import Flask, url_for, request, render_template, redirect, session
import os
from datetime import timedelta # 导入过期时间库
import MySQLdb
import time


app = Flask(__name__, static_folder='files', static_url_path="/files")
# app.config['SECRET_KEY'] = os.urandom(24) # 每一次服务器启动后,SECRET_KEY不一样
app.config['SECRET_KEY'] = "sadasfas"
# app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=7) # 配置过期时间


@app.route('/login', methods=['GET'])
def login():
l = request.args.get('l', 0, type=int)
if l == 1:
print("登出")
session.pop('user')
return render_template('index.html')

if 'user' in session:
print("首页登录成功")
return render_template('index.html', users_x=get_users(), user=session['user'], uid=num_user(session['user']))
return render_template('index.html')

@app.route('/login_in', methods=['GET'])
def login_in():
if 'user' in session:
print("已登录")
return render_template('502.html')
u = request.args.get('sign_up_name', 'none', type=str)
if u != 'none':
print("登录成功")
return new_user(u)
u = request.args.get('sign_in_name', 'none', type=str)
if u != 'none':
return news(u)
return render_template('login.html')


# 登录
def news(namea):
if(num_user(namea) == ""):
print("没有用户")
return 'none' # 无用户
session['user'] = namea
return ""
# 注册


def new_user(namea):
# 打开数据库连接
db = MySQLdb.connect("localhost", "root", "air123456",
"web")
print("数据库连接成功")
# 使用cursor()方法获取操作游标
cursor = db.cursor()
print("插入新用户")
if(num_user(namea) != ""):
print("用户名被注册")
return "haven" # 有这个用户
# SQL 插入语句
sql = """INSERT ignore INTO users(name,udate)VALUES ('%s','%s')""" % (
namea, time.strftime(r"%Y-%m-%d", time.localtime()))
try:
# 执行sql语句
cursor.execute(sql)
# 提交到数据库执行
db.commit()
except:
# 发生错误时回滚
db.rollback()
db.close()
print("ok")
session['user'] = namea
return ""


def get_users():
db = MySQLdb.connect("localhost", "root", "air123456",
"web")
print("数据库连接")
# 使用cursor()方法获取操作游标
cursor = db.cursor()
print("取用户列表")
# SQL 插入语句
sql = "SELECT * FROM users"
# 执行sql语句
cursor.execute(sql)
# 提交到数据库执行
db.commit()
results = cursor.fetchall()
print("ok")
db.close()
return results


def num_user(namea):
# 打开数据库连接
db = MySQLdb.connect("localhost", "root", "air123456",
"web")
print("数据库连接")
# 使用cursor()方法获取操作游标
cursor = db.cursor()

# SQL 插入语句
sql = "SELECT * FROM users WHERE name = '%s'" % (namea)
print("取注册位数")
# 执行sql语句
cursor.execute(sql)
# 提交到数据库执行
db.commit()
results = cursor.fetchall()
ida = ""
for row in results:
# 打印结果
ida = row[0]
db.close()
print("ok")
return ida


if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000, debug=True)
# 关闭数据库连接
# db.close()

# ###
# CREATE TABLE IF NOT EXISTS `users`(
# `uid` INT UNSIGNED AUTO_INCREMENT,
# `name` VARCHAR(100) NOT NULL,
# `udate` DATE NOT NULL,
# PRIMARY KEY ( `uid` )
# )ENGINE=InnoDB DEFAULT CHARSET=utf8;
# ALTER TABLE users ADD unique(`name`)

# ###

8.运行

在当前目录下,输入

python run.py

结果图

--END--