【Python Web开发实战】问题反馈系统1:解决数据提交、删除、修改、查询以及界面美化问题


完成本项目需要掌握以下知识:Python语言基础、Flask框架简单应用、基础SQL语句、网页开发基础知识、bootsrtap框架的基础使用

项目是网上找到,我还没做完,但是考虑到知识的健忘性,我还是滚过来乖乖写一篇博客。





一、基础知识复习

在开始做项目之前,我们先简单复习一下Flask的一些基础知识。

Flask应用开发环境配置

此处我使用venv的虚拟环境

  • 创建:python -m venv venv
    (这里指在使用python的venv模块创建一个叫做venv的文件夹)
  • 激活和关闭:venv\Script\activate || venv\Script\deactivate

程序基本结构

Flask应用对象创建:app = Flask(\__name__)         Flask类的构造函数只有一个必须指定的参数,即程序主模块或包的名字,也就是此处的__name__

创建路由和视图函数:

@app.route('/')  #路由
def index():	#视图函数
	return 'Hello Flask'

jinja2模板
后台数据传到前端页面方法:render_template('index.html')





二、代码实现

创建父模板、配置bootstrap框架使用环境:
我们首先创建一个base.html文件,作为以后页面的父类
分别导入jQuery.js文件、bootstrap.css、bootstrap.js两个文件
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
base.html关键代码如下
<div class="container">
    <div class="row">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header " style="margin-top:10px">
                <button type="button" class="navbar-toggle" data-toggle="collapse" >
                    <span class="sr-only">Erbin</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">PFS问题反馈系统</a>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse" style="margin-top:10px">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/feedback/">首页</a></li>
                    <li class="dropdown">
                        <a href="/feedback/" class="dropdown-toggle" data-toggle="dropdown">反馈管理 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/admin/list">问题列表</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" role="search"  style="margin-top:10px">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right" style="margin-top:-14px">
                    <!--<li><a href="#">Link</a></li>-->
                    <li class="dropdown" >
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="../static/images/adminP.png" alt="管理员"
                                                                                        class="img-circle" width="45" height="45">管理员 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">个人信息</a></li>
                            <li><a href="#">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="row">
        <ul class="breadcrumb">
            <li><a href="/">首页</a></li>
            <li class="active">问题反馈</li>
        </ul>
    </div>

    {%block main_content %}


    {% endblock %}

    <div class="row">

    </div>
    <div class="row">
        <div class="well">
            &copy;erbing <a href="#">wenzhao18.top</a>
        </div>
    </div>
</div>


效果如下:
在这里插入图片描述
注:本段代码最后的 {%block main_content %} {% endblock %} 是让子模板去继承的部分,这个块之外的内容都不能被子模板修改




