#3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部
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中操控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行设置用户名为唯一，不可重复
2.前端登录页面
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 %}
本段代码为首页
4.后端
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`)
# ###
5.运行
在当前目录下，输入
python run.py
--END--
#3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)的更多相关文章
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
- #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.简介 上一篇中,宏哥说的宏哥在最后提到网站的反爬虫机制,那么宏哥在自己本地做一个网页,没有那个反爬虫的机制,谷歌浏览器是不是就可以验证成功了,宏哥就想验证一下自己想法,于是写了这一篇文章,另外也是 ...
随机推荐
- 《深入理解计算机系统》（CSAPP）读书笔记 —— 第一章 计算机系统漫游
本章通过跟踪hello程序的生命周期来开始对计算机系统进行学习.一个源程序从它被程序员创建开始,到在系统上运行,输出简单的消息,然后终止.我们将沿着这个程序的生命周期,简要地介绍一些逐步出现的关键概念 ...
- 跨国合作：Serverless Components 在腾讯云的落地和实践
导语 | Serverless Components 是 Serverless Framework 推出的最新解决⽅案,具有基础设施编排能⼒,开发者通过使⽤ Serverless Components ...
- sourcetree的使用（配合git）
主要讲解sourcetree的使用,是一个git提交的可视化软件,在官网上下载(windows,mac都有) 一路下载安装 首先,为了给本地sourcetree一个私钥,我们需要先下载git,然后在g ...
- 小程序view的显示与隐藏
需要在全局数据块中,设定一个控制键. data: { ......//省略其他代码 showView: true }, 然后是在wxml中,view的class中设置2个class,并用三目表达式来进 ...
- Oracle函数:trunc、round、ceil和floor
1.trunc函数 1).trunc(date) 格式:trunc(date,fmt) trunc用于截取时间,即便你指定不同的格式类型,返回的类型始终都是时间类型. 示例: with dates a ...
- 【Alpha冲刺阶段】Scrum Meeting Daily1
1.会议简述 会议开展时间 2020/5/22 8:30-9:00 PM 会议基本内容摘要 讨论了基础的分工,以及明确了各自模块需要完成的任务 参与讨论人员 全体参与 特别说明 会议需要每天都开展!! ...
- 开始是为了结束，结束是新的开始——NOI 2020 游记
Day 0 报道日 晚上的时候我们的教练给我们做考前动员.给我们讲:NOI的五个小时需要认真的规划,不能被T1打乱节奏.他让我们思考明天的策略,把可能出问题的地方都想清楚. 结果后来,宿管给我测体温, ...
- 快速构建一个vue项目
首先介绍一下命令行构建一个vue项目步骤: 1.下载安装node.js(直接运行安装包根据步骤安装完),打开命令行输入:node -v ,出现版本号即安装成功. 2.命令行界面输入:cnpm inst ...
- .Net Core Excel导入导出神器Npoi.Mapper
前言 我们在日常开发中对Excel的操作可能会比较频繁,好多功能都会涉及到Excel的操作.在.Net Core中大家可能使用Npoi比较多,这款软件功能也十分强大,而且接近原始编程.但是直接使用Np ...
- 使用plsql 连接oracle数据库
1. 首先,需要下载oracle数据库的客户端,因为plsql是32位的,所以推荐下载32位的oracle数据库客户端呢 2. 将客户端解压到没有中文目录的文件夹下. 3. 在plsql中指定orac ...