期末做品檢查

                                                                 關於python學習javascript

        近年來,python編程語言大火,在2017年,國外的許多知名雜誌和機構都對python和其餘編程語言進行了比較。2017年7月,IEEE Spectrum 雜誌發佈了一年一度的編程語言排行榜,python居於首位;9月,Stack Overflow發佈的統計數據代表,python是增加量最快的編程語言。在2017年年底,IEEE Spectrum雜誌發佈了2017年的編程語言排行榜,從數據上顯示,python語言僅次於C語言,排名第二。至於國內,有關python的事情也不少,例如浙江信息技術教材將放棄VB,改向Python;山東小學教材加入Python內容;教育部也決定在2018年起,Python列入全國計算機等級考試等等新聞。在人工智能的時代,該學習什麼編程語言,python是不二之選。css

       這個學期以來,咱們學習python,一方面是利用python語言進行爬蟲,另外一方面就是利用python來開發網頁。管理信息系統這門課程,咱們主要是學習了python的相關知識和利用python作前端網頁設計,如下爲這個學期關於python學習的總結和介紹了利用Python+Flask+MySQL的web建設技術過程。html

       學期總結:在剛開始學習python的過程當中,前期主要利用python3.6軟件學習python的基礎知識,例如python中的turtle庫、利用python進行中文詞頻統計等;後期,主要利用python來設計網頁。python語言比java語言相對簡單一些,利用python作web方便快捷。在整個學期的學習過程當中,前期所學的python基礎知識都沒什麼問題,可是在後來的學習,利用python設計web的知識就逐漸深刻了。剛開始設計簡單的web模板還行,到了後來要實現網頁的各類功能時,我感受有點吃力,不理解如何運用、設計功能,在寫完代碼對項目進行調試時,老是出現一些錯誤。或許是由於本身不理解,又或者是由於本身的分析錯誤能力還欠缺,致使整個項目沒法正常進行。不過,通過查找資料、查閱書籍和請教同窗,最終仍是把問題解決了,使項目可以正常運行。咱們如今所學的python知識還只是冰山一角,還有不少深奧的知識還有待去深刻學習,真正掌握python語言。不積跬步,無以致千里;不積小流,無以成江海,這個學期所學的python知識只是打下一個基礎,在從此的學習中須要不斷加深理解python知識,從基礎學起,作到可以順手利用python作爬蟲、作網頁開發。同時,也須要溫故而知新,對所學的知識進行復習,真正掌握、理解每個知識的應用。前端

      Python+Flask+MySQL的web建設技術過程:java

      1.須要安裝python3.六、Pycharm、MySQL等相關軟件和安裝相關的庫。python

   

    2.須要有python、CSS、javastring、mysql、html等基礎知識。mysql

    3.如下爲本學期設計的一個簡單web項目jquery

       建立html、js、CSS、python文件的時候最好存放規範合理,命名合理web

     

  父模板的製做      base.csssql

