子沐课堂——Flask留言板

最新推荐文章于 2023-09-26 15:34:07 发布

子沐老司

最新推荐文章于 2023-09-26 15:34:07 发布

阅读量578

点赞数 1

文章标签：请求参数数据设置方法

本文链接：https://blog.csdn.net/fanfzj/article/details/80128127

版权

1.flask安装

pip install flask

2.入口文件配置

代码如下：

#-*- coding:utf-8 -*-  

from flask import Flask,render_template,request,redirect,escape,Markup
from datetime import datetime
#引入Mysql
import MySQLdb
import sys

reload(sys)
sys.setdefaultencoding('utf8')`

#申请空间
app=Flask(__name__)

#127.0.0.1:8000
@app.route('/')
def hello_world():
    list=load_data()
    return render_template('index.html',list=list)    

@app.route('/post',methods=['POST'])
def post():
    name=request.form.get('name',u'匿名').encode('utf-8')
    comment=request.form.get('comment',u'暂无留言').encode('utf-8')
    create_time=datetime.now()
    save_data(name,comment,create_time)
    return redirect('/')

def save_data(name,comment,create_time):
    #连接数据库
    conn=MySQLdb.connect(host='127.0.0.1',port=3306,user='root',passwd='root',db='block',charset='utf8')
    cur=conn.cursor()
    cur.execute('set names utf8')
    #插入的sql语句
    sql=u"insert into word (`name`,comment,create_time) values ('{0}','{1}','{2}')".format(name.encode('utf-8'),comment.encode('utf-8'),create_time)
    #执行插入方法
    cur.execute(sql)
    cur.close()
    conn.commit()
    conn.close()

#加载列表    
def load_data():
    # 连接数据库
    conn = MySQLdb.connect(host='127.0.0.1', port=3306, user='root', passwd='root', db='block',charset='utf8')
    cur = conn.cursor()
    cur.execute('set names utf8')
    sql='select * from word'
    cur.execute(sql)
    list=cur.fetchall()
    cur.close()
    conn.commit()
    conn.close()
    return list

#使datetime对象更容易分辨的模板的过滤器
@app.template_filter('datetime_fmt')
def datetime_fmt_filter(dt):
    return dt.strftime('%Y年%m月%d日 %H:%M:%S')
#将换行符置换为br标签的模板过滤器
@app.template_filter('nl2br')
def nl2br_filter(s):
    return escape(unicode(s)).replace('\\n',Markup('<br>'))

#执行flask项目
if __name__ == '__main__':
    app.run()

3.搭建页面

使用Bootstrap，搭建HTML页面，新建一个temolates目录，然后再找个目录下新建一个index.html。在模板文件中，我们使用Jinja2模板引擎，判断后台传递来的数据是否为空，非空则显示列表，空则显示暂无数据，同时使用Bootstrap的模态框，制作发布留言。
代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>留言板</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <h1>留言列表<button class="btn btn-warning pull-right" data-toggle="modal" data-target="#blockModal">发布留言</button></h1>
            {% if list %}
            {% for item in list %}
            <div class="panel panel-default">
                    <div class="panel-heading">{{item[1]}} </div>
                    <div class="panel-body">
                        <p class="text-muted">发布时间：{{ item[3]|datetime_fmt}}</p>
                        <p class="text-primary">{{item[2]|nl2br}}</p>
                </div>
            </div>
            {% endfor %}
            {% else %}
            <blockquote>
                    <p class="text-danger">暂无数据</p>
            </blockquote>
            {% endif %}
        </div>
        </div>
    <div class="modal fade" id="blockModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">发布留言</h4>
                    </div>
                    <form class="form-horizontal" role="form" action="/post" method="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" placeholder="请输入你的名字" name="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="comment" class="col-sm-2 control-label">留言内容</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" name="comment" id="comment"></textarea>
                            </div>
                        </div>
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                       <button type="submit" class="btn btn-primary">发布</button>
                   </div>
               </form>
           </div>
       </div>
   </div>
</body>
</html>

随后我们新建static文件夹，里面方式我们从Bootstrap官网下载的文件资源包