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