devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：寸_铁 | 2024-07-04 21:02:00

赞

踩

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.  
    4. # 通过URL连接数据库
    5. app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:123456@localhost/ks_db'
    6. db = SQLAlchemy(app)
    7.  
    8. # 动态追踪数据库的修改,不建议开启
    9. 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.  
    8.     def __init__(self,name,info,date=None):
    9.         self.name = name
    10.         self.info = info
    11.         if date is not None:
    12.             self.date = date

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

  • Ks_db 是一个继承了 db.Model 的类，代表了一个名为 “留言” 的数据库表。
  • id、name、info 和 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.             # 创建新记录并添加到数据库中
    11.             record = Ks_db(name=name, info=info)
    12.             db.session.add(record)#把数据添加到数据库
    13.             db.session.commit() #提交数据
    14.             flash("记录添加成功。") #闪现消息添加成功
    15.             return redirect(url_for('home')) #一个函数可以有两个return
    16.     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.  
  7.     <!-- 引入 Bootstrap 的 CSS 文件 -->
  8.     <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-3.4.1-dist/css/bootstrap.min.css') }}">
  9.  
  10. </head>
  11. <body>
  12.  
  13. <div class="container mt-5">
  14.     <h1 class="text-center mb-5" style="color: rgba(225,0,94,0.64);">留言板</h1>
  15.     <hr>
  16.     {%- for message in get_flashed_messages() %}
  17.         {{ message }}
  18.     {%- endfor %}
  19.     <table class="table table-bordered text-center">
  20.         <thead>
  21.         <tr>
  22.             <th scope="col">id编号</th>
  23.             <th scope="col">昵称</th>
  24.             <th scope="col">留言内容</th>
  25.             <th scope="col">留言时间</th>
  26.             <th scope="col">操作</th>
  27.         </tr>
  28.         </thead>
  29.         {% for ly in data %}
  30.         <tr>
  31.             <td>{{ ly.id }}</td>
  32.             <td>{{ ly.name }}</td>
  33.             <td>{{ ly.info }}</td>
  34.             <td>{{ ly.date }}</td>
  35.             <td><a href="{{ url_for('delete', id=ly.id) }}">删除</a></td>
  36.         </tr>
  37.         {% endfor %}
  38.     </table>
  39.     <div class="text-center">
  40.         <a href="{{ url_for('insert') }}" class="btn btn-primary active" role="button">我要留言</a>
  41.     </div>
  42.  
  43. </div>
  44.  
  45. </body>
  46. </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.  
  9. </head>
  10. <body>
  11. <div class="container mt-5">
  12.     <h1 class="text-center mb-5" style="color: rgba(225,0,94,0.64);">留言板</h1>
  13.     <hr>
  14.     {% for category, message in get_flashed_messages(with_categories=true) %}
  15.     <div class="alert alert-danger">
  16.         {{ message }}
  17.     </div>
  18.     {% endfor %}
  19.     <form class="form-horizontal bg-info" action="/insert" method="post">
  20.         <br>
  21.         <div class="form-group">
  22.             <label for="name" class="col-sm-2 control-label">你的昵称:</label>
  23.             <div class="col-sm-10">
  24.                 <input type="text" class="form-control" name="name" placeholder="昵称">
  25.             </div>
  26.         </div>
  27.         <div class="form-group">
  28.             <label for="info" class="col-sm-2 control-label">你的留言:</label>
  29.             <div class="col-sm-10">
  30.                 <textarea class="form-control" name="info" placeholder="留言内容" rows="5"></textarea>
  31.             </div>
  32.         </div>
  33.  
  34.         <div class="form-group">
  35.             <div class="text-center">
  36.                 <input type="submit" value="立即发布">
  37.             </div>
  38.         </div>
  39.     </form>
  40. </div>
  41.  
  42. </body>
  43. </html>

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

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

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

8.使用ks_db数据库:

 

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

 desc 留言;

10.查看留言表中的内容

select * from 留言;

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号