Python Web开发记录 Day6：MySQL（关系型数据库）

名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪）
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）

目录

六、MySQL
1、MySQL-概述和引入
①MySQL是什么？
②它有哪些特点？
③应用场景
④优势
⑤安装

2、MySQL-数据库管理
①MySQL指令
②常用数据类型
③数据行操作

3、MySQL-常见SQL擦破自拍和Python案例
①常用操作
②案例：Flask + 前端 + MySQL整合

4、综合案例
①概览
②数据库设置
③Flask后端代码
④HTML和CSS
⑤JavaScript和jQuery

六、MySQL

Python相关：基础、函数、数据类型、面向、模块
前端开发：HTML、CSS、JavaScript、jQuery。【静态页面】
Java + 前端 ; Python + 前端 ; Go + 前端 —>【动态页面】

那什么是静态页面，什么是动态页面呢？

静态页面，页面固定，一直保持一个模样
动态页面，页面上的数据可以实时修改和展示。

在建网站时，关于静态和动态需要注意些什么？

默认编写的是静态效果
动态：需要用到web框架的功能

通过前面的学习，我们已经学会了如何去构建静态页面，为了后面能够更好地过渡到动态页面，我们接下来一起学习MySQL，它能帮助我们存储和管理数据，完成前后端数据上的衔接。

那对于目前的我们来看，都有什么能做数据的存储呢?

txt文件
excel文件
专业的软件：数据库管理系统。
MySQL(*) / Oracle / SQL server / DB2 / Access…

1、MySQL-概述和引入

①MySQL是什么？

MySQL 是一个广泛使用的关系型数据库管理系统 (RDBMS)，它以其高性能、可靠性、简易性和开源许可证而闻名。由瑞典的 MySQL AB 公司于 1995 年开发，并于 2008 年被 Sun Microsystems 收购，随后在 2010 年 Oracle Corporation 收购了 Sun Microsystems，MySQL 也成为了 Oracle 的一部分。

在这里插入图片描述

②它有哪些特点？

开源性：开源，你可以免费使用它，并且可以查看和修改源代码以适应你的特定需求。
性能：快速高效，能够处理大量的数据操作和并发连接。
易用性：提供了简单的 SQL 语法和多种语言的接口，包括 PHP、Python、Java 和 C++ 等。
可靠性：提供了强大的数据保护功能，包括复制、备份和恢复等。
灵活性：支持多种存储引擎，每种引擎都有其优势，可以根据应用需求选择最适合的存储引擎。

③应用场景

MySQL 被广泛应用于各种在线应用程序，特别是那些需要数据库存储的 Web 应用程序，如内容管理系统、电子商务网站和论坛。除此之外，它也被用在许多大型网站和应用程序，如 Facebook、YouTube等。

④优势

MySQL 与其他流行的关系型数据库系统（如 PostgreSQL、Microsoft SQL Server 和 Oracle Database）相比，通常被认为更易于管理和成本效益更高，尤其是对于小到中型应用程序。然而，对于需要高级功能（如高级分析和数据仓库功能）的大型企业级应用，其他数据库系统可能更合适。

⑤安装

关于MySQL的安装可以看我之前写的文章或自行寻找文章、视频安装即可。

MySQL安装与配置
MySQL 8.0.31 最新版详细安装教程(下载+安装+配置+登录测试)
MySQL的启动与关闭
指令（*）
Python第三方模块，帮助我们发送指令并获取MySQL返回的结果。

连接测试

#登录连接
mysql -u root -p

汇总命令

#设置密码
mysql> set password = password('123456');
#查看数据库
mysql> show database;
#退出
mysql> exit;

mysql -u root -p
输入密码
mysql> exit;

如果你忘记了MySQL的密码，该怎么办？

默认情况下，启动MySQL时，需要用户输入账户名、密码。修改MySQL配置，重新启动MySQL（无账号模式）
mysql -u root -p
重新设置密码
退出再重新修改MySQL配置文件，重新启动MySQL（需要账号的模式）mysql -u root -p输入新密码登录

接下来，我们的重点是学会使用MySQL管理和操作数据：

2、MySQL-数据库管理

①MySQL指令

在MySQL和我们平时认知不同的概念。

MySQL	认知
数据库	文件夹
数据表	文件（Excel文件）

1️⃣数据库管理（文件夹）