nav ul{
            width: 1000px;
            border: 1px solid pink;
            margin: 50px auto 0px auto;
        }
        .nav ul li{
            float: left;
        }
        .nav ul li a{
            width: 80px;
            height: 28px;
            line-height: 28px;
            background-color: pink;
            color: aliceblue;
            margin: 5px 35px;
            font-size: 12px;
            display: block;
            text-align: center;
            text-decoration: none;
        }
        .nav ul li a:hover{
            width: 78px;
            height: 26px;
            line-height: 28px;
            border: 1px solid pink;
            background: #FFF;
        }
        .nav img{
            height: 28px;
            width:28px;
            float: left
        }
        .all{
            width: 88%;
            height:70%;
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
        }
        .pic{
            border: 1px solid orange;
            width: 300px;
            float: left;
            margin: 15px;
        }
        .pic img{
            width: 100%;
            height: 180px;
        }
        .wenzi1{
            text-align: center;
            padding: 5px;
            font-family: '';
            background-color: bisque;
        }
        .wenzi1:hover{
            border: 1px solid orangered;
            background-color: salmon;
        }
        .wenzi2{
            text-align: center;
            padding: 5px;
            font-family: '';
            background-color: darkseagreen
        }
        .wenzi2:hover{
            border: 1px solid orangered;
            background: darkgreen;
        }
        .wenzi3{
            text-align: center;
            padding: 5px;
            font-family: '';
            background-color: khaki;
        }
        .wenzi3:hover{
            border: 1px solid orangered;
            background: orange;
        }
        .wenzi4{
            text-align: center;
            padding: 5px;
            font-family: '';
            background-color:salmon;
        }
        .wenzi4:hover{
            border: 1px solid orangered;
            background: red;
        }
        .pic img:hover{
            border: 1px solid orangered;
        }
        .all a{
            text-decoration: none;
            font-family: '華文中宋';
        }

 base.html

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
        {% endblock %}
        Home</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/common.css')}}">
{% block head %}
{% endblock %}
</head>
<body id="myBody">
    <div class="banner">
        <div class="p-nav">
            <div class="container">
                <ul class="nav_left">
                    <li><a href="{{ url_for('home') }}">首頁</a></li>
                    <li><a href="#">下載</a></li>
                    <li><a href="#">新聞</a></li>
                    <li><a href="{{ url_for('question') }}">發佈問答</a></li>
                </ul>
                <form action="{{ url_for('search') }}" method="get">
                    <div style="  height: 50px;padding-top: 13px;">
                        <button type="submit" class="search">搜索</button>
                        <input type="text" style="padding-left: 10px;width: 200px" name="q" PLACEHOLDER="輸入要搜索的內容">
                    </div>
                </form>
                <ul class="nav_right">
                    {% if username %}
                        <li><a href="#">{{username}}</a></li>
                        <li><a href="{{ url_for('logout') }}">退出</a></li>
                    {% else %}
                        <li><a href="{{ url_for('sign_in') }}">登陸</a></li>
                        <li><a href="{{ url_for('sign_up') }}">註冊</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    {% block main %}
    {% endblock %}
    <div id="bottom">
        <a href="">聯繫咱們·</a>
        <a href="">加入咱們·</a>
        <a href="">品牌與徽標·</a>
        <a href="">幫助中心·</a>
        <a href="">合做夥伴</a>
    </div>
    <div class="copyright">
        <p>Copyright &copy; 2017. Created by <a href="#" target="_blank">niu</a></p>
    </div>
</body>
</html>


 

              首頁的製做

             index.css

.ties-list{
    position: relative;
    margin: 50px auto;
    width: 90%;
}
.tie-item{
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px 20px;
    margin-bottom: -1px;
}
.tie-item:hover {
    border: 1px solid #169fe6;
    position: relative;
    z-index: 10;
}
.tie-title
{
    font-size: 16px;
    line-height: 1.5em;
    float: left;
    clear: right;
}

.tie-title a{
    text-decoration: none;
    font-size: 16px;
    line-height: 1.5em;
}
.tie-content
{
    font-size: 14px;
    color: #333;
    line-height: 200%;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    padding: 15px 0;
    clear: both;
}
.tie-desc-link
{
    color: #9ab26b;
    padding-left: 5px;
}
.tie-desc {
    clear: both;
    color: #bcbcbc;
    float: none;
    text-align: left;
    line-height: 200%;
    font-size: 12px;
}

 index.html

