백서른에 도로를 개방 측정 : 프런트 엔드 데이터베이스 상호 작용을 달성하기 위해

문제는 시뮬레이션 시스템을 달성하고 데이터베이스에 데이터를 저장합니다

디렉토리 구조

기본 템플릿 페이지

<! DOCTYPE HTML> 
<HTML LANG = "EN"> 
<head> 
    <메타 캐릭터 = "UTF-8"> 
    <TITLE> -问题反馈系统</ TITLE> 
    <! - 부트 스트랩 JQuery와, 폰트 awesome-- > 
    <링크 HREF = "https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"확인해 = "스타일 시트"> 
    <스크립트 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 "확인해 ="스타일 시트 "> 
    <스크립트 SRC ="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js "> </ script> 
</ head> 
< BODY> 
<DIV 클래스 = "용기 "> 
    <! -导航栏-> 
    <div 클래스 ="행 "> 
        <탐색 클래스 ="네비게이션 바 네비게이션 바 기본 "역할 ="탐색 ">
            <div 클래스 = "메뉴 바 헤더를"> 
                <버튼형 = "버튼"클래스 = "메뉴 바 토글"를 데이터 토글 = "붕괴"데이터 타겟 = "메뉴 바-EX1 -. 붕괴"> 
                    <스팬 클래스 = " SR 전용 "> </ SPAN> 
                    <스팬 클래스 ="아이콘 바 "> </ SPAN> 
                    <스팬 클래스 ="아이콘 바 "> </ SPAN> 
                    <스팬 클래스 ="아이콘 바 "> </ 스팬 > 
                </ 버튼> 
                <a class="navbar-brand" href="/">问题反馈系统</a>를 
            </ DIV> 
            <DIV 클래스 = "붕괴 네비게이션 바 붕괴의 네비게이션 바-EX1 - 붕괴">
                <UL 등급 = "탐색 메뉴 바 - 탐색"> 
                    <LI 클래스 = "활성"> <A href="/">首页</A> </ 리> 
                    <LI = 클래스 "드롭">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">反馈管理<B 클래스 = "캐럿"> </ B> </A> 
                        <UL = 클래스 "드롭 다운 메뉴"> 
                            <LI> <A보기 </a>问题列表</A> </ 리> 
                        </ UL> 
                    </ 리> 
                </ UL> 
                <form 클래스 = "메뉴 바 형태의 메뉴 바 왼쪽"역할 = "검색" > 
                    <div = 클래스 "의 그룹"> 
                        <input 타입 = "텍스트"클래스 = "형태의 제어가"자리 => "검색" 
                        <버튼 타입 = "제출 "클래스 ="btn을 BTN-기본 "> 제출 </ 버튼> 
                    </ div> 
                </ FORM> 
                <UL 클래스 ="탐색 메뉴 바 - 탐색 네비게이션 바 오른쪽 ">
                    <LI = 클래스 "드롭"> 
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">管理员<B 클래스 = "캐럿"> </ B> </A> 
                        <UL 클래스 = "드롭 다운 메뉴"> 
                            <LI> <A보기 </a>退出</A> </ 리> 
                        </ UL> 
                    </ 리> 
                </ UL> 
            </ div> 
        </ NAV> 
    </ DIV> 


    <! -面包屑导航-> 
    <div 클래스 = "행"> 
        <UL 클래스 = "탐색 경로"> 
            <LI> <A href="/">首页</ A> </ 리> 
            <LI 클래스 = "활성"> 피드백 질문 </ 리> 
        </ UL> 
    </ DIV> 



    <! - 예약 된 공간의 몸이, 다른 페이지는 내용을 추가 상속 후 거기에 갈 필요 에 -> 
    {%} % 차단 main_content

    {%의 엔드 블록 %} 

    <- -页脚!> 
    <DIV 클래스 = "행"> 
        <DIV 클래스 = "물론 텍스트 중심"> 
            & 사본版权所有<A HREF = "https://www.baidu. COM / ">点击跳转</a>를 
        </ DIV> 
    </ DIV> 
