期末做品檢查

時間 2019-11-17

標籤期末檢查简体版

原文原文鏈接

鏈接數據庫

打開命令提示符（win+R）

輸入 cmd 回車

輸入 數據庫的bin文件的路徑，例：C:\Program Files\MySQL\MySQL Server 5.7\bin 回車
輸入 mysql -u root -p 回車

輸入 mysql的密碼 回車（有設置密碼就輸入密碼 回車，沒密碼就直接回車）

輸入 show databases; 回車（注意：有 s 和 ; 號）

輸入 create database （數據庫名）charset utf8;(注意：此處的database無s，區別於上一條代碼，charset utf8設置了這個才能將中文存入數據庫)

運行結果如圖：javascript

建立數據庫的表格

創建mysql和app的鏈接,建立用戶模型 在py文件中建立表格

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
import databases

app = Flask(__name__)
app.config.from_object(databases)#app鏈接數據庫

db = SQLAlchemy(app)

class User(db.Model):建立user表格
    __tablename__ ='user'
    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    username = db.Column(db.String(20),nullable=False)
    password = db.Column(db.String(20), nullable=False)

class Trip(db.Model):
    __tablename__='trips'
    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    author_id = db.Column(db.Integer,db.ForeignKey('user1.id'))
    ttitle = db.Column(db.String(100),nullable=False)
    loca = db.Column(db.String(100),nullable=False)
    feeling =db.Column(db.Text,nullable=False)
    creat_time = db.Column(db.DateTime,default=datetime.now)
    author = db.relationship('User', backref=db.backref('trips'))連接user表，經過user.trips能夠獲取到trip表的內容

class Comment(db.Model):
    __tablename__ = 'comment'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    author_id = db.Column(db.Integer, db.ForeignKey('user1.id'))
    trip_id = db.Column(db.Integer, db.ForeignKey('trips.id'))
    detail = db.Column(db.Text, nullable=False)
    creat_time = db.Column(db.DateTime, default=datetime.now)
    author = db.relationship('User', backref=db.backref('comments'))連接到user表，經過user.comments能夠獲取到comment表中的內容
    travel = db.relationship('Trip', backref=db.backref('comments'))連接到trip表，經過trip.comments能夠獲取到comment表中的內容

db.create_all()數據庫建立表格語句 @app.route('/') def hello_world(): return 'Hello World!'


另外一個py文件
數據庫配置信息databases.py

SQLALCHEMY_DATABASE_URI='mysql+pymysql://root:@127.0.0.1:3306/data?charset=utf8' 註釋：root是數據庫名，冒號後面是密碼

　SQLALCHEMY_TRACK_MODIFICATIONS =False

項目須要使用的庫

from flask import Flask,request,render_template,redirect,url_for,session
from flask_sqlalchemy import SQLAlchemy
import sqlconnect
from functools import wraps
from  datetime import datetime
from sqlalchemy import or_, and_
from werkzeug.security import generate_password_hash,check_password_hash

網站父模板統一佈局：頭部導航條、中間主顯示區域佈局


做爲父模板，要讓子模板繼承，要加{%block title %}{% endblock %}

{%block title %}{% endblock %}子模板能夠增長title

{%block head %}{% endblock %}子模板能夠增長head

{%block main %}{% endblock %}子模板能夠增長body的內容

頭部導航條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %} </title>
    <link href="../static/base.css" rel="stylesheet" type="text/css">  鏈接到css文件
    <script src="../static/base.js"></script>  鏈接到javaScript文件
{% block head %}{% endblock %}
</head>
<body id="myBody">

<div class="daohanglang" id="daohanglang">
    <ul class="daohanglang dh" id="daohanglang">
        <li><img class="turn_on_off" id="on_off" onclick="mySwitch()" src="{{ url_for('static',filename='image/on.jpg') }}" width="25px" height="30px"></li>
        <li class="daohang"><a class="daohang"  href="{{ url_for('first')}}"><img src="../static/image/sy.png" width="25px">首頁</a></li>
        <li class="daohang"><a class="daohang"  href="{{ url_for('trip')}}">發佈遊記</a></li>
        <li class="daohang"><a class="daohang"  href="#">旅行攻略</a></li>
        <li class="daohang">
            <form action="{{ url_for('search') }}">
                <input class="sousuo" id="sousuo" type="text" placeholder="搜索" name="tri">
                <button type="submit" ><img src="../static/image/fdj.png" width="15px"></button>
            </form>
        </li>
    </ul>