1.查看已有的数据库（文件夹）

show databases;

2.创建数据库（文件夹）

create database 数据库名字;
create database 数据库名字 DEFAULT CHARSET UTF8 COLLATE
utf8_general_Ci;

create database henan DEFAULT CHARSET UTF8 COLLATE
utf8_general_Ci;

3.删除数据库（文件夹）

drop database henan;

4.进入数据库（进入文件夹）

use henan;

5.查看文件夹下所有的数据表（文件）

show tables;

2️⃣数据表的管理（文件）

1.进入数据库（文件夹）

use 数据库名;

2.查看当前数据库下的所有表（文件）

show tables;

3.创建表（文件）

create table 表名{列名 类型,列名 类型,列名 类型
}default charset=utf-8;

create table tb1(id int,name varchar(16),age int) default
charset=utf8;

create table tb1(id int,name varchar(16), age int 
) default charset=utf8;

create table tb1(id int,name varchar(16) not null, -- 不允许为空age int null,  			   -- 允许为空（默认）	
) default charset=utf8;

create table tb1(id int,name varchar(16) , age int default 3,   		-- 插入数据时，age列的值默认为3  			   
) default charset=utf8;

在 MySQL 中，主键（Primary Key）是一个或多个字段的组合，用于唯一标识表中的每一条记录。它是数据库表的一个非常重要的概念，确保数据的完整性和唯一性。每个表只能有一个主键，主键列的值必须唯一，不允许为空（NULL）。

例如：身份证号、学号、工号等等

create table tb1(id int primary key, 		-- 主键(不允许为空，也不允许重复)name varchar(16),age int
)default charset=utf8;

create table tb1(id int auto_increment primary key, -- 内部维护，自增name varchar(16),age int
)default charset = utf8;

一般情况下，我们在创建表时都会这样来写【标准写法】：

CREATE TABLE tb1 (id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,name VARCHAR(16),age INT
) DEFAULT CHARSET=utf8;

#desc 表名 会显示表的结构信息
mysql> desc tb1;
+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | int         | NO   | PRI | NULL    | auto_increment |
| name  | varchar(16) | YES  |     | NULL    |                |
| age   | int         | YES  |     | NULL    |                |
+-------+-------------+------+-----+---------+----------------+
3 rows in set (0.01 sec)

4.删除表

drop table 表名；

②常用数据类型

1.tinyint

有符号，取值范围 -128 ~ 127（有正有负）
无符号，取值范围 0 ~ 255（只有正）【默认】

create table tb3(id int not null auto_increment primary key,age tinyint  -- 有符号：取值范围 -128 ~ 127
)default charset=utf8;

create table tb3(id int not null auto_increment primary key,age tinyint unsigned -- 无符号
)default charset=utf8;

2.int

int			 有符号
int unsigned 无符号

3.bigint

bigint			 有符号
bigint unsigned  无符号

练习题：

#创建表
create table tb2(id bigint not null auto_increment primary key,salary int,age tinyint
)default charset=utf8;#插入数据
insert into tb2(salary,age) values(10000,18);
insert into tb2(salary,age) values(20000,28);
insert into tb2(salary,age) values(30000,38),(40000,40);#查看表中的数据
select * from tb2;+----+--------+------+
| id | salary | age  |
+----+--------+------+
|  1 |  10000 |   18 |
|  2 |  20000 |   28 |
|  3 |  30000 |   38 |
|  4 |  40000 |   40 |
+----+--------+------+
4 rows in set (0.00 sec)

4.float
5.double
6.decimal

在MySQL中，decimal是一种精确的数值数据类型，用于存储带有固定小数点的数字。这种类型特别适用于需要高度数值精确度的应用，比如财务计算。decimal数据类型允许你指定总体数字的宽度（即整数位数加上小数位数）以及小数点后的位数。其语法格式通常为decimal(M, D)，其中：

M（精度）表示数字的总位数（整数部分和小数部分的总和）。
D（标度）表示小数点后的位数。

例如，decimal(5,2)类型的列可以存储最大为999.99的数值，5表示数字的总位数，而2表示小数点后的位数。如果尝试存储超出指定精度的值，MySQL会对该值进行四舍五入或截断，具体行为取决于数据库的配置。

