期末做品檢查

我的學期總結

這個學期接觸到了一門新的課程，叫管理信息系統，雖然叫作管理信息系統，可是咱們學的是利用Python、flask和mysql進行網頁開發與設計，也是一門蠻有意思的課程。

一開始，我覺得咱們會作一個系統什麼的，用於管理信息，固然只是從課程名字的字面意思去理解這門課程，但第一節課就讓我對這門課程有了一個初步的印象，就是寫網頁。雖然剛剛開始，把一些小的功能都演示一遍而且本身實操一遍，可是我能預料到，最後必定是把本身學過的全部東西彙總在一塊兒，成爲一個完整的做品。果不其然，期末的大做業正是如此。

因爲以前有學過Java，因此對這些代碼有必定的接觸，不會產生太大的陌生感，儘管代碼有些不一樣，可是也是八九不離十，有些代碼是比較晦澀難懂，在老師和同窗的幫助下也能順利的解決問題，其實嘛，代碼也不難，有些是固定的標籤什麼的，有些功能類的代碼老師都會講解的比較清楚，因此學習起來並非那麼的艱難。再加上咱們有另外一門課程叫作jsp，也是寫網頁的，和這一門課有一些殊途同歸之妙，二者相輔相成，相得益彰，在某種程度上也是能夠融會貫通的。

經過一學期的學習，我發現咱們是一個製做網頁的過程，雖然有些簡單，可是本身製做出來的網頁仍是蠻有成就感的。

總結Python+Flask+MysqL的web建設技術過程，標準以下：

1. 1. 便是對本身所學知識的梳理
   2. 也可做爲初學入門者的簡單教程
   3. 也可做爲本身之後複習的嚮導
   4. 也是一種向外展現能力的途徑

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

主py文件：

from flask import Flask,render_template,request,redirect,url_for,session
from flask_sqlalchemy import SQLAlchemy
import config
from sqlalchemy import or_, and_
from functools import wraps
from datetime import datetime
app = Flask(__name__)
app.config.from_object(config)
db=SQLAlchemy(app)

class User(db.Model):
    __table__name = '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 Question(db.Model):
    __tablename__ = 'question'
    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)
    creat_time = db.Column(db.DateTime,default=datetime.now)
    author_id=db.Column(db.Integer,db.ForeignKey('user.id'))
    author=db.relationship('User',backref=db.backref('question'))

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'))  # 外鍵
    question_id = db.Column(db.Integer, db.ForeignKey('question.id'))  # 外鍵
    detail = db.Column(db.Text, nullable=False)
    creat_time = db.Column(db.DateTime, default=datetime.now)
    question = db.relationship('Question', backref=db.backref('comments',order_by=creat_time.desc))
    author = db.relationship('User', backref=db.backref('comments'))
db.create_all()


@app.route('/')
def index():
    context = {
        'question': Question.query.all()
    }
    # question : Question.query.all()
    return render_template('index.html', **context)

@app.route('/regist/',methods=['GET','POST'])
def regist():
    if request.method=='GET':
        return render_template('regist.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 u'username existed'
        else:
            user=User (username=username,password=password,nickname=nickname)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('login'))


@app.route('/login/',methods=['GET','POST'])
def login():
    if request.method=='GET':
        return render_template('login.html')
    else:
        username=request.form.get('username')
        password=request.form.get('password')
        user = User.query.filter(User.username == username).first()
        if user:
            if user.password==password:
                session['user']=username
                session['userid'] = user.id
                return redirect(url_for('index'))
            else:
                return u'password error'
        else:
            return u'username is not existed'



@app.context_processor
def mycontext():
    usern=session.get('user')
    if usern:
        return{'username':usern}
    else:
        return{}

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


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('/lable/',methods=['GET','POST'])
@loginFirst
def lable():
    if request.method == 'GET':
        return render_template('lable.html')
    else:
        title = request.form.get('title')
        detail = request.form.get('detail')
        author_id = User.query.filter(User.username == session.get('user')).first().id
        question = Question(title=title, detail=detail, author_id=author_id)
        db.session.add(question)
        db.session.commit()
    return redirect(url_for('index'))

