当前位置:   article > 正文

利用Flask框架创建一个简易的留言板_bootstrap留言

bootstrap留言

目录

一、项目要求

二、参考思路

三、代码实现

1.先进行数据库操作:

2. 编辑app.py文件

3.编辑home.html页面

4.编辑insert.html页面

5.运行app.py文件,启动网站,浏览器地址栏输入http://127.0.0.1:5000/,效果如下图。​编辑

6. 点击链接“我要留言”,打开新页面,反复添加几条留言,测试如下图。​编辑​编辑

7.点击链接“删除”,删除李四的留言,测试如下图。​编辑​编辑

8.使用ks_db数据库:

9.查看留言表的基本信息

10.查看留言表中的内容


一、项目要求


  使用python、flask和mysql数据库设计一个简单的留言板网站,能浏览留言、添加留言和删除留言即可。

二、参考思路

第一步, 进入PyCharm ,创建一个简易留言板的文件夹。

第二步,进入简易留言板的项目文件夹,建立默认配置目录static和templates,建立名称为app.py文件用于保存程序控制代码。

第三步,在浏览器搜索网址:https://v3.bootcss.com/

下载bootstrap-3.4.1-dist至静态文件static文件夹下。 

第四步,启动mysql命令控制台,建立数据库:ks_db

第五步,编写文件app.py。

第六步,编辑文件home.html和insert.html,并保存到项目的templates文件夹内。

第七步,启动网站,浏览器地址栏输入http://127.0.0.1:5000/。

第八步,点击链接“我要留言”,打开新页面,反复添加几条留言。

第九步,点击链接“删除”,删除留言。

三、代码实现

1.先进行数据库操作:

  • 查看所有数据库:

show databases;

  •  创建数据库 --  ks_db

create database ks_db;

2. 编辑app.py文件

  • 导入相关的模块

  1. import secrets
  2. import datetime
  3. from flask_sqlalchemy import SQLAlchemy
  4. from flask import Flask,render_template,request,flash,redirect,url_for
  • secrets 是一个 Python 内置模块,提供生成安全随机数的函数。
  • datetime 是一个Python内置模块,提供处理日期和时间的函数。
  • Flask 是一个Python web框架。
  • render_template 是Flask中用于渲染HTML模板的函数。
  • request 是Flask中用于获取HTTP请求数据的对象。
  • flash 是Flask中用于向用户显示消息的函数。
  • redirect 和 url_for 是Flask中用于重定向到其他路由或页面的函数。
  • SQLAlchemy 是一个Python ORM库,用于管理数据库。
  • 实例化并连接MySQL数据库
    1. app = Flask(__name__)
    2. app.config['SECRET_KEY'] = secrets.token_hex(16) # 生成一个长度为16的随机十六进制数作为密钥
    3. # 通过URL连接数据库
    4. app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:123456@localhost/ks_db'
    5. db = SQLAlchemy(app)
    6. # 动态追踪数据库的修改,不建议开启
    7. app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
  • app.config['SQLALCHEMY_DATABASE_URI'] 设置了连接到MySQL数据库的URI。其中包括用户名、密码、主机和数据库名称等信息。
  • db = SQLAlchemy(app) 创建了一个名为 db 的SQLAlchemy对象用于管理数据库。
  • app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False 是用于禁止SQLAlchemy自动追踪数据库修改以提高性能。
  • 创建数据库表,初始化对象的属性值
    1. class Ks_db(db.Model):
    2. __tablename__ = '留言'
    3. id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    4. name = db.Column(db.String(20))
    5. info = db.Column(db.String(120))
    6. date = db.Column(db.DateTime,default=datetime.datetime.now)
    7. def __init__(self,name,info,date=None):
    8. self.name = name
    9. self.info = info
    10. if date is not None:
    11. self.date = date

    这是一个使用SQLAlchemy的Python类,用于表示数据库表。

  • Ks_db 是一个继承了 db.Model 的类,代表了一个名为 “留言” 的数据库表。
  • idnameinfo 和 date 是这个类中的成员变量,对应着表中的列名。
  • db.Column() 定义了每一列的数据类型和属性,如 db.Integer 表示整数类型、db.String(20) 表示字符串类型且长度不超过20个字符。
  • primary_key=True 指定了该列为主键,并自动递增。
  • autoincrement=True 表示该列自动递增。
  • default=datetime.datetime.now 表示默认值为当前时间。
  • 添加留言
    1. @app.route('/insert',methods=[ 'GET', 'POST'])
    2. def insert():
    3. if request.method == 'POST':
    4. if not request.form['name'] or not request.form['info']:
    5. flash('请输入所有项内容。', 'error') #若有一项没填写,闪现消息
    6. else:
    7. name = request.form['name']
    8. info = request.form['info']
    9. # 创建新记录并添加到数据库中
    10. record = Ks_db(name=name, info=info)
    11. db.session.add(record)#把数据添加到数据库
    12. db.session.commit() #提交数据
    13. flash("记录添加成功。") #闪现消息添加成功
    14. return redirect(url_for('home')) #一个函数可以有两个return
    15. return render_template('insert.html') #点击添加按钮,渲染insert.html页面

    在 Flask 中,路由和视图函数是一一对应的,通过装饰器的方式将它们绑定。当用户请求与该路由匹配的 URL 时,Flask 将调用相应的视图函数处理请求,并返回响应。

  • 删除留言
    1. @app.route('/delete/<int:id>',methods=['GET','POST'])
    2. def delete(id):
    3. # 根据 id 查询要删除的记录并执行删除操作
    4. result = Ks_db.query.get(id)
    5. db.session.delete(result)
    6. db.session.commit()
    7. return redirect(url_for('home'))

    这是一个 Flask 应用程序中的路由处理函数,用于删除数据库表中指定 id 的记录。