decimal类型特别重要的一点是，不同于float或double类型的浮点数，decimal在存储和计算时能够提供精确的数值，避免了浮点数计算中可能出现的舍入误差。使得decimal类型非常适合需要精确计算的场合，如金融、会计和其他需要精确小数处理的领域。

准确的小数值，m是数字总个数（负号不算）,d时小数点后个数。m最大值为65，d最大值为30。例如：
create table tb3(id int not null primary key auto_increment,salary decimal(8,2)
)default charset=utf8;insert into tb3(salary) values(1.28);
insert into tb3(salary) values(5.289);
insert into tb3(salary) values(5.282);
insert into tb3(salary) values(121312.11);
insert into tb3(salary) values(12131212.11);

7.char，速度快。

# 定长字符串，字符串长度最多可容纳255个字符。
char(11)，固定用11个字符串进行存储，哪怕真是没有11个字符，也会按照11存储。create table tb4(id int not null primary key auto_increment,mobile char(11)
)default charset=utf8;insert into tb4(mobile) values("151");
insert into tb4(mobile) values("15131255555");

8.varchar，节省空间。

#变长字符串，字符串长度根据编码来确定。
varchar(11),真实数据有多长就按多长进行存储。create table tb5(id int not null primary key auto_increment,mobile varchar(11)
)default charset=utf8;insert into tb5(mobile) values("151");
insert into tb5(mobile) values("15131255555");

9.text

#text数据类型用于保存变长的大字符串。#一般情况下，长文本会用text类型。例如：文章、新闻等create table tb6(id int not null primary key auto_increment,title varchar(128),content text
)default charset=utf8;

10.datetime

在MySQL中，DATETIME是一种日期和时间的数据类型，用于存储日期和时间值。这种数据类型能够存储从公元1000年1月1日到公元9999年12月31日之间的日期，以及这段日期内的时间，时间精确到秒。DATETIME类型的格式通常为YYYY-MM-DD HH:MM:SS，其中：

YYYY表示年份，
MM表示月份，
DD表示日期，
HH表示小时（24小时制），
MM表示分钟，
SS表示秒。

例如，2024-03-05 12:45:30就是一个有效的DATETIME值，表示2024年3月5日，下午12点45分30秒。

DATETIME类型不包含时区信息，所以在存储和检索时，它会按照服务器的本地时区来处理。如果你的应用在多个时区之间操作，可能需要在应用层面处理时区转换。

YYYY-MM-DD HH:MM:SS (2024-1-1 22:08:59)

11.date
在MySQL中，DATE是一个用于存储日期值的数据类型，仅包含年、月、日信息，不包含时间或时区信息。DATE类型的值的格式为YYYY-MM-DD，其中：

YYYY表示年份，
MM表示月份，
DD表示日。

这种数据类型可以存储的日期范围从公元1000年1月1日到公元9999年12月31日。

例如，2024-03-05是一个有效的DATE值，表示2024年3月5日。

YYYY-MM-DD (2024-01-01)

练习题：用户表

create table tb7(id int not null primary key auto_increment,name varchar(64) not null,password char(64) not null,email char(64) not null,age tinyint,salary decimal(10,2),ctime datetime
)default charset=utf8;insert into tb7(name,password,email,age,salary,ctime) values("张三","123456","xxx@163.com",19,1000.20,"2024-1-1 11:11:10");insert into tb7(name,password,email,age,salary,ctime) values("李四","123456","xxx@163.com",19,1000.20,"2024-1-1 11:11:10");insert into tb7(name,password,email,age,salary,ctime) values("王五","123456","xxx@163.com",19,1000.20,"2024-1-1 11:11:10");mysql> select * from tb7;
+----+------+----------+-------------+------+---------+---------------------+
| id | name | password | email       | age  | salary  | ctime               |
+----+------+----------+-------------+------+---------+---------------------+
|  1 | 张三 | 123456   | xxx@163.com |   19 | 1000.20 | 2024-01-01 11:11:10 |
|  2 | 李四 | 123456   | xxx@163.com |   19 | 1000.20 | 2024-01-01 11:11:10 |
|  3 | 王五 | 123456   | xxx@163.com |   19 | 1000.20 | 2024-01-01 11:11:10 |
+----+------+----------+-------------+------+---------+---------------------+
3 rows in set (0.00 sec)

MySQL文档：https://mysql.net.cn/doc/refman/8.0/en/