{% extends'base.html' %}
{% block title %}
    Home
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css')}}">
    <style type="text/css">
    div.all{
        width: 80%;
        margin: auto;
    }
    div.pic{
        width: 50%;
        float: left;
    }
    img{
        width: 100%;
        height: 400px;
    }
    </style>
{% endblock %}
{% block main %}
    <div class="ties-list">
       {% for tie in question %}
            <div class="tie-item">
                <div class="tie-title">
                    <a href="{{ url_for('question_detail',question_id = tie.id) }}" target="_blank">{{tie.title }}</a></div>
                <div class="tie-content">
                    {{ tie.detail | safe }}
                    <a class="tie-desc-link" href="{{ url_for('question_detail',question_id = tie.id) }}" >閱讀全文</a>
                </div>
                <div class="tie-desc">{{tie.author.username}}發佈於({{tie.creatTime }})
                    <span><a href="#">評論({{ tie.comments|length }})</a></span>
                </div>
            </div>
       {% endfor %}
    </div>
    <div class="all">
        <div class="pic">
            <a href="#"><img src="http://pic1.win4000.com/wallpaper/f/51b9b06f1d0fb.jpg"></a>
            <div class="wenzi1"><a  href="">淡雅清新</a></div>
        </div>
        <div class="pic">
            <a href="#">
                <img src="http://www.zcool.com.cn/community/0379bb5579eead00000012e7e1c65aa.jpg"></a>
            <div class="wenzi2"><a href="">蓓蕾初開</a></div>
        </div>
        <div class="pic">
            <a href="#">
                <img src="http://imgstore.cdn.sogou.com/app/a/100540002/766171.jpg"></a>
            <div class="wenzi3"><a href="">倉央兮措</a></div>
        </div>
        <div class="pic">
            <a href="#">
                <img src="http://pic.5442.com:82/2013/0417/16/02.jpg%21720.jpg"></a>
            <div class="wenzi4"><a href="">驕陽似火</a></div>
        </div>
    </div>
{% endblock %}

註冊頁面設計  regiser.html

{% extends'base.html' %}
{% block title %}
    Login
{% endblock %}
{% block head %}
        <title>註冊頁面</title>
        <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/register.css')}}">
        <script type="text/javascript">
            $(function () {
                 $("button.submit").click(function () {
                     var userName = $("input[name='user']").val();
                     var passWord = $("input[name='pwd']").val();
                     var RepassWord = $("input[name='repwd']").val();
                     if(userName.length == 0 || userName== " ")
                     {
                         $("#register_notice").html("用戶名不容許爲空");
                         $("#register_notice").show();
                         $("input[name='user']").val("");
                     }
                     else if(passWord != RepassWord)
                     {
                         $("#register_notice").html("兩次輸入密碼不一致");
                         $("#register_notice").show();
                         $("input[name='pwd']").val("");
                         $("input[name='repwd']").val("");
                     }
                    else
                    {
                        var data = {"username":userName, "password":passWord};
                        $.post("{{ url_for('sign_up') }}",data,function(result)
                        {
                            var err = result["err"];
                            if (err ==0)
                            {
                                alert("註冊成功");
                            }
                            else
                            {
                                $("#register_notice").text(result["text"]);
                                $("#register_notice").show();
                                $("input[name='user']").val("");
                                $("input[name='pwd']").val("");
                                $("input[name='repwd']").val("");
                            }
                        });
                    }
                 });
            });
        </script>
{% endblock %}
{% block main %}
    <body>
        <div class="logo">
        </div>
        <div class="register">
            <p>
                <label>用戶名<br>
                    <input type="text" name="user" class="input" size="20">
                </label>
            </p>
            <p>
                <label>密碼<br>
                    <input type="password" name="pwd" value="" size="20">
                </label>
            </p>
            <p>
                <label>確認密碼<br>
                    <input type="password" name="repwd" value="" size="20">
                </label>
            </p>
            <p>
                <a href="{{ url_for('index') }}">← 返回到博客</a>
                <button class="submit">註冊</button>
            </p>
            <span id="register_notice">用戶名或者密碼錯誤</span>
        </div>
    </body>
{% endblock %}

css

