Measuring open the road to one hundred and thirty: to achieve front-end database interaction

 

Issue to achieve a simulation system, and save data to the database

Directory Structure

 

 

 

base template page

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>-问题反馈系统</title>
<!--bootstrap、jquery、font-awesome-->
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--导航栏-->
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1--collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">问题反馈系统</a>
</div>
<div class="collapse navbar-collapse navbar-ex1--collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">反馈管理<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">问题列表</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="for-group">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">submit</button>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">管理员<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">退出</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>


<!--面包屑导航-->
<div class="row">
<ul class="breadcrumb">
<li><a href="/">首页</ A> </ li> {%}% Block main_content <-! the body of reserved space, other pages need only go there after inheriting add content to -> </ div> </ ul>
<li class = "the Active"> Feedback question </ li>








{% endblock %}

<!--页脚-->
<div class="row">
<div class="well text-center">
&copy;版权所有 <a href="https://www.baidu.com/">点击跳转</a>
</div>
</div>
</div>
</body>
</html>

 

Body parts: post.html

 

 

<!--继承base.html-->
{% extends 'base.html' %}

<!--引用base.html预留的正文部分-->
{% block main_content %}
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>问题反馈</h4>
</div>
<div class="panel-body">
<form action="#" 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" class="form-control" id="subject" name="subject">
</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">
<option value="1">产品质量</option>
<option value="2">客户服务</option>
<option value="3">购买支付</option>
</select>
</div>
</div>
<div class="form-group">
<label for="username" class="control-label col-md-2">姓名</label>
<div class="col-md-2">
<input type="text" class="form-control" id="username" name="username">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-md-2">邮箱</label>
<div class="col-md-6">
<input type="text" class="form-control" id="email" name="email">
</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="image" name="image">
</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" value="提交">
<input type="reset" class="btn btn-default" value="重置">

</div>
</form>
</div>
<div class="panel-footer">

</div>
</div>
</div>

{% endblock %}

routing:

 

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def index():
return render_template('base.html')


# 模板继承
@app.route("/feedback/")
def feedback():
return render_template('post.html')


if __name__ == '__main__':
app.run(
debug=True
)

Access look at the results

 

 

Prepare databases, tables and fields

the Create the Table category ( 
the CategoryName TEXT
);

INSERT INTO category values ( 'quality');
INSERT INTO category values ( 'customer service');
INSERT INTO category values ( 'purchase to pay');

the SELECT the ROWID, * from category;

the Create the Table Feedback (
Subjeck the TEXT,
the CategoryID Integer,
UserName the TEXT,
In Email the TEXT,
Image the TEXT,
Body the TEXT,
State Boolean,
the Reply the TEXT,
ReleaseTime DATETIME,
a FOREIGN KEY (the CategoryID) the REFERENCES category (the ROWID)
);

SELECT * from Feedback;

INSERT INTO Feedback values ( 'online banking can not pay?', 3, 'xx' , 'qq.com', null, ' online banking can not pay', null, null, null);

the SELECT * from Feedback;

 

Processing data submitted view

# coding:utf-8
import sqlite3
from datetime import datetime
from flask import Flask, request, render_template, redirect, url_for

app = Flask(__name__)

DATABASE = r'.\db\feedbach.db'


@app.route("/")
def index():
return render_template('base.html')


# 模板继承
@app.route("/feedback/")
def feedback():
return render_template('post.html')


@app.route("/post_feedback/", methods=["POST"])
def post_feedback():
""" 提交视图 """
if request.method == 'POST': # 如果是post请求就获取表单值
subject = request.form.get('subject', None)
categoryid = request.form.get('category', 1)
= request.form.get username ( 'username')
In Email request.form.get = ( 'In Email')
body request.form.get = ( 'body')
release_time = STR (DateTime.Now ())
State = 0
Print (Subject, CategoryID, username, Email, body, State, release_time)
conn = sqlite3.connect (DATABASE)
c = conn.cursor ()
# prevent sql injection with? Instead of the value of
SQL = "INSERT INTO Feedback (Subjeck, CategoryID, UserName, Email, Body, State, ReleaseTime) values (?,?,?,?,?,?,?)"
C.execute (SQL, (Subject, CategoryID , username, Email, body, State, release_time))
conn.commit ()
conn.Close ()
# to prevent Caton caused by repeated submission after submission Jump to fill page
return redirect(url_for('feedback'))


