360网站建设服务器,比较好看的企业网站,网站建设内部下单流程,开源商城系统源码名人说#xff1a;莫道桑榆晚#xff0c;为霞尚满天。——刘禹锡#xff08;刘梦得#xff0c;诗豪#xff09; 创作者#xff1a;Code_流苏(CSDN)#xff08;一个喜欢古诗词和编程的Coder#x1f60a;#xff09; 目录 六、MySQL1、MySQL-概述和引入①MySQL是什么莫道桑榆晚为霞尚满天。——刘禹锡刘梦得诗豪 创作者Code_流苏(CSDN)一个喜欢古诗词和编程的Coder 目录 六、MySQL1、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 MicrosystemsMySQL 也成为了 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 charsetutf-8;create table tb1(id int,name varchar(16),age int) default
charsetutf8;create table tb1(id int,name varchar(16), age int
) default charsetutf8;create table tb1(id int,name varchar(16) not null, -- 不允许为空age int null, -- 允许为空默认
) default charsetutf8;create table tb1(id int,name varchar(16) , age int default 3, -- 插入数据时age列的值默认为3
) default charsetutf8;在 MySQL 中主键Primary Key是一个或多个字段的组合用于唯一标识表中的每一条记录。它是数据库表的一个非常重要的概念确保数据的完整性和唯一性。每个表只能有一个主键主键列的值必须唯一不允许为空NULL。
例如身份证号、学号、工号等等
create table tb1(id int primary key, -- 主键(不允许为空也不允许重复)name varchar(16),age int
)default charsetutf8;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 CHARSETutf8;#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 charsetutf8;create table tb3(id int not null auto_increment primary key,age tinyint unsigned -- 无符号
)default charsetutf8;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 charsetutf8;#插入数据
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最大值为65d最大值为30。例如
create table tb3(id int not null primary key auto_increment,salary decimal(8,2)
)default charsetutf8;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 charsetutf8;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 charsetutf8;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 charsetutf8;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 charsetutf8;insert into tb7(name,password,email,age,salary,ctime) values(张三,123456,xxx163.com,19,1000.20,2024-1-1 11:11:10);insert into tb7(name,password,email,age,salary,ctime) values(李四,123456,xxx163.com,19,1000.20,2024-1-1 11:11:10);insert into tb7(name,password,email,age,salary,ctime) values(王五,123456,xxx163.com,19,1000.20,2024-1-1 11:11:10);mysql select * from tb7;
---------------------------------------------------------------------
| id | name | password | email | age | salary | ctime |
---------------------------------------------------------------------
| 1 | 张三 | 123456 | xxx163.com | 19 | 1000.20 | 2024-01-01 11:11:10 |
| 2 | 李四 | 123456 | xxx163.com | 19 | 1000.20 | 2024-01-01 11:11:10 |
| 3 | 王五 | 123456 | xxx163.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 id5;
update tb7 set ageage10 where id2;4.查询数据
select * from 表名;
select 列名,列名 from 表名;select 列名,列名 from 表名 where 条件;select * from tb7;
select id,name from tb7;
select id,name from tb7 where id10;
select id,name from tb7 where namexx and passwordxx;小结
我们平时开发系统时一般情况下
创建数据库创建表结构
都是需要提前通过工具命令创建。
但是表中的数据一般情况下都是通过程序来实现增删改查。
案例员工管理 使用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 charsetutf8;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 charsetutf8;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(host127.0.0.1,port3306,userroot,passwd123456,charsetutf8,databaseunicom)
cursor conn.cursor(cursorpymysql.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(host127.0.0.1,port3306,userroot,passwd123456,charsetutf8,databaseunicom)
cursor conn.cursor(cursorpymysql.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(host127.0.0.1, port3306, userroot, passwd123456, charsetutf8, databaseunicom)
cursor conn.cursor(cursorpymysql.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(host127.0.0.1, port3306, userroot, passwd123456, charsetutf8, databaseunicom)
cursor conn.cursor(cursorpymysql.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(host127.0.0.1, port3306, userroot, passwd123456, charsetutf8, databaseunicom)
cursor conn.cursor(cursorpymysql.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(host127.0.0.1, port3306, userroot, passwd123456, charsetutf8, databaseunicom)
cursor conn.cursor(cursorpymysql.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(host127.0.0.1, port3306, userroot, passwd123456, charsetutf8, databaseunicom)
cursor conn.cursor(cursorpymysql.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(host127.0.0.1,port3306,userroot,passwd123456,charsetutf8,databaseunicom)# cursor conn.cursor(cursorpymysql.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(host127.0.0.1, port3306, userroot, passwd123456, charsetutf8, databaseunicom)cursor conn.cursor(cursorpymysql.cursors.DictCursor)# 2.执行查询的指令sql select * from admincursor.execute(sql)# 获取符合条件的第一条数据data_list cursor.fetchall()# 3.关闭连接cursor.close()conn.close()print(data_list)return render_template(show_user.html,data_listdata_list)if __name__ __main__:app.run()使用Bootstap样式之前 使用BootStrap样式之后
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href/static/plugins/bootstrap-3.4.1/css/bootstrap.css
/head
body
div classcontainerh1用户列表/h1table classtable table-borderedtheadtrthID/thth姓名/thth密码/thth手机号/th/tr/theadtbody{% for item in data_list %}trtd{{item.id}}/tdtd{{item.username}}/tdtd{{item.password}}/tdtd{{item.mobile}}/td/tr{% endfor %}/tbody/table
/div
/body
/html4、综合案例
综合案例简单的“博客管理系统”
①概览
功能需求:
显示博文列表创建新博文查看博文详细内容
技术栈:
前端: 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] mysqlpymysql://username:passwordlocalhost/blog_db
app.config[SQLALCHEMY_TRACK_MODIFICATIONS] False
db SQLAlchemy(app)class Post(db.Model):id db.Column(db.Integer, primary_keyTrue)title db.Column(db.String(255), nullableFalse)content db.Column(db.Text, nullableFalse)created_at db.Column(db.DateTime, server_defaultdb.func.now())app.route(/)
def index():posts Post.query.all()return render_template(index.html, postsposts)app.route(/post/int:post_id)
def post(post_id):post Post.query.get_or_404(post_id)return render_template(post.html, postpost)app.route(/create, methods[POST])
def create_post():title request.form[title]content request.form[content]post Post(titletitle, contentcontent)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(debugTrue)④HTML和CSS
你需要为应用程序创建基础的HTML模板并使用Bootstrap来美化它。
index.html (显示博文列表和创建新博文的表单)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleBlog/titlelink href../static/plugins/bootstrap-3.4.1/css/bootstrap.min.css relstylesheetstyle.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 classnavbar navbar-inverse navbar-customdiv classcontainer-fluiddiv classnavbar-headera classnavbar-brand href#My Blog/a/divul classnav navbar-navli classactivea href#Home/a/lilia href#About/a/lilia href#Contact/a/li/ul/div
/nav
div classcontainerh1Blog Posts/h1div idposts{% for post in posts %}div classposth2a href/post/{{ post.id }}{{ post.title }}/a/h2p{{ post.content[:150] }}.../p/div{% endfor %}/divh2Create a Post/h2form idcreatePostdiv classmb-3label fortitle classform-labelTitle/labelinput typetext classform-control idtitle nametitle placeholderEnter title/divdiv classmb-3label forcontent classform-labelContent/labeltextarea classform-control idcontent namecontent rows3placeholderWrite your post content here.../textarea/divbutton typesubmit classbtn btn-primarySubmit/button/form
/div
footerdiv classcontainerp© 2024 流苏的Blog. All rights reserved./p/div
/footer
script src../static/js/jquery.min.js/script
script srcscript.js/script
/body
/htmlpost.html (查看博文详细内容)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleBlog Post/titlelink hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.0/dist/css/bootstrap.min.css relstylesheet
/head
bodydiv classcontainerh1{{ post.title }}/h1p{{ post.content }}/pa href/ classbtn btn-primaryGo 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.);}});});
});这段代码监听表单的submit事件。当表单提交时它会阻止默认的提交行为收集表单中的数据然后使用$.ajax向后端发送一个POST请求。请求成功后它会提示用户并刷新页面以显示新的博文。 这个示例涵盖了使用HTML、CSS、JavaScript、Bootstrap、jQuery、Flask以及MySQL创建一个简单的博客管理系统的基本步骤。以上代码只大概写出了一个框架你可能需要进一步调整和改进代码比如增加用户认证、博文编辑和删除功能以及改善前端界面和用户体验。 很感谢你能看到这里如有相关疑问还请下方评论留言。 Code_流苏(CSDN)一个喜欢古诗词和编程的Coder 如果对大家有帮助的话希望大家能多多点赞关注这样我的动力会更足