总之,该函数实现了根据 id 删除数据库中相应记录的功能,并在删除完成后将用户重定向到主页。

  • @app.route('/delete/<int:id>',methods=['GET','POST']) 定义了 URL 路径 /delete/<int:id> 的路由,其中 <int:id> 表示该路径中需要传递一个整数类型的参数 id。当用户访问该路径时,Flask 将调用名为 delete 的函数来处理请求。
  • def delete(id): 函数接收一个参数 id,表示要删除记录的 id。
  • result = Ks_db.query.get(id) 根据传入的 id 查询要删除的记录并返回一个对象。
  • db.session.delete(result) 执行删除操作,从数据库中删除相应的记录。
  • db.session.commit() 提交事务,将删除操作保存到数据库中。
  • return redirect(url_for('home')) 重定向到 home 视图函数,即回到主页。
  • 显示留言页面
    1. @app.route('/')
    2. def home():
    3. db.create_all()
    4. return render_template('home.html',data=Ks_db.query.all())

该函数实现了渲染主页的功能,并从数据库中获取所有数据作为页面内容展示给用户。 

  • @app.route('/') 定义了 URL 路径 / 的路由,即应用程序的根路径。当用户访问该路径时,Flask 将调用名为 home 的函数来处理请求。
  • def home(): 该函数没有参数,用于渲染主页并返回响应。
  • db.create_all() 创建数据库表,如果该表已经存在,则不做任何操作。
  • Ks_db.query.all() 查询数据库中所有数据,并将查询结果保存在 data 变量中。
  • render_template('home.html',data=Ks_db.query.all()) 渲染 HTML 模板文件 home.html 并将查询结果传递给模板,生成最终的页面并返回响应。
  • 启动 
    1. if __name__ == '__main__':
    2. app.run(debug='true')

    这是 Python 程序的入口代码,用于启动 Flask 应用程序。

  • if __name__ == '__main__': 这是 Python 的特殊语法,表示当该脚本作为主程序执行时(而不是被导入为模块),才会执行下面的代码。
  • app.run(debug='true') 启动 Flask 应用程序并开始监听来自客户端的请求。
    • 如果设置了 debug=True,则可以在终端看到调试信息,方便开发和调试。
    • 默认情况下,Flask 应用程序运行在本地计算机上的端口 5000 上。如果需要修改端口号,可以使用 app.run(port=xxxx) 来指定端口号。

