130への道を開いた測定:フロントエンドデータベースとの対話を実現するために

 

発行シミュレーションシステムを実現し、データをデータベースに保存します

ディレクトリ構造

 

 

 

ベーステンプレートページ

 

 

<!DOCTYPE HTML> 
<HTML LANG = "EN">
<ヘッド>
の<meta charsetが= "UTF-8">
<タイトル> -问题反馈系统</ TITLE>
<! -ブートストラップ、jqueryの、フォントawesome-- >
<リンクのhref = "https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"のrel = "スタイルシート">
<スクリプトSRC = "HTTPS://cdn.bootcss .COM / jqueryの/ 2.2.4 / jquery.min.js "> </ SCRIPT>
<リンクのhref =" https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min .css」のrel = "スタイルシート">
<スクリプトSRC = "https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> </ SCRIPT>
</ HEAD>
<ボディ>
<DIV CLASS =」コンテナ">
<! -导航栏- >
<divのクラス="行">
<NAVクラス="ナビゲーションバーナビゲーションバー、デフォルトの」役割= "ナビゲーション">
<DIV CLASS = "ナビゲーションバーヘッダを">
<ボタンタイプ= "ボタン"クラス= "ナビゲーションバー-トグルを"データトグル= "崩壊"データターゲット=」ナビゲーションバー-EX1 -崩壊">
<スパンクラス=" SR-のみ"> </ span>の
<スパンクラス="アイコンバー"> </ span>の
<スパンクラス="アイコンバー"> </ span>の
<スパンクラス="アイコンバー"> </スパン>
</ button>の
<a class="navbar-brand" href="/">问题反馈系统する</a>
</ div>
<divのクラス= "崩壊ナビゲーションバー-崩壊ナビゲーションバー-EX1 -崩壊">
<ULクラス= "NAVナビゲーションバー-NAV">
<LIクラス= "アクティブ"> <a href="/">首页</a>に</ LI>
<LIクラス= "ドロップダウン">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">反馈管理<Bクラス= "キャレット"> </ b>を</a>の
<ULクラス= "ドロップダウン・メニュー">
<LI> <a href="#">问题列表する</a>ます。</ li>
</ ulの>
</ LI>
</ UL>
<フォームクラス= "ナビゲーションバー形式のナビゲーションバー-左"役割= "検索" >
<DIV CLASS = "のグループ">
の<input type = "text"のクラス= "フォームコントロール"プレースホルダ= "検索">
<ボタンタイプ=」提出」クラス= "BTN BTN-デフォルト">提出する</ボタン>
</ div>
</ FORM>
<ulのクラス= "NAVナビゲーションバー-NAVナビゲーションバー右">
<LIクラス= "ドロップダウン">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">管理员<Bクラス= "キャレット"> </ B> </a>の
<ULクラス= "ドロップダウン・メニュー">
<LI> <a href="#">退出する</a>ます。</ li>
</ ulの>
</ LI>
</ UL>
</ div>
</ NAV>
</ DIV>


<! -面包屑导航- >
<divのクラス= "行">
<ulのクラス= "ブレッドクラム">
<LI> <a href="/">首页</ A> </ LI>
<LIクラス= "アクティブ">フィードバック質問ます。</ li>
</ ulの>
</ div>



<! -予約されたスペースの身体、他のページにのみコンテンツを追加継承した後、そこに行く必要がありますの- >
{%}%のブロックmain_content

{%の末端ブロック%}

< - -页脚!>
<DIV CLASS = "行">
<DIV CLASS = "十分テキスト中心">
コピー;版权所有<HREF = "https://www.baidu。コム/ ">点击跳转</a>の
</ DIV>
</ DIV>
</ DIV>
</ BODY>
</ HTML>

 

ボディパーツ:post.html

 

 

<! -继承base.html - > 
{%が'base.html' %延び}

<! -引用base.html预留的正文部分- >
{%ブロックmain_content%}
<DIV CLASS = "行" >
<DIV CLASS = "パネルパネル-デフォルト">
<DIV CLASS = "パネルの見出し">
<H4>问题反馈</ H4>
</ div>
<divのクラス= "パネル体">
<フォームアクション=」 # "クラス= "フォーム水平">
<DIV CLASS = "フォームグループ">
の<label =ための"対象"クラス= "コントロールラベルCOL-MD-2">主题</ label>は
<DIV CLASS =" COL-MD-6" >
<input type = "text"のクラス= "フォームコントロール" ID = "被験者" NAME = "被験者">
</ div>
</ DIV>
<DIV CLASS = "フォームグループ">
<= "カテゴリ"クラスのラベル= "コントロールラベルCOL-MD-2">问题分类</ label>は
<DIV CLASS = "COL-MD-2 ">
<SELECT NAME ="カテゴリ」ID = "カテゴリ"クラス= "フォームコントロール">
<オプション値= "1">产品质量</オプション>
<オプション値= "2">客户服务</オプション>
<オプション値= "3">购买支付</オプション>
</ select>の
</ div>
</ DIV>
<DIV CLASS = "フォームグループ">
<ラベル= "ユーザ名"クラス= "コントロールラベルCOL-MD-2">姓名</ label>は
<DIV CLASS = "COL-MD-2">
の<input type = "text"のクラス= "フォームコントロール"ID ="ユーザ名」名前= "ユーザ名">
</ div>
</ div>
<divのクラス= "フォームグループ">
メール=のための<ラベル""クラス= "コントロールラベルCOL-MD-2">邮箱</ label>は
<DIV CLASS = "COL-MD-6">
の<input type = "text"のクラス= "フォームコントロール" ID = "メール" NAME = "メール">
</ div>
</ div>
<DIV CLASS = "フォームグループ">
图片</ label>は<= "画像"クラス= "コントロールラベルCOL-MD-2"のラベル>
<DIV CLASS = "COL-MD-6">
の<input type = "ファイル" ID = "画像"名前= "画像">
</ div>
</ div>

