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

本文链接：https://blog.csdn.net/qq_40832960/article/details/107618638

这篇教程详细介绍了如何使用Python的Flask框架和MySQL数据库来构建登录功能。首先，文章讲解了如何在Python中操作MySQL，包括安装数据库、mysqlclient库以及创建数据表。接着，介绍了前端登录页面的目录结构和代码，包括login.html、head.html和index.html。最后，提到了后端的run.py文件和运行项目的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#3使用html+css+js制作网页番外篇使用python flask 框架 II第二部

0. 本系列教程
1. 登录功能准备
2.前端登录页面
- b.目录
- a.代码
4.后端
5.运行

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.目录

a.代码

{% 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') }}",