　　<nav>
    {% if username %}
        <a class="daohangright" href="{{ url_for('logout') }}">註銷</a>  logout是後臺設置註銷功能的函數名
        <a class="daohangright" href="{{ url_for('centen',user_id =session['userid'], tag='1') }}"><img src="../static/image/ren.png" width="20px" height="20px"> {{ username 　　　　　　}}</a>
    {% else %}
        <a class="daohangright" href="{{ url_for('sign_up') }}" >註冊</a> sign_in是後臺設置登陸功能的函數名
        <a class="daohangright" href="{{ url_for('sign_in') }}" >登陸</a> sign_up是後臺設置註冊功能的函數名
    {% endif %}
　　</nav>
</div>

中間的主顯示區，主要在body裏面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>註釋：<div style=「...」>經過在style設置，能夠設置div的位置，樣式等，也能夠經過css文件來設置
　　<div>
　　　　hello python!
　　</div>

　　<div>
　　　　hello word!
　　</div>

</body> </html>

註冊、登陸、註銷

註冊頁面的前端
<div class="box">
     <h2 class="title">
     <div class="normal-title">
     　　<a class="color" href="http://127.0.0.1:5000/login/">登陸</a>
     　　<b>|</b>
     　　<a  class="color" href="http://127.0.0.1:5000/regiter/">註冊</a>
     </div></h2>
     <form action="http://127.0.0.1:5000/regiter/" method="post">
           <div class="input-box" >
                <input id="newname" type="text" placeholder="please enter user name" name="newname">用戶設置用戶名 name="newname"是給後臺傳值，id="newname"是給javascript傳值
           </div>
           <div class="input_box">
               <input id="newpass" type="password" placeholder="Please enter your password" name="newpass">用戶設置密碼 name="newname"是給後臺傳值，id="newname"是給javascript傳值

　　　　　　</div>
 　　　　　　<div class="input_box"> <input id="againpass" type="password" placeholder="Please enter your password again" name="againpass">用戶肯定密碼 </div> 
　　　　　　 <div id="error_box"><br></div>設置一個報錯的div，驗證輸入的內容是否合法 
　　　　　　　<div class="input_box"> <button onclick="return mySubmit()">Submit</button></div>提交按鈕，onclick是給按鈕添加動做，返回一個mySubmit()的函數

 </form> </div>

javaScript 用於驗證用戶註冊的用戶名和密碼是否合法
function mySubmit(){
            var oNewname = document.getElementById("newname");
            var oNewpass = document.getElementById("newpass");
            var oAgainname = document.getElementById("againpass");
            var oError = document.getElementById("error_box");
            oError.innerHTML="<br>"
            //驗證用戶名，用戶名要6-12位數
            if(oNewname.value.length<6 && oNewname.value.length>12) {
                oError.innerHTML = "User name must be between 6 and 12 digits!!!";
                return false;
            }
　　　　　　//用戶名的第一位不能是數字
           else if ((oNewname.value.charCodeAt(0)>=48)&&(oNewname.value.charCodeAt(0)<=57)){
                oError.innerHTML = "The first letter can not be a number!!!";
                return false;
            }
　　　　　　　//用戶名只能爲數字或密碼
            else for(var i=0;i<oNewname.value.length;i++){
                if((oNewname.value.charCodeAt(i)<48 || oNewname.value.charCodeAt(i)>57)&&(oNewname.value.charCodeAt(i)<97 || oNewname.value.charCodeAt(i)>122)){
                    oError.innerHTML = "Only number and letter!!! ";
                    return false;
                }
                }
            //驗證密碼
            if(oNewpass.value.length>12|| oNewpass.value.length<6){
                oError.innerHTML="The password must be between 6 and 12 digits!";
                return false;
            }
           //判斷用戶輸入兩次的密碼是否一致
            else if(oNewpass.value != oAgainname.value) {
                oError.innerHTML="The password entered twice is not the same!!!";
                return false;
            }
　　　　　　　　//驗證成功
            window.alert("Successful registration！")
            return true;
        }

