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)的更多相关文章

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

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  2. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  3. #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 ...

  4. #2使用html+css+js制作网站教程 测试

    #2使用html+css+js制作网站教程 测试 本系列链接 1 测试 1.1 运行 1.2 审查 1.3 审查技巧 1.4 其他 引言: 编写完代码后就要上机测试代码,获得用户体验,筛选bug 笔者 ...

  5. #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 文 ...

  6. html+css+js实现网页拼图游戏

    代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...

  7. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  8. 渗透测试思路 - CTF(番外篇)

    渗透测试思路 ​ Another:影子 (主要记录一下平时渗透的一些小流程和一些小经验) CTF(番外篇) ​ 笔者是一个WEB狗,更多的是做一些WEB类型题目,只能怪笔者太菜,哭~~ 前言 ​ 本篇 ...

  9. 《手把手教你》系列技巧篇（三十一）-java+ selenium自动化测试- Actions的相关操作-番外篇（详解教程）

    1.简介 上一篇中,宏哥说的宏哥在最后提到网站的反爬虫机制,那么宏哥在自己本地做一个网页,没有那个反爬虫的机制,谷歌浏览器是不是就可以验证成功了,宏哥就想验证一下自己想法,于是写了这一篇文章,另外也是 ...

随机推荐

  1. Scrum冲刺_Day03

    一.团队展示: 1.项目:light_note备忘录 2.队名:删库跑路队 3.团队成员 队员(不分先后) 项目角色 黄敦鸿 后端工程师.测试 黄华 后端工程师.测试 黄骏鹏 后端工程师.测试 黄源钦 ...

  2. 串口数据监视 Serial Port Monitor

    串口数据监视工具 Serial Port Monitor可以在其它应用读写串口时监视串口数据, 很好用,但只有15天试用期.

  3. 【Luogu P5168】xtq玩魔塔（Kruskal 重构树 & 树状数组 & set）

    Description 给定一个 \(n\) 个顶点,\(m\) 条边的无向联通图,点.边带权. 先有 \(q\) 次修改或询问,每个指令形如 \(\text{opt}\ x\ y\): \(\tex ...

  4. NOI2008 志愿者招聘

    文化课 + 竞赛双废物又来水题解了. 首先,对于题干中的人,很像网络流中的流量,但是他有一个每天人数的下限,我从网上借鉴(chaoxi)到了两种思路: 把下界限制转化为一条边的流量下界,这样就是最小费 ...

  5. P6100 [USACO19FEB]Painting the Barn G

    本题解提供的做法思路应该是比较清晰的,可惜代码实现比较繁琐,仅供大家参考. 题解 不难发现 \(x\) ,\(y\) 的取值范围只有 \(200\) ,所以我们可以考虑从这里入手.我们可以先通过二维前 ...

  6. yum源 软件仓库 国外===国内

    yum源 软件仓库 国外===国内 国内常见的软件仓库地址/yum源 1阿里云 mirrors.aliyun.com 2清华 如何修改mirrors.aliyun.com a 备份系统当前的yum [ ...

  7. OpenCV Error: Assertion failed (src.size == dst.size && src.channels() == dst.channels()) in cvConvertScale

    发现问题:在做kinect采集的深度图去噪的时候遇到了cvConvertScale格式转换的问题. OpenCV Error: Assertion failed (src.size == dst.si ...

  8. 高速缓冲存储器Cache

    目录 概述 问题的提出 局部性原理 命中与未命中 Cache的命中率 Cache-主存系统的效率 例题 工作原理 地址映射方式(本节最重要) 直接映射 全相联映射 组相联映射 例子 替换策略 例题 写 ...

  9. 恕我直言，你可能连 GitHub 搜索都不会用 - 如何精准搜索的神仙技巧

    大家好,我是你们的 前端章鱼猫,一个不喜欢喵.又不喜欢吃鱼的超级猫 ~ 今天给大家带来的是 在 GitHub 上如何精准搜索的神仙技巧. [前端GitHub:https://github.com/bi ...

  10. 访问控制列表ACL应用

    ACL的应用的场景 应用在三层接口 • Nat地址转换 Nat(network address translation,地址转换)是将数据报报头中的ip地址转换为另一个ip地址的过程,主要用于实现内部 ...