</ DIV> 
</ BODY> 
</ HTML>

차체 부품 : post.html

<! -继承base.html -> 
{%가 'base.html'% 연장} 

<! -引用base.html预留的正文部分-> 
{% 블록 main_content %} 
    <div 클래스 = "로우" > 
        <DIV 클래스 = "패널 패널 기본"> 
            <DIV 클래스 = "패널 제목"> 
                <H4>问题反馈</ H4> 
            </ DIV> 
            <DIV 클래스 = "패널 몸"> 
                <양식 액션 = " # "클래스 ="폼 수평 "> 
                    <div 클래스 ="폼 그룹 "> 
                        <라벨 = 대한"제목 "클래스 ="제어 라벨 COL-MD-2 ">主题</ 라벨> 
                        <div 클래스 =" COL-MD-6 ">
                            <input 타입 = "텍스트"클래스 = "폼 제어"ID = "제목"NAME = "제목"> 
                        </ div>
                    </ div> 
                    <div 클래스 = "폼 그룹"> 
                        <= 레이블 "카테고리"클래스 = "제어 라벨 COL-MD-2">问题分类</ 라벨> 
                        <div 클래스 = "COL-MD-2 "> 
                            <SELECT NAME ="카테고리 "ID ="카테고리 "클래스 ="폼 제어 "> 
                                <옵션 값 ="1 ">产品质量</ 옵션> 
                                <옵션 값 ="2 ">客户服务</ 옵션> 
                                <옵션 값 = "3">购买支付</ 옵션> 
                            </ 선택> 
                        </ DIV>
                    </ div> 
                    <div 클래스 = "폼 그룹">
                        <라벨 = "이름"클래스 = "제어 라벨 COL-MD-2">姓名</ 라벨> 
                        <div 클래스 = "COL-MD-2"> 
                            <input 타입 = "텍스트"클래스 = "폼 제어 "ID ="사용자 이름 "이름 ="사용자 이름 "> 
                        </ DIV> 
                    </ DIV> 
                    <DIV 클래스 ="폼 그룹 "> 
                        이메일 = 대한 <라벨" "클래스 ="제어 라벨 COL-MD-2 ">邮箱</ 라벨> 
                        <div 클래스 = "COL-MD-6"> 
                            <input 타입 = "텍스트"클래스 = "폼 제어"ID = '이메일'이름 = "이메일"> 
                        </ div> 
                    </ div> 
                    <div 클래스 = "폼 그룹">
                        <= 레이블 "이미지"클래스 = "제어 라벨 COL-MD-2">图片</ 라벨> 
                        <div 클래스 = "COL-MD-6"> 
                            <input 타입 = "파일"ID = "이미지"이름 = "이미지"> 
                        </ div> 
                    </ div> 

                    <div 클래스 = "폼 그룹"> 
                        = "본체"클래스 <라벨 = "제어 라벨 COL-MD-2">内容</ 라벨> 
                        <div 클래스 = "COL-MD-6"> 
                            <텍스트 영역 NAME = "본체"ID = "본체"COLS = "30"행 = "10"클래스 = "폼 제어"> </ 텍스트 영역>
                        </ div> 
                    </ div> 
                    <div 클래스 = "COL-MD-오프셋 2">
                        <input 타입 = "제출"클래스 = "btn을 BTN - 우선"값 = "提交"> 
                        <input 타입 = "초기화"클래스 = "BTN BTN 기본"값 = "重置"> 

                    </ div> 
                </ 양식 > 
            </ DIV> 
            <DIV 클래스 = "패널 바닥 글"> 

            </ DIV> 
        </ DIV> 
    </ DIV> 

{%의 엔드 블록 %}

경로 :

플라스크 수입 플라스크,는 render_template 

앱 = 플라스크 (__ name__) 


@ app.route ( "/") 
DEF 인덱스 () : 
    복귀는 render_template ( 'base.html') 