<DIV CLASS = "フォームグループ">
= "ボディ"クラスの<LABEL = "コントロールラベルCOL-MD-2">内容</ label>は
<DIVクラス= "COL-MD-6">
<テキストエリア名= "本体" ID = "本体" COLS = "30"行= "10"クラス= "フォームコントロール"> </ TEXTAREA>
</ div>
</ div>
<DIV CLASS = "COL-MD-オフセット-2">
<INPUT TYPE = "提出"クラス= "BTN BTN原色"値= "提交">
の<input type = "リセット"クラス= "BTN BTNデフォルト"値= "重置">

</ div>
</フォーム>
</ div>
<DIV CLASS = "パネルフッタ">

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

{%の末端ブロック%}

ルート:

 

フラスコのインポートフラスコから、render_template 

アプリ=フラスコ(__ name__)


@ app.route( "/")
デフインデックス():
リターンrender_template( 'base.html')


模板继承
@ app.route( "/フィードバック/")
デフフィードバック():
リターンrender_template( 'post.html')


であれば__name__ == '__main__':
app.run(
デバッグ=真

結果のアクセスを見て

 

 

データベース、テーブルとフィールドを準備します

表のカテゴリ(作成
区分名TEXTを
);

INSERT INTOのカテゴリ値(「品質」);
INSERT INTOのカテゴリ値(「顧客サービス」);
INSERT INTOのカテゴリ値(「支払う購入」);

SELECT ROWID、*カテゴリから、

表を作成します。フィードバック(
Subjeck TEXT、
区分整数、
ユーザー名TEXT、
電子メールのテキスト、
画像TEXT、
ボディTEXT、
国家ブール、
返信TEXT、
ReleaseTime DATETIME、
FOREIGN KEY(区分)REFERENCESカテゴリ(ROWID)
);

SELECT *フィードバックから、

フィードバック値のINSERT INTO ( 'オンラインバンキングを支払うことができない?'、3 'XX'を 、 'qq.com'、NULL、 ' オンラインバンキングを支払うことができない'、NULL、NULL、NULL);

SELECT *をフィードバックから。

 

ビューを提出したデータを処理します

#コード:UTF-8 
インポートsqlite3の
日時インポート日時から
フラスコインポートフラスコから、要求、render_template、リダイレクト、なurl_for

アプリ=フラスコ(__ name__)

'\ DB \ feedbach.db' DATABASE = R


app.route @( "/" )
デフインデックス():
リターンrender_template( 'base.html')


模板继承
@ app.route( "/フィードバック/")
フィードバックデフ()
の戻りrender_template( 'post.html')


app.route @( "/ post_feedback / "メソッド= "POST"])
DEF
post_feedback():"""提交视图""」
もしrequest.method == 'POST':如果#是ポスト请求就获取表单值
被験者=のRequest.Form。 (「件名」を取得し、なし)
区分= request.form.get( 'カテゴリ'、1)
= request.form.get名( 'ユーザ名')
メールrequest.form.get =( 'メールで')では
ボディrequest.form.get =( '体')
release_time = STR(DateTime.Now())
の状態= 0
を印刷(件名、区分、ユーザー名、電子メール、体、国家、release_time)
CONN = sqlite3.connect(DATABASE)
C = conn.cursor()
でSQLインジェクションを防ぎますか?代わりの値の
SQL = "フィードバックのINSERT INTO(Subjeck、区分、ユーザー名、電子メール、ボディ、州、ReleaseTime)の値(?、?、?、?、?、?、?)"
C.execute(SQL、(件名、区分、ユーザ名、電子メール、体、国家、release_time))
conn.commit()
はconn.close()
のページを埋めるために提出ジャンプの後に繰り返し提出によって引き起こさカトンを防止する#
return redirect(url_for('feedback'))


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

修改一下form的属性

 

 

数据库查询

 

 

展示功能,列表页

模板

 

 

效果

 

 

查询渲染逻辑

@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

{% extends 'base.html'%}

{% block main_content %}
<div class="row">
<table class="table table-hover">
<tr>
<th>ID</th>
<th>主题</th>
<th>分类</th>
<th>用户</th>
<th>邮箱</th>
<th>处理状态</th>
<th>提交时间</th>
<th>操作</th>
</tr>
{% for item in items %}
<tr>
<td>{{ loop.index }}</td><!--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 %}

 

请求

 

# 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)
username = request.form.get('username')
email = request.form.get('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()
# 防止sql注入,用?代替值
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()
# 为防止因卡顿引起重复提交,提交过后跳转到填写页面
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
)

 

おすすめ

転載: www.cnblogs.com/zhongyehai/p/11450680.html
おすすめ