註冊頁面的後臺python文件
@app.route("/regiter/",methods=['GET','POST'])網頁請求的方法：GET，POST  Get方法用於瀏覽頁面，Post方法用於提交頁面
def sign_up():
    if request.method == 'GET':若是請求的方法是GET
        return render_template("sign_up.html")返回註冊頁面
    else:
        name = request.form.get('newname')獲取前端的用戶名
        passw = request.form.get('newpass')獲取前端的用戶密碼
        samename = User.query.filter(User.username == name).first()在User表中查詢是否存在同樣的用戶名
        if samename:存在同樣的用戶名，返回提示
            return u'username existed!'
        else:
            # 將用戶名和密碼存入數據庫
            users =User(username = name ,password = passw,)
            db.session.add(users)
            db.session.commit()
            return render_template("sign_in.html")#註冊成功後跳轉到登陸界面

注：登陸頁面的前端與註冊頁面的前端類似，驗證用戶名和密碼是否合法的方法也是類似的css

登陸頁面的後臺python文件
@app.route("/login/",methods=['GET','POST'])
def sign_in():
    if request.method =='GET':
        return render_template("sign_in.html")
    else:
        name = request.form.get('name')
        passw = request.form.get('password')
        user = User.query.filter(User.username == name).first()
        #判斷用戶名是否存在
        if user:
            #判斷密碼是否正確
            if user.check_password(passw):
                session['user']=name#記住用戶名  前端調用：session['user'] 後端調用:session.get('user')
                session['userid'] = user.id 記住用戶id
                session.permanent = True
                return redirect(url_for('first'))登陸成功返回首頁
            else:
                return u'密碼錯誤！'
        else:
            return u'不存在該用戶名！'

註銷只須要清除session保存的值
@app.route('/logout/')
def logout():
    session.clear()
    return redirect(url_for('first'))

運行結果如圖：html

發佈、列表顯示

發佈頁面的前端
{% extends 'base.html' %}繼承父模板
{% block title %}
發佈遊記
{% endblock %}
{% block head %}
    <link href="../static/tijiao.css" rel="stylesheet" type="text/css">
    <script src="../static/tijiao.js"></script>
{% endblock %}
{% block main %}
<h2 style="text-align:center; font-family:華文行楷" >發佈遊記</h2>
    <form action="http://127.0.0.1:5000/trip/" method="post" style="align-content: left">
        <div class="triptext">
            <label for="zhuti" class="wenzi" >主題</label><br>
            <textarea class="zhuyaoneirong" rows="1" cols="65" id="zhuyao" name="biaoti"></textarea><br>
            <label for="didian" class="wenzi">地點</label><br>
            <textarea class="zhuyaoneirong" rows="1" cols="65" id="zhuyao" name="locat"></textarea><br>
            <label for="youji" class="wenzi">遊記</label><br> 
            <textarea class="neirong" rows="20" cols="65" id="xiangqing" name="feel"></textarea><br>
            <button onclick="return myQuestion()">發佈</button>
        </div>
    </form>
{% endblock %}

發佈頁面的JavaScript
function myQuestion(){
    return True
}

發佈頁面的後端python
@app.route("/trip/",methods=['GET','POST'])
@login_re
def trip():
    if request.method=='GET':
        return render_template("trip.html")
    else:
        ttitle = request.form.get('biaoti')
        location = request.form.get('locat')
        feel = request.form.get('feel')
        authorid = User.query.filter(User.username == session.get('user')).first().id
        trips = Trip(ttitle =ttitle,loca = location,feeling=feel,author_id=authorid)
        db.session.add(trips)將用戶輸入的遊記存入Trip表
        db.session.commit()
        return redirect(url_for('first'))


首頁顯示Trip表中的數據

@app.route('/')
def first():
    context={
　　　　　　查找Trip表中全部的數據
        'visit':Trip.query.order_by('-creat_time').all()#在Trip表中查詢，根據建立時間排序
    }
    return render_template("first.html",**context)把context傳值給first頁面發佈列表發佈的遊記顯示在首頁{% extends 'base.html' %}

{% block title %}
首頁
{% endblock %}
{% block head %}
    <link href="{{ url_for('static',filename='zz.css') }}" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="../static/gongneng.js"></script>
{% endblock %}

{% block main %}
<body bgcolor="#696969">
<div id="kuai">
    <ul class="trip-list" >
        {% for t in visit %}<li class="trip">
                <span class="" aria-hidden="true"></span>
                <a class="picture"><img src="../static/image/tx1.png"> </a>
                <a href="{{ url_for('centen',user_id=t.author_id,tag=1) }}" class="a wenzi">{{ t.author.username }}</a>給用戶名添加連接，連接到該用戶的我的中心
                <span class="createtime wenzi">{{ t.creat_time }}</span><br>顯示發佈遊記的時間 