#模板继承
@ app.route ( "/ 피드백 /") 
DEF 피드백 () : 
    복귀는 render_template ( 'post.html') 


의 경우 __name__ == '__main__' 
    app.run ( 
        디버그 = TRUE 
    )

결과에 액세스보기

데이터베이스, 테이블과 필드를 준비

하여 표 카테고리 (만들기 
  분류로의 TEXT 
) 

INSERT INTO 범주 값 ( '품질'); 
INSERT INTO 범주 값 ( '고객 서비스') 
; INSERT INTO 범주 값 ( '구매 지불하기') 

의 범주에서 SELECT ROWID를, *는; 

하여 테이블 만들기 피드백 ( 
  Subjeck 텍스트, 
  카테고리 ID 정수, 
  사용자 이름 텍스트, 
  이메일의 텍스트, 
  이미지 텍스트, 
  본문 텍스트, 
  주 부울, 
  회신 텍스트, 
  ReleaseTime DATETIME, 
  외국 KEY합니다 (카테고리 ID)를 참조 카테고리합니다 (ROWID) 
); 

피드백에서 SELECT *; 

피드백 값으로 INSERT ( '온라인 뱅킹은 지불 할 수없는?', 3, 'XX'를 , 'qq.com', 널 (null), ' 온라인 뱅킹을 지불 할 수없는', NULL, NULL, NULL) 

은 SELECT * 피드백에서;

데이터 처리 중 제출보기

# 코딩 : UTF-8 
수입 sqlite3를 
날짜 가져 오기 날짜로부터 
플라스크 수입 플라스크 요청는 render_template 리디렉션에서 url_for 

앱 = 플라스크 (__ name__) 

DATABASE = R '. \ DB \ feedbach.db' 


@ app.route ( "/" ) 
DEF 인덱스 () : 
    복귀는 render_template ( 'base.html') 


#模板继承
@ app.route ( "/ 피드백 /") 
DEF 피드백 () : 
    복귀는 render_template ( 'post.html') 


@ app.route ( "/ post_feedback / "메소드 ="POST "]) 
DEF post_feedback () 
    " ""提交视图"" " 
    경우 request.method == 'POST'#如果是포스트请求就获取表单值
        대상으로 Request.Form =. ( '주제'를 얻을,NONE) 
        카테고리 ID = request.form.get ( '장르', 1)
        = request.form.get 사용자 이름 ( '이름') 
        이메일 request.form.get에서 = ( '이메일') 
        신체 request.form.get = ( '몸') 
        release_time = STR (DateTime.Now ()) 
        주 = 0 
        인쇄 (주제, 카테고리 ID, 이름, 이메일, 몸 상태, release_time) 
        CONN = sqlite3.connect (DATABASE) 
        C = conn.cursor () 
        #을 사용하여 SQL 주입을 방지? 대신 값의 
        SQL = "피드백 INTO INSERT (Subjeck, 카테고리 ID, 사용자 이름, 이메일, 바디, 주, ReleaseTime) 값 (?,?,?,?,?,?,?)" 
        C.execute (SQL, (주제, 카테고리 ID , 사용자 이름, 이메일, 몸, 주, release_time)) 
        conn.commit () 
        conn.Close () 
        #은 Caton 페이지를 채우기 위해 제출 점프 후 반복 제출로 인한 방지하기 위해
        (( '피드백') url_for) 리디렉션을 반환 


하는 경우 __name__ == '__main__' 
    app.run ( 
        디버그 = TRUE 
    )

양식의 속성을 수정

데이터베이스 쿼리

표시 기능, 페이지의 목록

주형

효과

쿼리 렌더링 논리

@ app.route ( "/ 목록 /") 
DEF리스트 () 
    CONN = sqlite3.connect (DATABASE) 
    C = conn.cursor () 
    SQL은 = "ROWID DESC 의해 피드백에서 순서 ROWID * 선택" 
    되먹임 = c.execute (SQL) .fetchall () 
    conn.close () 
    복귀는 render_template ( '피드백 list.html'항목 = 되먹임)