问题反馈界面实现:
我们在基本页面上面再完成一个信息提交界面:post.html
```powershell
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>问题反馈</h4>
            </div>
            <div class="panel-body">
                <form action="/post_feedback/" enctype = "multipart/form-data" method="post" class="form-horizontal">
                    <div class="form-group">
                        <label for="subject" class="control-label col-md-2 ">主题</label>
                        <div class="col-md-6">
                            <input type="text" id="subject" name="subject" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="category" class="control-label col-md-2">分类</label>
                        <div class="col-md-2">
                            <select name="category" id="category" class="form-control">
                                {% for category in categories %}
                                <option value="{{category[0]}}">{{category[1]}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                     <div class="form-group">
                        <label for="subject" class="control-label col-md-2 ">姓名</label>
                        <div class="col-md-2">
                            <input type="text" id="username" name="username" class="form-control">
                        </div>
                    </div>
                     <div class="form-group">
                        <label for="subject" class="control-label col-md-2 ">邮箱</label>
                        <div class="col-md-2">
                            <input type="text" id="email" name="email" class="form-control">
                        </div>
                    </div>
                       <div class="form-group">
                        <label for="image" class="control-label col-md-2 ">图片</label>
                        <div class="col-md-6">
                            <input type="file" id="screenshot" name="screenshot">
                        </div>
                    </div>
                     <div class="form-group">
                        <label for="body" class="control-label col-md-2 ">内容</label>
                        <div class="col-md-6">
                            <textarea name="body" id="body" cols="30" rows="10" class="form-control"></textarea>
                        </div>
                    </div>

                    <div class="col-md-offset-2">
                        <input type="submit" class="btn btn-primary" id="submit" value="提交">
                        <input type="reset" class="btn btn-default" value="重置">
                    </div>
                </form>
            </div>
            <div class="panel-footer"></div>
        </div>
    </div>
因为此处要继承base.html模板,所以首先我们要在代码开头添加{% extentds 'base.html'%} ,之后将页面渲染的代码放进{% block main_content%}{%endblock%} 中。


效果如下:
在这里插入图片描述




问题反馈列表界面实现:
feedback-list.html
<div class="row">
	    <div class="panel panel-default">
	        <div class="panel-heading">
	                <form action="#" class="form-inline">
	                    <input type="text" class="form-control" name="key" value="{{key}}">
	                    <input type="submit" class="btn btn-default" value="搜索">
	                </form>
	            <div class="panel-body">
	                <table class="table table-hover">
	        <tr>
	            <td>ID</td>
	            <td>主题</td>
	            <td>分类</td>
	            <td>用户</td>
	            <td>邮箱</td>
	            <td>处理状态</td>
	            <td>提交时间</td>
	            <td>操作</td>
	        </tr>
	            {% for item in items %}
	        <tr>
	            <td id="loop.index">{{ loop.index }}</td>
	            <td>{{ item[1] }}</td>
	            <td>
	                {% if item[2]==1%}
	                产品质量
	                {% elif item[2]==2%}
	                客户服务
	                {% else %}
	                购买支付
	                {% endif %}
	            </td>
	            <td>{{ item[3] }}</td>
	            <td>{{ item[4] }}</td>
	            <td >
	                {% if item[7] == 1 %}
	                <span class="badge" style="background-color: green;">已处理</span>
	                {% else %}
	                <span class="badge" style="background-color: red;">未处理</span>
	                {% endif %}
	            </td>
	            <td>{{ item[9] }}</td>
	            <td>
	                <a href="{{ url_for('look_feedback',id=item[0]) }}" class="btn btn-default btn-md">查看</a>
	                <a href="{{url_for('edit_feedback',id=item[0])}}" class="btn btn-default btn-md">编辑</a>
	                <a href="{{url_for('del_feedback',id=item[0])}}" class="btn btn-default btn-md">删除</a>
	            </td>
	        </tr>
	        {% endfor%}
	
	    </table>
	            </div>
	        </div>
	    </div>
	
	</div>

效果如下:
在这里插入图片描述

这个页面有两个需要处理的细节:问题分类和处理状态





信息增删改查功能实现:
增加:
def save_feedback():
    if request.method == 'POST':
        #获取表单值
        subject = request.form.get('subject')
        categoryid = request.form.get('category',1)
        username = request.form.get('username')
        email = request.form.get('email')
        body = request.form.get('body')
        reply = request.form.get('reply')
        is_processed = 1 if request.form.get('isprocessed') =='on' else 0
        id = request.form.get('id',None)
        sql = """update feedback set
                        subject = ?,
                        categoryid = ?, 
                        username = ?,
                        email = ?,
                        body = ?,
                        reply = ?,
                        state = ?
                    where rowid = ?"""

        conn = sqlite3.connect(DATABASE_URL)
        c = conn.cursor()
        c.execute(sql,(subject,categoryid,username,email,body,reply,is_processed,id))
        conn.commit()
        c.close()
        conn.close()
        return redirect(url_for('feedback_list'))


删除:
def del_feedback(id=0):
    sql = 'delete from feedback where rowid=?'
    conn = sqlite3.connect(DATABASE_URL)
    c = conn.cursor()
    c.execute(sql,(id,))
    conn.commit()
    c.close()
    conn.close()
    return redirect(url_for('feedback_list'))


修改:
def edit_feedback(id=id):
    conn = sqlite3.connect(DATABASE_URL)
    c = conn.cursor()
    sql = 'select ROWID,CategoryName from category'
    categories = c.execute(sql).fetchall()
    #获取当前id的信息 并绑定至form表单
    sql = 'select ROWID,* from feedback where ROWID=?'
    current_feedback = c.execute(sql,(id,)).fetchone()
    conn.commit()
    c.close()
    conn.close()
    return render_template('edit.html',categories = categories,item=current_feedback)


查询
def feedback_list():
    key = request.args.get('key','')
    conn = sqlite3.connect(DATABASE_URL)
    c = conn.cursor()
    sql = 'select ROWID , * from feedback where Subject like ?'
    feedbacks = c.execute(sql,('%{}%'.format(key),)).fetchall()
    conn.commit()
    c.close()
    conn.close()
    return render_template('feedback-list.html',items = feedbacks,key = key)
发布了10 篇原创文章 · 获赞 2 · 访问量 3115
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览