平时开发系统时，一般情况下：

创建数据库
创建表结构

都是需要提前通过上述命令创建。

③数据行操作

1.新增数据

insert into 表名(列名,列名) values(值,值);
insert into 表名(列名,列名) values(值,值),(值,值),(值,值),(值,值);

2.删除数据

delete from 表名;
delete from 表名 where 条件;

delete from tb7;
delete from tb7 where id = 2;
delete from tb7 where id = 4 and name="王五";
delete from tb7 where id = 4 or name="王五";
delete from tb7 where id > 4;
delete from tb7 where id >= 4;
delete from tb7 where id != 4；
delete from tb7 where id in (1,5);

3.修改数据

update 表名 set 列=值;
update 表名 set 列=值，列=值;
update 表名 set 列=值 where 条件;

update tb7 set password="哈哈哈";
update tb7 set email="哈哈哈" where id>5;
update tb7 set age=age+10 where id>2;

4.查询数据

select * from 表名;
select 列名,列名 from 表名;select 列名,列名 from 表名 where 条件;

select * from tb7;
select id,name from tb7;
select id,name from tb7 where id>10;
select id,name from tb7 where name="xx" and password="xx";

小结

我们平时开发系统时，一般情况下：

创建数据库
创建表结构

都是需要提前通过工具+命令创建。

但是，表中的数据一般情况下都是通过程序来实现增删改查。

案例：员工管理

使用MySQL内置工具（命令）

创建数据库：unicom
数据一张表：admin

表名：admin
列:
id，整型，自增，主键。
username 字符串 不为空,
password 字符串 不为空,
mobile 字符串 不为空,

create table admin(id int auto_increment primary key,username varchar(16) not null,password varchar(16) not null,mobile char(11) not null
)default charset=utf8;

Python代码实现
- 添加用户
- 删除用户
- 查看用户
- 更新用户信息

创建表结构

create database unicom default charset utf8 collate utf8_general_ci;use unicom;

create table admin(id int auto_increment primary key,username varchar(16) not null,password varchar(64) not null,mobile char(11) not null
)default charset=utf8;

3、MySQL-常见SQL擦破自拍和Python案例

使用python操作MySQL

用python代码连接MySQL并发送指令。

pip install pymysql

①常用操作

1️⃣创建数据库

# -*- coding: utf-8 -*-            
# @Time : 2024-03-04 22:30
import pymysql
from pymysql import cursors#1.连接MySQL
conn = pymysql.connect(host="127.0.0.1",port=3306,user='root',passwd="123456",charset='utf8',database='unicom')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)#2.发送指令
conn.commit()#3.关闭
cursor.close()
conn.close()

第二种写法：

# -*- coding: utf-8 -*-            
# @Time : 2024-03-04 22:30
import pymysql
from pymysql import cursors#1.连接MySQL
conn = pymysql.connect(host="127.0.0.1",port=3306,user='root',passwd="123456",charset='utf8',database='unicom')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)#2.发送指令(不要用字符串格式化去做SQL的拼接，因为存在安全隐患 SQL注入)
sql = "insert into admin(username,password,mobile) values(%s,%s,%s)"
cursor.execute(sql,["张三","121","1112121112"])
conn.commit()#3.关闭
cursor.close()
conn.close()

2️⃣查询数据

# -*- coding: utf-8 -*-            
# @Time : 2024-03-05 0:07
import pymysql
from pymysql import cursors# 1.连接MySQL
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd="123456", charset='utf8', database='unicom')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)# 2.执行查询的指令
cursor.execute("select * from admin")
data_list = cursor.fetchall()
print(data_list)# 3.关闭连接
cursor.close()
conn.close()

# -*- coding: utf-8 -*-            
# @Time : 2024-03-05 0:07
import pymysql
from pymysql import cursors# 1.连接MySQL
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd="123456", charset='utf8', database='unicom')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)# 2.执行查询的指令
cursor.execute("select * from admin where id>%s",[2,])
#获取符合条件的所有数据,得到的是[字典，字典,...] 
data_list = cursor.fetchall()
for row_dict in data_list:print(data_list)# 3.关闭连接
cursor.close()
conn.close()