body{
                background:#e7e7e7 ;
            }
            .logo{
                width: 330px;
                height: 58px;
                margin: 100px auto 0;
                background-image: url("../image/logo_daizuo.png");
            }
            .register{
                width: 260px;
                margin: 0 auto;
                height: 340px;
                box-shadow: 10px 10px 5px #888888;
                background: white;
                padding: 10px 60px;
            }
            label{
                color: #72777c;
                font-size: 14px;
            }
            input{
                width: 100%;
                height: 34px;
            }
            p>a{
                float: left;
                font-size: 14px;
                height: 36px;
                line-height: 36px;
                color: #72777c;
                text-decoration: none;
            }
            button{
                float: right;
                width: 80px;
                height: 36px;
                background: #108099;
                color: #fff;
            }
            #register_notice{
                float: left;
                margin-left: 50px;
                color: red;
                font-size: 14px;
                display: none
            }

 

登陸功能設計

{% extends'base.html' %}
{% block title %}
    Login
{% endblock %}
{% block head %}
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css')}}">
    <script type="text/javascript">
            $(function () {
                 $("button.submit").click(function () {
                     var userName = $("input[name='user']").val();
                     var passWord = $("input[name='pwd']").val();
                     var data = {"username":userName,"password":passWord};
                     $.post("{{ url_for('sign_in') }}",data,function(result)
                     {
                        var err = result["err"];
                        if (err ==0)
                        {
                            window.location.href = "/";
                        }
                        else
                        {
                            $("#login_notice").html(result["text"]);
                            $("#login_notice").show();
                            $("input[name='user']").val("");
                            $("input[name='pwd']").val("");
                        }
                     });
                 });
            });
    </script>
{% endblock %}
{% block main %}
<body>
    <div class="logo">
    </div>
    <div class="login">
        <p>
            <label for="user_login">用戶名<br>
                <input type="text" name="user" class="input" size="20">
            </label>
        </p>
        <p>
            <label for="user_pass">密碼<br>
                <input type="password" name="pwd" value="" size="20">
            </label>
        </p>
        <p>
            <a href="{{ url_for('index') }} ">← 返回到博客</a>
            <button class="submit">登陸</button>
        </p>
        <span id="login_notice" style="">用戶名或者密碼錯誤</span>
    </div>
</body>
{% endblock %}

 

發佈問答功能

{% extends'base.html' %}
{% block title %}
    Question
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/question.css')}}">
    <style>
        div.question{
            width: 80%;
            margin: auto;
        }
    textarea.form-control{
        width: 80%;
        margin: auto;
    }
    </style>
{% endblock %}
{% block main %}
    <div class="question">
        {% if username %}
            <p class="name">歡迎你,{{ username }}</p>
            <h1>發佈問答</h1>
            <form class="biao" action="{{ url_for('question') }}" method="post">
                <div class="form-group">
                    <label for="ask">Question</label><br>
                    <textarea name='title' class="form-control" rows="1" id="ask"></textarea>
                </div>
                <br>
                <div class="form-group">
                    <label for="questionDetail">Detail</label><br>
                    <textarea name='detail' class="form-control" rows="8" id="questionDetail"></textarea>
                </div>
                <button type="submit" class="btn-default">發佈</button>
            </form>
        {% else %}
            <p class="name">歡迎你,請先<a href="{{ url_for('sign_in') }}" >登陸</a>或者<a href="{{ url_for('sign_up') }}">註冊</a></p>
        {% endif %}
    </div>
{% endblock %}

評論功能設計

{% extends'base.html' %}
{% block title %}
    Question
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/question_detail.css')}}">
    <style>
    </style>
{% endblock %}
{% block main %}
    <section>
        <div class="container">
            <div class="artical_content">
                <div class="content_head">
                    <h3 class="article_title">{{question.title}}</h3>
                    <p class="time">發佈時間:{{question.create_time}}&nbsp;</p>
                </div>
                <article>
                    {{question.detail|safe}}
                </article>
                {% if username %}
                    <form action="{{ url_for('comment') }}" method="post">
                        <textarea name='detail' class="form-control" rows="3" id="questionDetail"></textarea><br>
                        <button class="btn-default">發佈</button>
                        <input name="question_id" value="{{ question.id }}" type="hidden"  />
                     </form>
                {% else %}
                    <p class="name">歡迎你,請先<a href="{{ url_for('sign_in') }}" >登陸</a>或者<a href="{{ url_for('sign_up') }}">註冊</a></p>
                {% endif %}
                <p>評論:({{ question.comments|length }})</p>
                <ul >
                    {% for foo in question.comments %}
                        <li><p>{{ foo.author.username }} ({{ foo.creatTime }})</p><p class="neirong">{{ foo.detail }}</p></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </section>
{% endblock %}

 數據庫功能設計

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

 