피드백 list.html

는 % { 'base.html'%} 연장 

{%} % 차단 main_content 
    <div 클래스 = "로우"> 
        <표 클래스 = "표 표 호버"> 
            <TR> 
                <TH> ID </ TH> 
                <TH> 주제 </ TH> 
                <TH> 카테고리 </ TH> 
                <TH> 사용자 </ TH는> 
                <TH> 사서함 </ TH> 
                <TH> 처리 상태 </ TH는> 
                <TH> 제출 </ TH> 
                <TH> 동작 </ TH> 
            </ TR> 
            {%} 부품의 항목 % 
                <TR> 
                    <TD> loop.index {{}} </ TD> <! - ID 기능 제공된 템플릿 신사 이송 ->
                    <TD> {{항목 [1]}} </ TD> 
                    <TD> {{항목 [2]}} </ TD>
                    <TD> {{항목 [3]}} </ TD> 
                    <TD> {{항목 [4]}} </ TD> 
                    <TD> <스팬 클래스 = "라벨 라벨 - {{ '위험'경우 항목 [7 ] == 0 다른 '성공'}} "> {{"未处理"만약 아이템 [7] 다른 == 0"已处理"}} </ SPAN> </ TD> 
                    <TD> {{항목 [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 %} 
        </ 테이블> 
    </ div> 

{%의 엔드 블록 %}

의뢰

# 코딩 : UTF-8 
수입 sqlite3를 
날짜 가져 오기 날짜로부터 
플라스크 수입 플라스크 요청는 render_template 리디렉션에서 url_for 

앱 = 플라스크 (__ name__) 

DATABASE = R '. \ DB \ feedbach.db' 


@ app.route ( "/" ) 
DEF 인덱스 () : 
    복귀는 render_template ( 'base.html') 


#模板继承
@ app.route ( "/ 피드백 /") 
DEF 피드백 () : 
    복귀는 render_template ( 'post.html') 


@ app.route ( "/ post_feedback / "메소드 ="POST "]) 
DEF post_feedback () 
    " ""提交视图"" " 
    경우 request.method == 'POST'#如果是포스트请求就获取表单值
        대상으로 Request.Form =. ( '주제'를 얻을,NONE) 
        카테고리 ID = request.form.get ( '장르', 1)
        = request.form.get 사용자 이름 ( '이름') 
        이메일 request.form.get에서 = ( '이메일') 
        신체 request.form.get = ( '몸') 
        release_time = STR (DateTime.Now ()) 
        주 = 0 
        인쇄 (주제, 카테고리 ID, 이름, 이메일, 몸 상태, release_time) 
        CONN = sqlite3.connect (DATABASE) 
        C = conn.cursor () 
        #을 사용하여 SQL 주입을 방지? 대신 값의 
        SQL = "피드백 INTO INSERT (Subjeck, 카테고리 ID, 사용자 이름, 이메일, 바디, 주, ReleaseTime) 값 (?,?,?,?,?,?,?)" 
        C.execute (SQL, (주제, 카테고리 ID , 사용자 이름, 이메일, 몸, 주, release_time)) 
        conn.commit () 
        conn.Close () 
        #은 Caton 페이지를 채우기 위해 제출 점프 후 반복 제출로 인한 방지하기 위해
        (( '피드백') url_for) 리디렉션 반환 


@ app.route ( "/ 목록 /") 
: DEF리스트 () 
    CONN = sqlite3.connect (DATABASE) 
    C = conn.cursor () 
    피드백에서 *는 SQL = "ROWID를 선택할 ROWID DESC "에 의해 순서 
    피드백 = c.execute (SQL) .fetchall () 
    conn.close () 
    복귀는 render_template ( '피드백 list.html'항목 = 되먹임) 


경우 __name__ == '__main__' 
    app.run ( 
        디버그 = 참 
    )

백서른에 도로를 개방 측정 : 프런트 엔드 데이터베이스 상호 작용을 달성하기 위해

추천