# -*- coding: utf-8 -*-            
# @Time : 2024-03-05 0:07
import pymysql
from pymysql import cursors# 1.连接MySQL
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd="123456", charset='utf8', database='unicom')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)# 2.执行查询的指令
cursor.execute("select * from admin where id>%s",[2,])#获取符合条件的第一条数据，得到的是字典
res = cursor.fetchone()
print(res)# 3.关闭连接
cursor.close()
conn.close()

3️⃣删除数据

# -*- coding: utf-8 -*-            
# @Time : 2024-03-05 0:17
import pymysql
from pymysql import cursors# 1.连接MySQL
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd="123456", charset='utf8', database='unicom')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)# 2.执行查询的指令
cursor.execute("delete from admin where id=%s",[3,])
conn.commit()# 3.关闭连接
cursor.close()
conn.close()

4️⃣修改数据

# -*- coding: utf-8 -*-            
# @Time : 2024-03-05 0:21
import pymysql
from pymysql import cursors# 1.连接MySQL
conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd="123456", charset='utf8', database='unicom')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)# 2.执行查询的指令
cursor.execute("update admin set mobile=%s where id=%s",["188888888",4,])
conn.commit()# 3.关闭连接
cursor.close()
conn.close()

注意：

在进行新增、删除、修改时，一定要记得commit，不然数据库没有数据。

conn.commit()

在查询时，不需要commit，要执行fetchall/fetchone

在处理数据库查询时，fetchall和fetchone函数是两种常用的方法来从数据库中检索数据。它们通常与SQL查询执行后返回的结果对象一起使用。这里是一个简单的概述：
- fetchone()方法： 它检索结果集的下一行，并将该行作为序列或None返回。如果没有更多的行可用，则返回None。这个方法适合于你只期望返回单行数据的场景，例如根据主键查询一条记录。
- fetchall()方法： 它检索所有（剩余的）行并返回一个序列。如果没有更多的行可用，则返回一个空序列。这个方法适合于当你需要处理查询结果中的多行数据时。
两种方法的选择取决于具体需求。如果只需要从查询结果中获取一条记录，fetchone() 是一个更合适的选择，因为它只会加载一行数据到内存中。而当你需要处理查询结果中的多条数据时，fetchall() 会更加适用，但要注意这可能会导致大量数据被加载到内存中，尤其是当结果集非常大时。

#第一条数据 字典 无数据时为空列表
v1 = cursor.fetchone()#所有数据 列表套字典 无数据时是None
v1 = cursor.fetchall()

对于SQL语句不要用Python的字符串格式化进行拼接（会被SQL注入），一定要用execute+参数

cursor.execute(".%s..... %s",["xxx","yyy"])

②案例：Flask + 前端 + MySQL整合

# -*- coding: utf-8 -*-            
# @Time : 2024-03-05 14:44
from flask import Flask, render_template, request
import pymysql
from pymysql import cursorsapp = Flask(__name__)@app.route("/add/user",methods=["GET","POST"])
def add_user():if request.method == "GET":return render_template("add_user.html")print(request.form)username = request.form.get("user")password = request.form.get("user")mobile = request.form.get("mobile")# #1.连接MySQL# conn = pymysql.connect(host="127.0.0.1",port=3306,user='root',passwd="123456",charset='utf8',database='unicom')# cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)# #2.执行SQL# sql = "insert into admin(username,pwd,mobile) value(%s,%s,%s)"# cursor.execute(sql,["王五","121","143223412"])## conn.commit()# #3.关闭连接# cursor.close()# conn.close()return "数据提交成功！"@app.route("/show/user",methods=["GET","POST"])
def show_user():# 1.连接MySQLconn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd="123456", charset='utf8', database='unicom')cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)# 2.执行查询的指令sql = "select * from admin"cursor.execute(sql)# 获取符合条件的第一条数据data_list = cursor.fetchall()# 3.关闭连接cursor.close()conn.close()print(data_list)return render_template('show_user.html',data_list=data_list)if __name__ == '__main__':app.run()

使用Bootstap样式之前：

使用BootStrap样式之后：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
<div class="container"><h1>用户列表</h1><table class="table table-bordered"><thead><tr><th>ID</th><th>姓名</th><th>密码</th><th>手机号</th></tr></thead><tbody>{% for item in data_list %}<tr><td>{{item.id}}</td><td>{{item.username}}</td><td>{{item.password}}</td><td>{{item.mobile}}</td></tr>{% endfor %}</tbody></table>
</div>
</body>
</html>