if __name__ == '__main__':
app.run(
debug=True
)

Modify the properties of the form

 

 

Database Query

 

 

Display function, a list of page

template

 

 

effect

 

 

Query rendering logic

@app.route("/list/")
def list():
conn = sqlite3.connect(DATABASE)
c = conn.cursor()
sql = "select ROWID,* from feedback order by ROWID DESC"
feedbacks = c.execute(sql).fetchall()
conn.close()
return render_template('feedback-list.html', items=feedbacks)

 

 

feedback-list.html

The extends% { 'base.html'%} 

{%}% Block main_content
<div class = "Row">
<Table class = "Table Table-hover">
<TR>
<TH> ID </ TH>
<TH> topic </ TH>
<TH> Category </ TH>
<TH> user </ TH>
<TH> mailbox </ TH>
<TH> processing status </ TH>
<TH> submitted </ TH>
<TH> operation </ TH>
</ TR>
{%}% for items in Item
<TR>
<TD> loop.index {{}} </ TD> <-! traverse ID function provided template jinja ->
<td>{{ item[1] }}</td>
<td>{{ item[2] }}</td>
<td>{{ item[3] }}</td>
<td>{{ item[4] }}</td>
<td><span class="label label-{{ 'danger' if item[7] ==0 else 'success' }}">{{ "未处理" if item[7] ==0 else "已处理" }}</span></td>
<td>{{ item[9] }}</td>
<td>
<a href="#" class="btn btn-success">查看</a>
<a href="#" class="btn btn-default">编辑</a>
<a href="#" class="btn btn-danger">删除</a>
</td>
</tr>
{% endfor %}
</table>
</div>

{% endblock %}

 

request

 

# coding:utf-8
import sqlite3
from datetime import datetime
from flask import Flask, request, render_template, redirect, url_for

app = Flask(__name__)

DATABASE = r'.\db\feedbach.db'


@app.route("/")
def index():
return render_template('base.html')


# 模板继承
@app.route("/feedback/")
def feedback():
return render_template('post.html')


@app.route("/post_feedback/", methods=["POST"])
def post_feedback():
""" 提交视图 """
if request.method == 'POST': # 如果是post请求就获取表单值
subject = request.form.get('subject', None)
categoryid = request.form.get('category', 1)
= request.form.get username ( 'username')
In Email request.form.get = ( 'In Email')
body request.form.get = ( 'body')
release_time = STR (DateTime.Now ())
State = 0
Print (Subject, CategoryID, username, Email, body, State, release_time)
conn = sqlite3.connect (DATABASE)
c = conn.cursor ()
# prevent sql injection with? Instead of the value of
SQL = "INSERT INTO Feedback (Subjeck, CategoryID, UserName, Email, Body, State, ReleaseTime) values (?,?,?,?,?,?,?)"
C.execute (SQL, (Subject, CategoryID , username, Email, body, State, release_time))
conn.commit ()
conn.Close ()
# to prevent Caton caused by repeated submission after submission Jump to fill page
return redirect(url_for('feedback'))


@app.route("/list/")
def list():
conn = sqlite3.connect(DATABASE)
c = conn.cursor()
sql = "select ROWID,* from feedback order by ROWID DESC"
feedbacks = c.execute(sql).fetchall()
conn.close()
return render_template('feedback-list.html', items=feedbacks)


if __name__ == '__main__':
app.run(
debug=True
)

 

Guess you like

Origin www.cnblogs.com/zhongyehai/p/11450680.html