期末做品檢查

1.我的學期總結

這一學期，在杜雲梅老師的帶領下接觸到了網頁製做的課程，也接觸了新的開源工具python。python是一種面向對象的解釋型計算機程序設計語言，n具備豐富和強大的庫，可以把用其餘語言製做的各類模塊很輕鬆地聯結在一塊兒。python也是目前最受歡迎的編程語言。在管理信息系統的課程的學習中，主要能夠分爲前中後期三個階段。

前期階段:用Python進行簡單算數計算。瞭解和使用turtle庫（海龜庫），理解和練習條件、循環、函數定義，經過代碼畫出了五角星、同心圓、太陽花、中國國旗；學習字符串的基本操做，經過輸入字符串，輸出代碼計算後的結果、凱撒密碼、GDP格式化輸出、九九乘法表等簡單操做。利用python進行英文詞彙統計，組合數據類型練習，用文件形式實現完成的英文詞頻統計、中文詞頻數統計。利用datetime處理日期和時間，將字符串轉化成imestamp與timedelta。還了解管理信息系統概念與基礎，理解數據存儲的各種方式：字典、列表、元組、集合。

中期階段：初期的web網頁開發。學習了web基礎，用html元素製做web界面；練習使用下拉列表選擇框、無序列表、有序列表、定義列表；製做本身的導航條；練習樣式表：行內樣式表、內嵌樣式表、外部樣式表等；運用css作圖片導航塊，使用JS定義函數進行登陸註冊驗證，完成登陸與註冊頁面的前端，還有不一樣閱讀模式的使用

後期階段：開始進行Flask項目，加載靜態文件，父模板的繼承和擴展，鏈接mysql數據庫，建立用戶模型，創建mysql和app的鏈接。經過用戶模型，對數據庫進行增刪改查操做。完成註冊功能，將界面的數據存到數據庫，redirect重定向登陸頁。完成登陸功能，用session記住用戶名，增長用戶名。登陸以後更新導航。在父模板中更新導航，插入登陸狀態判斷代碼。完成註銷功能，清除session。發佈功能的實現，製做首頁的顯示列表，首頁列表顯示所有問答，完成問答詳情頁佈局，從首頁問答標題到問答詳情頁，完成評論功能，完成評論列表顯示及排序，我的中心顯示，我的中心標籤頁導航，完成我的中心—導航標籤，實現搜索功能（包括高級搜索等），實現密碼加密功能。還增長了模型分離與數據遷移，讓數據管理更加高效簡潔。

2.總結Python+Flask+MysqL的web建設技術過程

使用工具：pycharm64.exe ；  MySQL 、 Navicat for MySQL（可視化Mysql）

（1）主頁面

（2）註冊頁面

（3）登陸頁面

（4）我的中心

（5）發佈帖子

（6）底部導航

（7）評論

主要代碼：

主py文件

import pymysql
from flask import Flask, render_template, request, redirect, url_for, session
from flask_sqlalchemy import SQLAlchemy
from functools import wraps
import config
from datetime import datetime
from sqlalchemy import or_,and_

pymysql.install_as_MySQLdb()

app = Flask(__name__)
app.config.from_object(config)
db = SQLAlchemy(app)


class User(db.Model):
    __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)
    nickname = db.Column(db.String(50))



class Sent(db.Model):
    __tablename__ = 'sent'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    title = db.Column(db.String(100), nullable=False)
    detail = db.Column(db.TEXT, nullable=False)
    author_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    creat_time = db.Column(db.DateTime, default=datetime.now)
    author = db.relationship('User', backref=db.backref('sent'))


class Comment(db.Model):
    __tablename__ = 'comment'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    author_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    sent_id = db.Column(db.Integer, db.ForeignKey('sent.id'))
    creat_time = db.Column(db.DateTime, default=datetime.now)
    detail = db.Column(db.TEXT, nullable=False)
    sent = db.relationship('Sent', backref=db.backref('comments', order_by=creat_time.desc))
    author = db.relationship('User', backref=db.backref('comments'))


db.create_all()



# 添加
# user=User(username='mis111',password='starlight')
# db.session.add(user)
# db.session.commit()

# 修改
# user = User.query.filter(User.username == 'vixx').first()
# user.password = '00000'
# db.session.commit()

# 刪除