4、综合案例

综合案例：简单的“博客管理系统”

①概览

功能需求:

显示博文列表
创建新博文
查看博文详细内容

技术栈:

前端: HTML, CSS (利用Bootstrap), JavaScript (使用jQuery)
后端: Flask (Python)
数据库: MySQL

②数据库设置

首先，你需要在MySQL中创建一个数据库并设置一个表用于存储博文信息。

CREATE DATABASE blog_db;
USE blog_db;

在这里插入图片描述

之后在blog_db数据库中创建posts表格：

CREATE TABLE posts (id INT AUTO_INCREMENT PRIMARY KEY,title VARCHAR(255) NOT NULL,content TEXT NOT NULL,created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

在这里插入图片描述

③Flask后端代码

在开始之前，确保你已经安装了所有必要的Python包，包括flask和flask_sqlalchemy，以及pymysql。
然后，设置Flask来处理前端的请求并与数据库交互。

注意：记得替换Flask应用中数据库连接字符串中的username和password为你自己的MySQL用户名和密码。

from flask import Flask, request, jsonify, render_template
from flask_sqlalchemy import SQLAlchemy
import osapp = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://username:password@localhost/blog_db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)class Post(db.Model):id = db.Column(db.Integer, primary_key=True)title = db.Column(db.String(255), nullable=False)content = db.Column(db.Text, nullable=False)created_at = db.Column(db.DateTime, server_default=db.func.now())@app.route('/')
def index():posts = Post.query.all()return render_template('index.html', posts=posts)@app.route('/post/<int:post_id>')
def post(post_id):post = Post.query.get_or_404(post_id)return render_template('post.html', post=post)@app.route('/create', methods=['POST'])
def create_post():title = request.form['title']content = request.form['content']post = Post(title=title, content=content)db.session.add(post)db.session.commit()return jsonify({'message': 'Post created successfully'}), 201if __name__ == '__main__':with app.app_context():db.create_all()app.run(debug=True)

④HTML和CSS

你需要为应用程序创建基础的HTML模板，并使用Bootstrap来美化它。

index.html (显示博文列表和创建新博文的表单)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Blog</title><link href="../static/plugins/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet"><style>.post {border-bottom: 1px solid #eee;padding-bottom: 20px;margin-bottom: 20px;}.navbar-custom {background-color: #333;color: #fff;}footer {background-color: #333;color: #fff;padding: 10px 0;text-align: center;}html, body {height: 100%;margin: 0;}body {display: flex;flex-direction: column;}.container {flex: 1;}footer {background-color: #333;color: #fff;padding: 10px 0;text-align: center;}</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-custom"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">My Blog</a></div><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></div>
</nav>
<div class="container"><h1>Blog Posts</h1><div id="posts">{% for post in posts %}<div class="post"><h2><a href="/post/{{ post.id }}">{{ post.title }}</a></h2><p>{{ post.content[:150] }}...</p></div>{% endfor %}</div><h2>Create a Post</h2><form id="createPost"><div class="mb-3"><label for="title" class="form-label">Title</label><input type="text" class="form-control" id="title" name="title" placeholder="Enter title"></div><div class="mb-3"><label for="content" class="form-label">Content</label><textarea class="form-control" id="content" name="content" rows="3"placeholder="Write your post content here..."></textarea></div><button type="submit" class="btn btn-primary">Submit</button></form>
</div>
<footer><div class="container"><p>© 2024 流苏的Blog. All rights reserved.</p></div>
</footer>
<script src="../static/js/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

post.html (查看博文详细内容)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Blog Post</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container"><h1>{{ post.title }}</h1><p>{{ post.content }}</p><a href="/" class="btn btn-primary">Go Back</a></div>
</body>
</html>

⑤JavaScript和jQuery

接下来，你需要使用JavaScript和jQuery来处理前端的表单提交，异步地发送数据到后端而不需要刷新页面。

script.js

$(document).ready(function() {$('#createPost').submit(function(e) {e.preventDefault();var title = $('#title').val();var content = $('#content').val();$.ajax({type: "POST",url: "/create",data: {title: title, content: content},success: function(response) {alert('Post created successfully!');window.location.reload();},error: function(response) {alert('Failed to create post.');}});});
});