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. 性能测试学习之路 （一）认识jmeter(性能测试流程 && 性能测试通过标准 &&jmeter体系结构)

    性能测试是通过自动化的测试工具模拟多种正常.峰值以及异常负载条件来对系统的各项性能指标进行测试. 1 性能测试技能树 性能测试是一项综合性的工作,致力于暴露性能问题,评估系统性能趋势.性能测试工作实质 ...

  2. 5分钟入门MP4文件格式

    写在前面 本文主要内容包括,什么是MP4.MP4文件的基本结构.Box的基本结构.常见且重要的box介绍.普通MP4与fMP4的区别.如何通过代码解析MP4文件 等. 写作背景:最近经常回答团队小伙伴 ...

  3. 算法——移掉K位数字使得数值最小

    给定一个以字符串表示的非负整数 num,移除这个数中的 k 位数字,使得剩下的数字最小. leetcode 解题思路:如果这个数的各个位是递增的,那么直接从最后面开始移除一定就是最最小的:如果这个数的 ...

  4. 精尽Spring MVC源码分析 - MultipartResolver 组件

    该系列文档是本人在学习 Spring MVC 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释 Spring MVC 源码分析 GitHub 地址 进行阅读 Spring 版本:5.2. ...

  5. KVM虚拟机网络

    某一天,我的QEMU/KVM虚拟机在打开的时候,出现了以下错误: 查看default配置状态(命令是sudo virsh net-list -all,注意sudo,管理员用户登录的当我没说): 上图是 ...

  6. mybatis-plus快速入门并使用

    目录 mybatis-plus的初次使用总结 说明:官网自有黄金屋,深入学习看官网是必须的,废话不多说 环境:springboot.mysql 一.配置 pom yml配置数据库 二.代码生成器 生成 ...

  7. AWT05-对话框

    1.Dialog Dialog组件是Window的子类,是容器类,是特殊组件. Dialog是可以独立存在的顶级窗口,使用上和普通窗口几乎没有区别,但应注意以下两点: 1.对话框通常依赖于其他窗口,也 ...

  8. Vscode下载与配置（C语言）

    目录 VScode 一.VScode下载 二.设置中文 三.Vscode界面介绍 1.活动栏 2.侧边栏 3.编辑栏 4.面板栏 四.VScode配置 1.C&C++配置 第一步 下载安装Mi ...

  9. 【进程/作业】篇章一：Linux进程及其管理（进程的管理基础）

    概述:监控系统各方面的性能,保障各类服务的有序运行,是运维工作的重要组成部分,本篇就介绍一次常用的系统监控命令和相关的参数说明 具体包含以下几部分: 1.进程的管理基础 ,主要是讲一下概念性的东西 2 ...

  10. CentOS7下常用安装服务软件yum方式的介绍

    简介:介绍yum软件包的管理并配置本地yum源 yum安装:基于 C/S 架构,yum安装称之为傻瓜式安装 yum安装优点:方便快捷,不用考虑包依赖,自动下载软件包. yum安装缺点:人为无法干预,无 ...