　　　　　　　　<a class="a wenzi" href="{{ url_for ('td',trip_id=t.id) }}" >{{ t.ttitle }}</a>連接到這篇遊記的詳細內容頁
              <span class="location wenzi"><img src="../static/image/dd.png" width="15px"> {{ t.loca }}</span> 顯示地點
              <p class="wenzi">{{ t.feeling }}</p> </li>顯示遊記內容
　　　　　　 <li class="nav"> 
　　　　　　　　<div class="dzsc"> <a href="{{ url_for ('td',trip_id=t.id) }}" class="aa wenzi"> <img src="../static/image/pl.png" width="18px"> {{ t.comments|length }} </a> 
　　　　　　　　註釋：顯示該遊記總評論數，連接到詳情頁，獲取這篇遊記的id傳遞給詳情頁
　　　　　　　　</div> </li>
　　　　　　 <hr style="width: 100%"> {% endfor %}
 　　　　　　　</ul> 
　　　　　　　　</div> </body> {% endblock %}

運行結果如圖：前端

詳情頁、評論、列表顯示

詳情頁面的前端
{% extends 'base.html' %}繼承父模板
{% block title %}
{% endblock %}
{% block head %}
    <link href="../static/zz.css" rel="stylesheet" type="text/css">
    <script src="../static/tijiao.js"></script>
{% endblock %}
{% block main %}
<body bgcolor="#696969">
<div style="float: right">
    <ul id="divright">
        <li><a class="dtpic">
            <img src="../static/image/tx1.png">
        </a></li>
        <li><a href="{{ url_for('centen',user_id=tri.author_id,tag=1) }}" class="a wenzi">{{ tri.author.username }}</a></li><br>
　　　　註釋：{{tri.author.username}}是顯示遊記的做者名
　　　　　　{{url_for('center',user_id=tri.author_id,tag=1)}}給名字添加連接，連接到該做者的用戶中心，給center傳入做者的id和tag=1的信息
        <li><span class="wenzi">{{ tri.loca }}</span></li><br>顯遊記的地點
        <li><span class="createtime wenzi">{{ tri.creat_time }}</span></li><br>顯示發佈遊記的時間
    </ul>
</div>
<div id="divleft" class="bianju">
    <div class="bianju">
        <p class="a center wenzi">{{ tri.ttitle }}</p>顯示遊記的題目
        <br>
        <p class="wenzi">{{ tri.feeling }}</p><br>顯示遊記的內容
    </div>
    <hr>
    <form action="{{ url_for('comment') }}" method="post" >設置form表單用戶提交用戶的評論
        <div class="bianju">
            <textarea class="wenzi"  row="3"  cols="100" placeholder="請輸入評論" name="pinglun" ></textarea>
            <input name="tripid" type="hidden" value="{{ tri.id }}">隱藏的輸入框，輸入用戶的id
            <button type="submit">發送</button>
        </div>
    </form>
<hr>
    <div class="bianju">
        <h4 class="wenzi"><img src="../static/image/pl.png" width="20"> {{ tri.comments|length }}</h4>顯示該文章評論總數
<hr>
        <ul style="margin-bottom: 10px">
            {% for co in tri.comments %}循環輸出該遊記的全部評論
                <li>
                <a href="{{ url_for('centen',user_id=co.author_id,tag=1) }}" class="a wenzi">{{ co.author.username }}</a>顯示評論者名
                <span class="createtime wenzi">{{ co.creat_time }}</span>顯示評論時間
                <p class="wenzi">{{ co.detail }}</p><br>顯示評論內容
                </li>
<hr>
            {% endfor %}
    </ul>
    </div>
</div>
</body>
{% endblock %}

遊記詳情頁面的後端，python文件
@app.route("/td/<trip_id>")傳遞遊記的id
def td(trip_id):
    trip=Trip.query.filter(Trip.id == trip_id).first()查找到該遊記的數據
    return render_template("tripdetial.html",tri=trip )傳遞給詳情頁

用戶提交評論的後端操做，python文件
@app.route("/comment/",methods=['POST'])
@login_re
def comment():
    detial=request.form.get('pinglun')獲取前端傳遞的評論
    trip_id = request.form.get('tripid')獲取前端傳遞的遊記id
    author_id = User.query.filter(User.username == session.get('user')).first().id  經過用戶名查找到該用戶的id
    comment = Comment(detail=detial,author_id=author_id,trip_id=trip_id) 將評論內容，用戶id和遊記id存入Comment表
    db.session.add(comment)
    db.session.commit()
    return redirect(url_for("td",trip_id=trip_id ))返回該篇遊記的詳情頁