@app.route('/detail/<question_id>')
def detail(question_id):
    # context={
    #     'comments':Comment.query.all()
    # }
    quest = Question.query.filter(Question.id == question_id).first()
    return render_template('detail.html',ques=quest)

@app.route('/comment/', methods=['GET','POST'])
@loginFirst
def comment():
        comment= request.form.get('commentdetail')
        ques_id=request.form.get('question_id')
        auth_id=User.query.filter(User.username==session.get('user')).first().id
        comm=Comment(author_id=auth_id,question_id=ques_id,detail=comment)
        # question.author=User
        db.session.add(comm)  # 數據庫，添加操做
        db.session.commit() #提交
        return redirect(url_for('detail', question_id=ques_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,
        # 'questions':user.question,
        # 'comments':user.comments,
        'user': user
    }
    # return render_template('user.html',ques=user)
    if tag == '1':
        return render_template('user1.html',**context)
    elif tag == '2':
        return render_template('user2.html',**context)
    else:
        return render_template('user3.html',**context)

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

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

import os
SECRET_KEY = os.urandom(24)
SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root@localhost:3306/mis_db?charset=utf8'
SQLALCHEMY_TRACK_MODIFICATIONS = False

父模板導航base. html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block title%}car{% endblock %}</title>
    <link href="{{ url_for('static',filename='css/base.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="{{ url_for('static',filename='js/base.js') }}"></script>
{% block head %}


{% endblock %}
    <style>
        nav navbar-nav li {
            list_style: none;
            float: left;
            margin: 10px;
        }

        .nav1 li{
                list-style: none;
                float: left;
                margin: 10px;
            }
    </style>
</head>
<body id="mybody">
<div class="daohang_box"><form action="{{ url_for('search')}}" method="get" >
<nav class="navbar" role="navigation" style="">
    <div class="container-fluid" id="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="{{ url_for('index') }}">首頁</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                {% if username %}
                    <li><a href={{ url_for('usercenter',user_id=session.get('userid'),tag=1) }}>{{ username }}</a></li>
                    <li><a href="{{ url_for('logout') }}">註銷 </a></li>
                {% else %}
                <li><a href="{{ url_for('login') }}" onclick="">登陸</a></li>
                <li><a href="{{ url_for('regist') }}" onclick="">註冊</a></li>
                {% endif %}
                <li><a href="{{ url_for('lable') }}" onclick="">發佈問答</a></li>
            </ul>
        </div>
       <div style="float: right">
           <img style="width: 50px; height: 50px" id="myonoff" onclick="mySwitch()" src="https://ps.ssl.qhimg.com/sdmt/119_135_100/t01ebad6510c93738fc.gif" style="width:50px" >
       </div>
        <div><input id="search_box" name='q'type="text" placeholder="請輸入關鍵詞查找">
        <button id="search" type="submit">搜索</button>

        </div>
{#    <body background="http://p5.so.qhimgs1.com/bdr/_240_/t01fb87f1928a69d5eb.jpg" style="width: 100%; height: 100%"></body>#}

    </div>
</nav>
</form>
{% block main %}{% endblock %}

</body >
</html>
</body>

base.js

function mySwitch() {
    var oBody = document.getElementById("mybody");
    var oOnoff = document.getElementById("myonoff");
    if (oOnoff.src.match("t01ebad6510c93738fc")) {
        oOnoff.src = "https://ps.ssl.qhimg.com/sdmt/119_135_100/t01ebad6510c93738fc.gif";
        oBody.style.background = "black";
        oBody.style.color = "yellow"
    } else {
        oOnoff.src = "https://ps.ssl.qhimg.com/sdmt/119_135_100/t01ebad6510c93738fc.gif";
        oBody.style.background = "white";
        oBody.style.color = "black"
    }
}

base.css

img {
    width: 200px;
}
#container {
    background: cyan;

}