主py文件

from flask import Flask,render_template,request,redirect, url_for,session,Response
from sqlalchemy import or_, and_
from flask_sqlalchemy import SQLAlchemy
import json
import datetime
import config

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(20))

db.create_all()

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)
    creatTime=db.Column(db.DateTime, default=datetime.datetime.now)
    authorID=db.Column(db.Integer,db.ForeignKey('User.id'))
    author=db.relationship('User',backref=db.backref('question'))
db.create_all()


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)
    creatTime=db.Column(db.DateTime,default=datetime.datetime.now)
    question=db.relationship('Question',backref=db.backref('comments',order_by=creatTime.desc))
    author=db.relationship('User',backref=db.backref('comments'))
db.create_all()

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

@app.route('/question_detail/<question_id>')
def question_detail(question_id):
    question = Question.query.filter(Question.id == question_id).first()
    return render_template('question_detail.html', question=question)

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

@app.route('/sign_in',methods=['GET','POST'])
def sign_in():
    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.permanent = True
                return Response(json.dumps({"err": 0,"text":"login success"}), mimetype='application/json')
            else:
                return Response(json.dumps({"err": -1,"text":" user or password error"}), mimetype='application/json')

        else:
            return Response(json.dumps({"err": -1,"text":" username is not existed"}), mimetype='application/json')


@app.route('/sign_up',methods=['GET','POST'])
def sign_up():
    if request.method == 'GET':
        return render_template('register.html')
    else:
        username = request.values.get('username')
        password = request.values.get('password')
        user = User.query.filter(User.username == username).first()
        if user:
            return Response(json.dumps({"err": 0,"text":"username existed."}), mimetype='application/json')
        else:
            user1 = User(username=username, password=password)
            db.session.add(user1)
            db.session.commit()
            return Response(json.dumps({"err": 0}), mimetype='application/json')

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


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

@app.route('/question/',methods=['GET','POST'])
def question():
    if request.method == 'GET':
        return render_template('question.html')
    else:
        title = request.form.get('title')
        detail = request.form.get('detail')
        authorID =User.query.filter(User.username == session.get('user')).first().id
        user = User.query.filter(User.username == session.get('user')).first()
        question = Question.query.filter(Question.title == title).first()
        if question:
            return 'question existed'
        else:
            questions = Question(title=title, detail=detail, authorID=authorID)
            questions.author = user
            db.session.add(questions)
            db.session.commit()
            return redirect(url_for(('home')))


@app.route('/comment/',methods=['GET','POST'])
def comment():
    if request.method == 'GET':
        return render_template('question_detail.html')
    else:
        detail = request.form.get('detail')
        author_id =User.query.filter(User.username == session.get('user')).first().id
        question_id=Question.query.filter(Question.authorID ==author_id).first().id
        comments = Comment(detail=detail,author_id=author_id,question_id=question_id)
        #comments.question=question
        #comments.author = user
        db.session.add(comments)
        db.session.commit()
        return redirect(url_for('question_detail', question_id=question_id))

@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('-creatTime')
    return render_template('index.html',question=ques)

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

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

以上爲用python在這個學期中web建設的一些代碼,整個設計出來的網頁仍是很不完整的,部分功能沒法實現,在以後的學習中,應該繼續完善、改進這個網頁。掌握更多的html、python、css、sql知識,熟練這些技術,設計一個更加完整的網頁。

相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息