3.编辑home.html页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>简易留言板</title>
  6. <!-- 引入 Bootstrap 的 CSS 文件 -->
  7. <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-3.4.1-dist/css/bootstrap.min.css') }}">
  8. </head>
  9. <body>
  10. <div class="container mt-5">
  11. <h1 class="text-center mb-5" style="color: rgba(225,0,94,0.64);">留言板</h1>
  12. <hr>
  13. {%- for message in get_flashed_messages() %}
  14. {{ message }}
  15. {%- endfor %}
  16. <table class="table table-bordered text-center">
  17. <thead>
  18. <tr>
  19. <th scope="col">id编号</th>
  20. <th scope="col">昵称</th>
  21. <th scope="col">留言内容</th>
  22. <th scope="col">留言时间</th>
  23. <th scope="col">操作</th>
  24. </tr>
  25. </thead>
  26. {% for ly in data %}
  27. <tr>
  28. <td>{{ ly.id }}</td>
  29. <td>{{ ly.name }}</td>
  30. <td>{{ ly.info }}</td>
  31. <td>{{ ly.date }}</td>
  32. <td><a href="{{ url_for('delete', id=ly.id) }}">删除</a></td>
  33. </tr>
  34. {% endfor %}
  35. </table>
  36. <div class="text-center">
  37. <a href="{{ url_for('insert') }}" class="btn btn-primary active" role="button">我要留言</a>
  38. </div>
  39. </div>
  40. </body>
  41. </html>

4.编辑insert.html页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>添加留言</title>
  6. <!-- 引入 Bootstrap 的 CSS 文件 -->
  7. <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-3.4.1-dist/css/bootstrap.min.css') }}">
  8. </head>
  9. <body>
  10. <div class="container mt-5">
  11. <h1 class="text-center mb-5" style="color: rgba(225,0,94,0.64);">留言板</h1>
  12. <hr>
  13. {% for category, message in get_flashed_messages(with_categories=true) %}
  14. <div class="alert alert-danger">
  15. {{ message }}
  16. </div>
  17. {% endfor %}
  18. <form class="form-horizontal bg-info" action="/insert" method="post">
  19. <br>
  20. <div class="form-group">
  21. <label for="name" class="col-sm-2 control-label">你的昵称:</label>
  22. <div class="col-sm-10">
  23. <input type="text" class="form-control" name="name" placeholder="昵称">
  24. </div>
  25. </div>
  26. <div class="form-group">
  27. <label for="info" class="col-sm-2 control-label">你的留言:</label>
  28. <div class="col-sm-10">
  29. <textarea class="form-control" name="info" placeholder="留言内容" rows="5"></textarea>
  30. </div>
  31. </div>
  32. <div class="form-group">
  33. <div class="text-center">
  34. <input type="submit" value="立即发布">
  35. </div>
  36. </div>
  37. </form>
  38. </div>
  39. </body>
  40. </html>

5.运行app.py文件,启动网站,浏览器地址栏输入http://127.0.0.1:5000/,效果如下图。

6. 点击链接“我要留言”,打开新页面,反复添加几条留言,测试如下图。

7.点击链接“删除”,删除李四的留言,测试如下图。

8.使用ks_db数据库:

 

9.查看留言表的基本信息

 desc 留言;

10.查看留言表中的内容

select * from 留言;

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/寸_铁/article/detail/788217
推荐阅读
相关标签
  

闽ICP备14008679号