div.sa {
    border-style: solid;
    border-width: 5px;
    border-color: gold;
    width: 400px;
    float: left;
    margin: 5px;
}

div.sa img {
    width: 80%;
    heigh: aute;
}

div.st {
    text-align: center;
    padding: 2px;
}

div.sa:hover {
    border-style: solid;
    border-width: 5px;
    border-color: green;
}

二、註冊、登陸、註銷

regist.html

{% extends 'base.html' %}

{% block title %}註冊{% endblock %}

{% block head %}
    <link href="{{ url_for('static',filename='css/regist.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='js/regist.js') }}"></script>
{% endblock %}

{% block main %}
<div class="a" >
    <div class="regist" ><h2>註冊</h2></div>
    <form action="{{ url_for('regist') }}"method="post" onsubmit="return myLogin()">
    <div class="a1" >
        Username：<input id="name" type="text"placeholder="請輸入用戶名" name="username"><br>
        Nickname：<input id="nickname" type="text"placeholder="請輸入暱稱" name="nickname"><br>
        Password：<input id="password" type="password"placeholder="請輸入密碼" name="password"><br>
        Password：<input id="password1" type="password"placeholder="請再次輸入密碼" name="password1"><br>

    </div>
        <div id="error_box"><br></div>
      <div class="a2" >
         <button >註冊</button>
         <button type="button" onclick=window.alert("是否取消登陸！")>取消</button>
</div>

    </div>
<div class="a3" >Created.by.xuejing</div>
    </div>
    </form>
{% endblock %}

regist.js

function myLogin(){
            var uName=document.getElementById("name");
            var uError=document.getElementById("error_box");
            var nickname = document.getElementById("nickname");
            var upass = document.getElementById("password");
            var upass1 = document.getElementById("password1");
            uError.innerHTML = "<br>"
            //uname
            if(uName.value.length>12 || uName.value.length<6){
                uError.innerHTML="Username 6-12 bits";
                return false;
            }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){
                uError.innerHTML="The first letter cannot be numeric";
                return false;
            }else for(var i=0; i<uName.value.length;i++){
                if((uName.value.charCodeAt(i)<48 || uName.value.charCodeAt(i)>57)&&(uName.value.charCodeAt(i)<97 || uName.value.charCodeAt(i)>122 )){
                    uError.innerHTML = "only letter or number.";
                    return false;
                }
            }


            if(upass.value.length>12 || upass.value.length<6){
                uError.innerHTML="password 6-12 bits";
                return false;
            }
            if(upass.value != upass1.value){
                uError.innerHTML="The password input is inconsistent";
                return false;
            }
            isError =true;
            window.alert("註冊成功 ！")

        }

regist.css

div{
    margin:0 auto;
    text-align:center;
    backgroup-color:blue
}
.a{
    width:380px;
    height:230px;
    background-color: cornflowerblue;

    margin-top:200px;
}
.regist{
    font-size: 30px;
    color: black;
    font-family:宋體;

}
.a1{
    font-size:20px;
    font-weight:bold;
    color: black;
    font-family:宋體;
 }
.a2{
    width:150px;
    height:60px;
    boder-style:hidden;
}
.a3{
background-color:cyan;
    width:380px;
    clear:both;
    text-align:center;
}
.design{
    font-size:10px;
    color:yellowgreen;
}
#error_box{
    color:red;
}

login.html

{% extends 'base.html' %}

{% block title %}登陸{% endblock %}

{% block head %}
    <link href="{{ url_for('static',filename='css/login.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='js/login.js') }}"></script>
{% endblock %}
{% block main %}
<div class="a" >
    <div class="login" ><h2>登陸</h2></div>
    <form action="{{ url_for('login') }}"method="post">
    <div class="a1" >
        Username：<input id="name" type="text"placeholder="請輸入用戶名" name="username"><br>
        Password：<input id="password" type="password"placeholder="請輸入密碼" name="password"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="a2" >
         <button onclick="myLogin()">登陸</button>
         <button type="button" onclick=window.alert("是否取消登陸！")>取消</button>