# user = User.query.filter(User.username == 'mis111').first()
# db.session.delete(user)
# db.session.commit()

# 遍歷首頁
@app.route('/')
def base():
    context = {
        # 'sent':Sent.query.order_by('creat_time').all(),
        'username': Sent.query.order_by('creat_time').all()
    }
    return render_template('shouye.html', **context)


# @loginFirst
@app.route('/detail/<sent_id>')
def detail(sent_id):
    sentt = Sent.query.filter(Sent.id == sent_id).first()
    context = {
        'comments': Comment.query.all(),
    }
    return render_template('detail.html', sen=sentt, **context)


@app.route('/login/', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('dl.html')
    else:
        username = request.form.get('dlusername')
        password = request.form.get('dlpassword')
        user = User.query.filter(User.username == username, User.password == password).first()
        if user:
            session['user'] = username
            session.permanent = True
            return redirect(url_for('base'))
        else:
            return '用戶不存在或密碼錯誤'


@app.context_processor
def mycontext():
    usern = session.get('user')
    user=User.query.filter(User.username == session.get('user')).first()
    if usern:
        return {'usern': usern,
                'useraction':user}
    else:
        return {}


@app.route('/logout/')
def logout():
    session.clear()
    return redirect(url_for('base'))


@app.route('/register/', methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        return render_template('zhuce.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        nickname = request.form.get('nickname')

        user = User.query.filter(User.username == username).first()
        if user:
            return "帳戶已存在"
        else:
            user = User(username=username, password=password, nickname=nickname)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('login'))


def loginFirst(func):
    @wraps(func)
    def wrapper(*args, **kwargs):
        if session.get('user'):
            return func(*args, **kwargs)
        else:
            return redirect(url_for('login'))

    return wrapper


@app.route('/sent/', methods=['GET', 'POST'])
@loginFirst
def sent():
    if request.method == 'GET':
        return render_template('sent.html')
    else:
        title = request.form.get('titleDetail')
        detail = request.form.get('questionDetail')
        author_id = User.query.filter(User.username == session.get('user')).first().id
        sent = Sent(title=title, detail=detail, author_id=author_id)
        db.session.add(sent)
        db.session.commit()
        return redirect(url_for('base'))


        # return render_template('sent.html')


@app.route('/comment/', methods=['POST'])
@loginFirst
def comment():
    comment = request.form.get('comment')
    sent_id = request.form.get('sent_id')
    auth_id = User.query.filter(User.username == session.get("user")).first().id
    comm = Comment(author_id=auth_id, sent_id=sent_id, detail=comment)
    db.session.add(comm)
    db.session.commit()
    return redirect(url_for('detail', sent_id=sent_id))


@app.route('/usercenter/<user_id>/<tag>')
@loginFirst
def usercenter(user_id, tag):
    user = User.query.filter(User.id == user_id).first()
    context = {
        'username': user.username,
        'sent': user.sent,
        'comments': user.comments,
        'user': user
    }
    if tag == 'wenda':
        return render_template('wenda.html', **context)
    elif tag == 'pinlun':
        return render_template('pinlun.html', **context)
    else:
        return render_template('GRZX.html', **context)



@app.route('/search/')
def search():
    qu = request.args.get('q')
    ques = Sent.query.filter(
        or_(
            Sent.title.contains(qu),
            Sent.detail.contains(qu)
            )
    ).order_by('creat_time')
    return render_template('shouye.html', username=ques)



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

index.html

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Jelly音樂匯
        {% block title %}{% endblock %}
    </title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/index.css">
    {% block head %}{% endblock %}

</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid dao">


            <ul class="nav nav-pills nav2">
                <li><img src="{{ url_for('static',filename='image/logo.png') }}" width="50px" height="50px"></li>
                <li class="active"><a href="{{ url_for('base') }}">首頁</a></li>
                <li><a href="#">國內榜</a></li>
                <li><a href="#">港澳臺榜</a></li>
                <li><a href="#">歐美榜</a></li>
                <li><a href="#">日韓榜</a></li>
                <li><a href="{{ url_for('sent') }}">發帖</a></li>
                {% if usern %}
                    <li style="float: right;margin-right: 100px"><a href="{{ url_for('logout') }}">註銷</a></li>
                    <li style="float: right"><a href="{{ url_for('usercenter',user_id=useraction.id,tag='wenda') }}">{{ usern }}</a></li>

                {% else %}
                     <li style="float: right;margin-right: 150px"><a href="{{ url_for('register') }}" style="color: hotpink">註冊</a></li>
                     <li style="float: right"><a href="{{ url_for('login') }}">登陸</a></li>
                {% endif %}

        <div >
    <form action="{{ url_for('search') }}" method="get" class="bs-example bs-example-form" role="form">
            <div class="col-lg-6" style="width: 250px;padding-bottom: 30px">
                <div class="input-group">
                    <input name="q" type="text" class="form-control" placeholder="請輸入關鍵字">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">搜索</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
    </form>
</div>
 </ul>


    </div>

</nav>
{% block body %}{% endblock %}

</body>
</html>

shouye.html

    {% extends 'index.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            首頁
        {% endblock %}</title>
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/shouye.css') }}">
    {% endblock %}

{% block body %}
{#<div class="back">#}

    <div class="all" >

{#    <div class="panel panel-default">#}
{#    <div class="panel-body">#}
        {% for foo in username %}
            <div class="wai"  >
                <li class="have-img">
                    <div class="content">
                        <div class="author">
                            <a class="avatar" target="_blank" href="">
                                <img class="img" src="{{ url_for('static',filename='image/touxiang.jpg') }}"></a>
                        <div class="info">
                                <a class="nickname"
                                   href="{{ url_for('usercenter',user_id=foo.author_id,tag='wenda')}}">{{ foo.author.username }}</a>
                                <span class="badge"
                                      data-shared-at="2017-11-30T08:15:03+08:00">{{ foo.creat_time }}</span>

                            </div>
                        </div>
                        <br>
                        <a style="font-size: 20px" class="stitle" target="_blank"
                           href="{{ url_for('detail',sent_id=foo.id) }}">{{ foo.title }}</a>
                        <p class="abstract">
                            {{ foo.detail }}</p>
                        <div class="meta">
                            <a class="collection-tag" target="_blank" href="">{{ biaoqian }}</a>
                        </div>
                    </div>
                </li>
            </div>
        {% endfor %}
    </div>
</div>
    <div id="dibu">

    <div class="img"><a href="http://music.163.com/"><img src="{{ url_for('static',filename='image/music.jpg') }}"></a><div class="desc"></div><a href="#">友情連接</a></div>
    <div class="img"><a href="https://y.qq.com/portal/playlist.html"><img src="{{ url_for('static',filename='image/back2.jpg') }}"></a><div class="desc"></div><a href="#">音樂中心</a></div>
    <div class="img"><a href="http://www.melon.com/index.htm"><img src="{{ url_for('static',filename='image/melon.jpg') }}"></a><div class="desc"></div><a href="#">Melon</a></div>
    <div class="img"><a href="http://www.baidu.com"><img src="{{ url_for('static',filename='image/music1.jpg') }}"></a><div class="desc"></div><a href="#">回到頂部</a></div>

</div>


{% endblock %}

login.html

{% extends 'index.html' %}
   {% block body %}
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>

<div class="lg-container" >
    <h1>登陸</h1>
    <form action="{{ url_for('login') }}" method="post" id="lg-form" name="lg-form" >

        <div>
                <label for="username">Username:</label>
                <input class="shuru" id="uname" type="text" name="dlusername" placeholder="請輸入用戶名"><br>
        </div>

        <div>
        <label for="password">Password:</label>
              <input class="shuru" id="upass" type="password" name="dlpassword" placeholder="請輸入密碼" >
        </div>

        <input type="checkbox" name="vehicle" value="true" ><span>記住密碼</span>
        <a class="right" href="">登陸遇到問題?</a>


        <div id="error_box"></div>
        <button type="submit" value="login" id="login" onclick="return fnLogin()">登陸</button>

    </form>
    <div id="message"></div>
</div>
{% endblock %}

zhuce.html

{% extends 'index.html' %}
{% block body %}
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>

<div class="lg-container">
    <h1>註冊</h1>
    <form action="{{ url_for('register') }}" method="post" id="lg-form" name="lg-form" >

        <div>
            <label for="username">Username:</label>
                <input class="shuru" type="text" name="username" autocomplete="off" placeholder="請輸入登陸用戶名">

        </div>
        <div>
            <label for="nickname">nickname:</label>
                <input class="shuru" type="text" name="nickname" autocomplete="off" placeholder="請輸入暱稱">

        </div>
{#        <div>#}
{#        <label for="phonenumber">phonenumber:</label>#}
{#              <input type="text" name="phonenumber" autocomplete="off" placeholder="手機號碼" >#}
{#        </div>#}
        <div>
            <label for="password">Password:</label>
               <input class="shuru" type="password" id="upass" name="password" autocomplete="off" placeholder="設置密碼" >
        </div>
        <div>
              <label for="password">Password1:</label>
              <input class="shuru" type="password" id="upass1" name="password" autocomplete="off" placeholder="確認密碼" >
        </div>

        <div id="error_box"></div>
        <button type="submit" id="regist" onclick="return fnzhuce()">註冊</button>

    </form>

</div>
{% endblock %}

detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'index.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            詳情
        {% endblock %}
    </title>
    {% block head %}
        <link rel="stylesheet" href="../static/css/detail.css">
    {% endblock %}

</head>
<body>
{% block body %}
    <div class="all have-img">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="page-header">
                        <h3>
                            標題:{{ sen.title }}
                            <br>
                            <small>做者:{{ sen.author.username }}</small>
                            <small class="badge">時間:{{ sen.creat_time }}</small>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <p>
                        {{ sen.detail }}
                    </p>
                </div>
            </div>
        </div>
        <div>

            <form role="form" action="{{ url_for('comment') }}" method="post">
                    <textarea placeholder="寫出你的評論" class="form-control" rows="10" id="comment"
                              name="comment">
                    </textarea>
                <input type="hidden" name="sent_id" id="sent_id" value="{{ sen.id }}">
                <div class="button">
                    <button type="submit">發佈</button>

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

            <h4>評論：({{ sen.comments|length }})</h4>
            {% for foo in comments %}
                <ul style="padding-left: 0px;margin-bottom: 0px;">
                    <li class="list-group-item" style="width: 900px">
                        <a href="{{ url_for('usercenter',user_id=foo.author.id,tag='wenda') }}">{{ foo.author.username }}</a>
                        <span class="badge">評論時間:{{ foo.creat_time }}</span>
                        <p>{{ foo.detail }}</p>
                    </li>
                </ul>

            {% endfor %}

        </div>


    </div>
{% endblock %}

</body>
</html>

geren.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            我的中心
        {% endblock %}
    </title>
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}">
    {% endblock %}
    {#<link rel="stylesheet" href="../static/css/geren.css">#}
</head>
<body>
{% block user %}
    <div class="all have-img">

        <div>

            <h4>用戶名：{{ username }}
                <br>
                <small>所有問答</small>
            </h4>
            {% for foo in sent %}
                <ul style="padding-left: 0px;margin-bottom: 0px;">
                    <li class="list-group-item" style="width: 900px">
                        <a href="">{{ foo.author.username }}</a>
                        <span class="badge">評論時間:{{ foo.creat_time }}</span>
                        <p>{{ foo.detail }}</p>
                    </li>
                </ul>
            {% endfor %}
        </div>
        <hr>

        <div>

{#            <h4>用戶名：{{ sent_username }}#}
{#                <br>#}
                <small>所有評論</small>
{#            </h4>#}
            {% for foo in comments %}
                <ul style="padding-left: 0px;margin-bottom: 0px;">
                    <li class="list-group-item" style="width: 900px">
                        <a href="#">{{ foo.author.username }}</a>
                        <span class="badge">評論時間:{{ foo.creat_time }}</span>
                        <p>{{ foo.detail }}</p>
                    </li>
                </ul>
            {% endfor %}

        </div>
        <hr>

                <div>
                    <h4>{{ user }}
                        <br>
                        <small>用戶資料</small>
                    </h4>

                    <ul style="padding-left: 0px;margin-bottom: 0px;">
                        <li class="list-group-item" style="width: 900px">用戶：{{ username }}</li>
                        <li class="list-group-item" style="width: 900px">編號：</li>
                        <li class="list-group-item" style="width: 900px">暱稱：</li>
                    </ul>
                </div>

    </div>
{% endblock %}

</body>
</html>

GRZX.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>{% block title %}
        我的中心
    {% endblock %}</title>
{% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}">
{% endblock %}
</head>
<body>
{% block user %}
    <div class="all have-img">
          <h4>{{ username }}
        <small> 我的資料</small></h4>
    <hr>


            <a href="#" class="list-group-item " style="background-color: pink">用戶：{{ username }}</a>
            <a href="#" class="list-group-item" style="background-color: pink">編號：{{ id }}</a>
            <a href="#" class="list-group-item" style="background-color: pink">暱稱：lwn1224 </a>
{#            <ul style="padding-left: 0px;margin-bottom: 0px;">#}
{#            <li class="list-group-item" style="width: 900px">用戶：{{ username }}</li>#}
{#            <li class="list-group-item" style="width: 900px">編號：{{ id }}</li>#}
{#            <li class="list-group-item" style="width: 900px">暱稱：{{ nickname }}</li>#}
{#        </ul>#}
    </div>
{% endblock %}
</body>
</html>

pinlun.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>{% block title %}
        評論
    {% endblock %}</title>
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}">
    {% endblock %}
</head>
<body>
{% block user %}
    <div class="all have-img">
        <h4>{{ username }}
        <small> 所有評論</small></h4>
    <hr>
        {% for foo in comments %}
            <ul style="padding-left: 0px;margin-bottom: 0px;">
                <li class="list-group-item" style="width: 900px">
                    <a href="#">{{ foo.author.username }}</a>
                    <span class="badge">評論時間:{{ foo.creat_time }}</span>
                    <p>{{ foo.detail }}</p>
                </li>
            </ul>
        {% endfor %}

    </div>
{% endblock %}
</body>
</html>

sent.html

{% extends 'index.html' %}

    <meta charset="UTF-8">
    <title>發佈</title>
    <link rel="stylesheet" type="text/css" href="../static/css/release.css">

{% block body %}
    <div class="container" style="background-image: url(/static/image/back.jpg);width: 500px" >
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
        </div>
       <div class="lg-container">
          <h1 align="center" style="color: salmon">發佈帖子</h1>
        <form action="{{ url_for('sent') }}" method="post"><br/>
        <div class="q">

            <label for="titleDetail">標題</label><br>
{#             <input type="text" placeholder="標題" class="form-control" id="titleDetail" name="titleDetail">#}

            <textarea id="titleDetail" name="titleDetail"　class="form-control" cols="80" rows="1"></textarea>
        </div>
        <div class="form-group">
            <label for="questionDetail">內容</label><br>
{#            <textarea class="form-control" id="questionDetail" name="questionDetail" cols="60" rows="5" ></textarea>#}
            <textarea placeholder="詳情" class="form-control" rows="5" id="questionDetail" name="questionDetail" style="width: 500px"></textarea>
        </div>

       <br>
            <button type="submit" onclick="{{ url_for('sent') }}" >發佈</button>
     </form>

        </div>
    <div class="col-md-4 column">
        </div>
    </div>
</div>
{% endblock %}

user.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'index.html' %}
    <meta charset="UTF-8">
    <title>{% block title %}
        我的
    {% endblock %}</title>
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}">

    {% endblock %}
</head>
<body>
{% block body %}
    <div class="all">

        <ul class="nav nav-tabs">
            <li class="active"><a href="{{ url_for('usercenter' ,user_id=user.id,tag='wenda') }}">所有問答</a></li>
            <li><a href="{{url_for('usercenter' ,user_id=user.id,tag='pinlun') }}">所有評論</a></li>
            <li><a href="{{ url_for('usercenter' ,user_id=user.id,tag='geren') }}">我的信息</a></li>

        </ul>
    </div>
    {% block user %}{% endblock %}
{% endblock %}

</body>
</html>

wenda.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>{% block title %}
        問答
    {% endblock %}</title>
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}">
    {% endblock %}
</head>
<body>
{% block user %}
    <div class="all have-img">
     <h4>{{ username }}
        <small> 所有問答</small></h4>
    <hr>
        {% for foo in sent %}
            <ul style="padding-left: 0px;margin-bottom: 0px;">
                <li class="list-group-item" style="width: 900px">
                    <a href="">{{ foo.author.username }}</a>
                    <span class="badge">評論時間:{{ foo.creat_time }}</span>
                    <p>{{ foo.detail }}</p>
                </li>
            </ul>
        {% endfor %}
    </div>
{% endblock %}
</body>
</html>