運行結果如圖：java

我的中心

我的中心頁面前端
{% extends 'base.html' %}
{% block title %}
我的中心
{% endblock %}
{% block head %}
    <link href="{{ url_for('static',filename='zz.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ url_for('static',filename='base.css') }}" rel="stylesheet" type="text/css">
    {% block header %}{% endblock %}
{% endblock %}
{% block main %}
<body bgcolor="#a9a9a9">
<div class="div-center">
    <div class="biaotidh">
        <ul class="nav_ul">
　　　　　　註釋：我的中心顯示該用戶全部的遊記，評論，點贊數和收藏數
            <li role="presentation"><a href="{{ url_for('centen',user_id = user.id,tag='1') }}" class="a wenzii border">所有遊記</a></li>
            <li role="presentation"><a href="{{ url_for('centen',user_id = user.id,tag='2') }}" class="a wenzii border">所有評論</a></li>
            <li role="presentation"><a href="{{ url_for('centen',user_id = user.id,tag='3') }}" class="a wenzii border">我的中心</a></li>
        </ul>
    </div>
    <hr>
    {% block user %}讓子頁面繼承
    {% endblock %}
</div>
 </body>
{% endblock %}

我的中心--所有評論頁面前端
{% extends 'usercen.html' %}繼承我的中心頁面
{% block header %}
    <link href="{{ url_for('static',filename='zz.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ url_for('static',filename='base.css') }}" rel="stylesheet" type="text/css">
{% endblock %}
{% block user %}
<div>
    <a class="dtpicc"><img src="{{ url_for('static',filename='image/tx1.png') }}"></a>
    <span class="wenzi a">{{ username }}</span>
    <h4 class="wenzi">遊記:({{ travel|length }})</h4>
    <ul class="usertrip" >
        {% for ave in travel %}
            <li class="trip">
                <span class="createtime wenzi">{{ ave.creat_time }}</span><br><br>
                <a class="a wenzi" href="{{ url_for ('td',trip_id=ave.id) }}" >{{ ave.ttitle }}</a>
            </li>
        {% endfor %}
    </ul>
</div>
{% endblock %}

我的中心頁面的後端，python
@app.route("/centen/<user_id>/<tag>")
@login_re
def centen(user_id,tag):
    user = User.query.filter(User.id == user_id).first()
    zan = Dianzan.query.filter(Dianzan.author_id == user.id).all()
    cang = Shoucang.query.filter(Shoucang.author_id == user.id).all()
    context = {
        'user':user,
        'username': user.username,
        'travel': user.trips,
        'comment': user.comments,
        'zan':zan,
        'cang':cang
    }
    if tag == '1':
        return render_template("user1.html", **context)
    if tag == '2':
        return render_template("user2.html", **context)
    if tag == '3':
        return render_template("user3.html", **context)

運行結果如圖：python

搜索，條件組合搜索

搜索、組合搜索功能的前端

<form action="{{ url_for('search') }}">連接到search函數
    <input class="sousuo" id="sousuo" type="text" placeholder="搜索" name="tri">將鍵入的值命名爲tri傳遞給後端
    <button type="submit" ><img src="{{ url_for('static',filename='image/fdj.png') }}" width="15px"></button>
</form>

搜索、組合搜索功能的後端，python文件

@app.route("/search/")
def search():
    t = request.args.get("tri")獲取前端要查找的值
    tri = Trip.query.filter(or_(Trip.ttitle.contains(t), Trip.feeling.contains(t))).order_by('-creat_time')在Trip表中查詢
    return render_template("first.html",visit = tri)返回並傳值給first頁面

運行結果如圖：mysql

我的學期總結

這個學期，老師帶領咱們學習了python的flask框架，通過一個學期的學習，我瞭解到這個框架的強大，這個框架相對於JSP是比較容易上手的。老師帶領咱們學習瞭如何使用python搭建Web和信息管理系統的原理，我學到了如何使用python作一個信息管理系統。老師的授課方式是我很喜歡的一種方式，雖然每節課後都有做業，但這能讓咱們學的更紮實。每次實現功能都能讓我擁有巨大的成就感。期末的大做業，我搭建了一個發佈旅行感覺的系統，這讓我將老師所教授的知識都發揮出來。我認爲我這個學期學的還不夠多，接下來我還會繼續學習，繼續深造。jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。