</div>
    </div>
    <div class="a3" >Created.by.xuejing</div>
    </form>
{% endblock %}

login.js

function myLogin(){
            var uName=document.getElementById("name");
            var uError=document.getElementById("error_box");
            var upass = document.getElementById("password");
            var isError=true;
            uError.innerHTML = "<br>"
            //uname
            if(uName.value.length>12 || uName.value.length<6){
                uError.innerHTML="Username 6-12 bits";
                isError=false;
                return isError;
            }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){
                uError.innerHTML="The first letter cannot be numeric";
                isError=false;
                return isError;
            }else for(var i=0; i<uName.value.length;i++){
                if((uName.value.charCodeAt(i)<48 || uName.value.charCodeAt(i)>57)&&(uName.value.charCodeAt(i)<97 || uName.value.charCodeAt(i)>122 )){
                    uError.innerHTML = "only letter or number.";
                    isNotError=false;
                    return isError;
                }
            }


            if(upass.value.length>12 || upass.value.length<6){
                uError.innerHTML="password 6-12 bits";
                isError=false;
                return isError;
            }
            return isError;


        }

login.css

div{
    margin:0 auto;
    text-align:center;
    backgroup-color:blue
}
.a{
    width:380px;
    height:230px;
    background-color: cornflowerblue;

    margin-top:200px;
}
.login{
    font-size: 30px;
    color: black;
    font-family:宋體;

}
.a1{
    font-size:20px;
    font-weight:bold;
    color: black;
    font-family:宋體;
 }
.a2{
    width:150px;
    height:60px;
    boder-style:hidden;
}
.a3{
background-color:cyan;
    width:380px;
    clear:both;
    text-align:center;
}
.design{
    font-size:10px;
    color:yellowgreen;
}
#error_box{
    color:red;
}

三、發佈、列表顯示

lable.html

{% extends 'base.html' %}
{% block title %}
    發佈問答
{% endblock %}
{% block head %}

{%  endblock %}
{% block main %}
<form  class="all" action="{{ url_for('lable') }}" method="POST">
    <div style="margin-left:30%;margin-top: 10%" >
        <h3 >發佈問答</h3>
        <div class="form_group"></div>
        <div class="form_group">
            <!--<label for="questionDetial">標題</label>-->
            <!--<textarea class="form-control" rows="1" id="questionDetial"></textarea>-->
            <label for="biaoti">標題</label>
            <input id="biaoti" type="text" placeholder="請輸入標題!" name="title">

        </div>
        <div class="form_group" >
            <label for="questionDetial">詳情</label>
            <textarea class="form-control" rows="5" id="questionDetial" style="width:60rem " name="detail"></textarea>
        </div>
</div>

        <div class="checkbox" style="margin-left:30%;margin-top: 1%">
            <button type="submit" class="btn bun-default">發佈</button>
        </div>

</form>
{%  endblock %}

四、詳情頁

{% extends 'base.html' %}
{% block title %}detail{% endblock %}
{% block head %}
    {#    <script src="{{ url_for('static',filename='js/base.js') }}" type="text/javascript"></script>#}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/detail.css') }}">
{% endblock %}
{% block main %}
    <div align="center">
        <div class="a1">
             <h3>{{ ques.title }}<br><small>{{ ques.author.Username }}
                    <span class="badge">{{ ques.creat_time }}</span></small></h3></div>
                    <p class="lead">{{ ques.detail }}</p>
            <h3>
        <form action="{{ url_for('comment') }}" method="post">
{#            <h4>評論:({{ ques.comments }})</h4>#}

{#                    <h2>Beyond樂隊</h2>#}
{#                    <p>Beyond</p>#}
{#               <p>1983年成立</p>#}
{#                   <p>detail</p>#}
            <br></div>
        <div class="a2" style="margin-left: 25%">
            <div class="pinglun"><label for="comment">評論</label><br></div>
            <textarea id="comment" rows="5" name="commentdetail" style="width: 90ch"></textarea></div>
        <input name="question_id" type="hidden" value="{{ ques.id }}"/>
        <button type="submit" class="fasong" style="margin-left: 25%">發送評論</button>
        <h4 style="margin-left: 25%">comment:({{ ques.comments|length }})</h4>
    </div>
        </form>

    <ul class="list-group" style="margin-left:20%;margin-top: 5%;margin-right:20%">
        {% for foo in ques.comments %}
                <li class="list-group-item" >
                <a href={{ url_for('usercenter',user_id=foo.author_id,tag=1 )}}>{{ foo.author.username }} </a><br>
                    <a href={{ url_for('detail',question_id=foo.id)}}>{{ foo.title }}</a>

                    <span class="badge">{{ foo.creat_time }}</span>
                    <p class="abstract">{{ foo.detail }}</p>
                </li>
        {% endfor %}
    </ul>
    </div>
{% endblock %}

五、我的中心

{% extends 'base.html' %}
{% block title %}我的中心{% endblock %}

{% block head %}
        <style>
            .nav1 >li{
                list-style: none;
                float: left;
                margin: 10px;
            }
        </style>

{% endblock %}

{% block main %}
     <div class="nav1">
        <ul>
            <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id ,tag='1')}}">所有問答</a></li>
            <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id ,tag='2')}}">所有評論</a></li>
            <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id ,tag='3')}}">我的資料</a></li>
        </ul>
    </div>
    {% block user %}{% endblock %}
{% endblock %}

{% extends 'userbase.html' %}

{% block user %}
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/userbase.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}">
    {% endblock %}
    <div class="a1">
        <h3>{{ username }}</h3><br>
{#            <small>所有問答</small>#}
        </div>
        <ul>
            {% for foo in user.question %}
                <li class="list-group-item" >
                <a href={{ url_for('index')}}>{{ foo.author.username }} </a><br>
                    <a href={{ url_for('detail',question_id=foo.id)}}>{{ foo.title }}</a>

                    <span class="badge">{{ foo.creat_time }}</span>
                    <p class="abstract">{{ foo.detail }}</p>
                </li>
        {% endfor %}
        </ul>
    </div>

{% endblock %}

{% extends 'userbase.html' %}

{% block user %}
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/userbase.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}">
    {% endblock %}
    <div class="a1">
        <h3>{{ username }}</h3><br>
{#            <small>所有評論</small>#}
        </div>
        <ul>
            {% for foo in user.comments %}
                <li class="list-group-item" >
                <a href={{ url_for('index')}}>{{ foo.author.username }} </a><br>
                    <a href={{ url_for('detail',question_id=foo_id)}}>{{ foo.title }}</a>

                    <span class="badge">{{ foo.creat_time }}</span>
                    <p class="abstract">{{ foo.detail }}</p>
                </li>
        {% endfor %}
        </ul>
    </div>

{% endblock %}

{% extends 'userbase.html' %}

{% block user %}
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/userbase.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}">
    {% endblock %}

    <div class="a1">
        <h3>{{ username}}
{#            <small>我的信息</small>#}
        </h3><br>
        <ul>
{#            <li>用戶：{{ username}}</li>#}
{#            <li>編號：{{ user.id}}</li>#}
{#            <li>暱稱：{{ user.nickname}}</li>#}
{#            <li>文章篇數：{{ user.question|length }}</li>#}
<div class="alert alert-danger" role="alert">
  用戶：{{ username}}
</div>
<div class="alert alert-info" role="alert">
  編號：{{ user.id}}
</div>
<div class="alert alert-success" role="alert">
  暱稱：{{ user.nickname}}
</div>
<div class="alert alert-danger" role="alert">
 文章篇數：{{ user.question|length }}
</div>
<div class="alert alert-warning" role="alert">
 評論數：{{ user.comments|length }}
</div>
        </ul>
</div>

{% endblock %}

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