1.我的學期總結php
本人在這學期中學習了管理信息系統這門科目,這門科目主要講解了基於Python的Flask框架web建設項目。Python,是一種面向對象的解釋型計算機程序語言,由荷蘭人於1989年發明,第一個公開發行版發行於1991年。Python語言具備不少優勢,首先,Python在設計上堅持了清晰劃一的風格,這使得Python成爲一門易讀、易維護,而且被大量用戶所歡迎的、用途普遍的語言。再者,Python的做者有意的設計限制性很強的語法,使得很差的編程習慣(例如if語句的下一行不向右縮進)都不能經過編譯,其中很重要的一項就是Python的縮進規則。css
在前期Python的基礎課程中學習到了turtle庫的基礎練習、字符串的基本操做、凱撒密碼 、GDP格式化輸出、99乘法表、中英文詞頻統計、和datetime處理日期和時間等等基礎學習。html
中期,開始學習用html元素製做web網頁,觀察經常使用網頁的HTML元素,在實際的應用場景中,用已學的標籤模仿製做。製做本身的導航條,認識css的盒子模型,用div等元素佈局造成html文件。完成了登陸與註冊頁面的html+css+js, 夜間模式的開啓和關閉,製做網站網頁共有元素的父模板html,包括頂部導航,中間區塊劃分,底部導航,底部說明等。彙總相關的樣式造成獨立的css文件,使用 js代碼造成獨立的js文件,造成完整的base.html+css+js。python
後期,進行flask項目,理解flask項目主程序,使用裝飾器,設置路徑與函數之間的關係。加載靜態文件,父模板的繼承和擴展。鏈接mysql數據庫,建立用戶模型,經過用戶模型,對數據庫進行增刪改查,完成登陸、註冊、發佈評論等功能,繼續對咱們的項目進行完善。mysql
完成以上步驟以後,一個網頁就差很少完成了。但完成的網頁是一個很簡單的,因此但願在之後能製做出一個更完美的網頁。web
2.總結Python+Flask+MysqL的web建設技術過程,標準以下:sql
Python+Flask+MysqL的web建設技術過程:數據庫
(1)註冊頁面的實現:編程
代碼:flask
{% 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="aa"style="opacity:0.8" > <div class="login" ><h2>註冊</h2></div> <form action="{{ url_for('regist') }}"method="post"> <div class="aa1" > 用戶名:<input id="name" type="text"placeholder="請輸入用戶名"name="username"><br> 暱稱:<input id="nickname" type="text"placeholder="暱稱"name="nickname"><br> 密碼:<input id="password" type="password"placeholder="請輸入密碼"name="password"><br> 再輸密碼:<input id="password1" type="password"placeholder="請再次輸入密碼"><br> </div> <div id="error_box"><br></div> <div class="aa2" > <button onclick="return myLogin()">註冊</button> <body background="http://p2.so.qhimgs1.com/bdr/_240_/t015907a1aac845650e.jpg"style="background-repeat:no-repeat;background-size: 100% 100%; background-attachment: fixed;"> </body> </div> </form> </div> {% endblock %}
(2)登錄頁面:
代碼:
{% 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 %} <body background="http://p0.so.qhmsg.com/bdr/_240_/t017089b71faaa7ce85.jpg"></body> {% block main %} <div class="aa" style="opacity:0.8"> <div class="login" ><h2>登陸</h2></div> <form action="{{ url_for('login') }}"method="post"> <div class="aa1" > 用戶名:<input id="name" type="text"name='username'placeholder="請輸入用戶名"><br> 密碼:<input id="password" type="password"name='password'placeholder="請輸入密碼"><br> </div> <div id="error_box"><br></div> <div class="aa2" > <button onclick="myLogin()">登陸</button> <button type="button" onclick=window.alert("是否取消登陸!")>取消</button> <body background="http://p0.so.qhimgs1.com/bdr/_240_/t01ebfe75930e0eb7a0.jpg"style="background-repeat:no-repeat;background-size: 100% 100%; background-attachment: fixed;"></body> </div> </form> </div> {% endblock %}
(3)首頁頁面:
代碼:
{% extends 'base.html' %} {% block title %} 首頁 {% endblock %} {% block head %} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <link rel="stylesheet" type="text/css"href="../static/css/index.css"> {% endblock %} {% block main %} <div class="card-body"> <div class="card" style="width:50rem; margin:0 auto;opacity:0.9"> {# <li class="list-group-item"style="height:10rem">detail{{ question }}</li>#} <ul class="list-group list-group-flush"> {% for foo in questions %} <li class="list-group-item"> <span class="icon" aria-hidden="true"></span> <br> <h3><a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a></h3> <p>{{ foo.detail }}</p> <span class="badge"style="float:right">{{ foo.creat_time}}</span> <a href="{{ url_for('usercenter',user_id=foo.author.id,tag=1) }}">{{ foo.author.username}}</a> <br> 評論:{{ foo.comments|length }} </li> {% endfor %} </ul> </div> <br> <div> <p><span style="font-size: 40px;color: blue;font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace";>浩瀚星空</span></p> </div> <div> <div class="img"> <a href="https://www.baidu.com/"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558937&di=e9f6b3da7e4525b5048761d321e7a334&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D9d0e654a05b30f242197e440a0fcbb36%2F43a7d933c895d1434bcc2a0879f082025aaf0767.jpg"></a> <div class="desc"><a href="https://www.baidu.com/">地球</a></div> </div> <div class="img"> <a href="https://www.baidu.com/"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558936&di=f4549e6b6f694583b5e01832ae57ff79&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D7e5fc0351bdfa9ece9235e540ab99d76%2F8b13632762d0f7031d0337f502fa513d2697c562.jpg"></a> <div class="desc"><a href="https://www.baidu.com/">星雲</a></div> </div> <div class="img"> <a href="https://www.baidu.com/"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=01d805549265c8b439c92ed817f2664d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D1fd11f0e9716fdfacc61ceaddce6e621%2Fae51f3deb48f8c542cd0210a30292df5e0fe7f90.jpg"></a> <div class="desc"><a href="https://www.baidu.com/">璀璨星空</a></div> </div> <div class="img"> <a href="https://www.baidu.com/"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=b77b1b7fb70e8474b8a317fd70ea71ce&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D2820c0958dd6277ffd1f3a7b40517545%2F9f2f070828381f304605d987a3014c086e06f084.jpg"></a> <div class="desc"><a href="https://www.baidu.com/">星軌</a></div> </div> </div> <br> <div class="clearfloat" style="text-align: center"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558937&di=e9f6b3da7e4525b5048761d321e7a334&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D9d0e654a05b30f242197e440a0fcbb36%2F43a7d933c895d1434bcc2a0879f082025aaf0767.jpg"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558936&di=f4549e6b6f694583b5e01832ae57ff79&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D7e5fc0351bdfa9ece9235e540ab99d76%2F8b13632762d0f7031d0337f502fa513d2697c562.jpg"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=01d805549265c8b439c92ed817f2664d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D1fd11f0e9716fdfacc61ceaddce6e621%2Fae51f3deb48f8c542cd0210a30292df5e0fe7f90.jpg"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=b77b1b7fb70e8474b8a317fd70ea71ce&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D2820c0958dd6277ffd1f3a7b40517545%2F9f2f070828381f304605d987a3014c086e06f084.jpg"> </div> </div> {% endblock %}
(4)發佈問答
代碼:
{% extends 'base.html' %} {% block title %}問答{% endblock %} {% block head %} <link href="{{ url_for('static',filename='') }}" rel="stylesheet" type="text/css"> {% endblock %} {% block main %} <br> <section class="container"> <div class="login" style="text-align: center;"> <label for="ask">Question</label> <form action="{{ url_for('question') }}" method="post"> <textarea style="width:330px" type="password" rows="3" id="ask" name="title"></textarea> <br> <div> <label for="questionDetail">Detail</label> <br> <textarea rows="5" style="width:330px"id="questionDetail" type="password" name="detail"></textarea> </div> <br> <input type="checkbox">check me <input type="submit" name="commit" value="發佈"> </form> </div> </section> {% endblock %}
(5)我的詳情頁面:
代碼:
{% extends 'userbase.html' %} {% block title %} 我的信息頁 {% endblock %} {% block head %} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> {% endblock%} {% block user %} <div class="card" style="width:50rem; margin:0 auto"> <ul class="list-group list-group-flush" > <h3>所有問答</h3> {% for foo in user.questions %} <li class="list-group-item"> <span class="icon" aria-hidden="true"></span> <br> <h3><img src="../static/image/yezi.jpg" width="20" height="20"> <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a></h3> <p>{{ foo.detail }}</p> <span class="badge"style="float:right">{{ foo.creat_time}}</span> <img src="../static/image/touxiang.jpg" width="20" height="20"> <a href="{{ url_for('usercenter',user_id=foo.author.id) }}">{{ foo.author.username}}</a> </li> {% endfor %} </ul> </div> <br> <br> <div class="card" style="width:50rem; margin:0 auto"> <ul class="list-group list-group-flush"> <h3>所有評論</h3> {% for foo in user.comments %} <li class="list-group-item"> <span class="icon" aria-hidden="true"></span> <br> <h3><img src="../static/image/yezi.jpg" width="20" height="20"> <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a></h3> <p>{{ foo.detail }}</p> <span class="badge"style="float:right">{{ foo.creat_time}}</span> <img src="../static/image/touxiang.jpg" width="20" height="20"> <a href="">{{ foo.author.username}}</a> </li> {% endfor %} </ul> </div> <br> <br> <div class="card" style="width:50rem; margin:0 auto"> <h3>{{ username }}我的信息</h3> <ul class="list-group list-group-flush"> <li class="list-group-item"> <span class="icon" aria-hidden="true"> 用戶:{{ user.username }}<br> 編號:{{ user.id }}<br> 暱稱:{{ user.nickname }}<br> 文章篇數:{{ user.questions|length }} </span> </li> </ul> </div> {% endblock %}
(6)我的用戶父類模板代碼:
{% extends 'base.html' %} {% block title %} 我的中心 {% endblock %} {% block head %} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> {# <style>#} {# .nav_ul li#} {# list-style:none;#} {# float: left;#} {# margin: 10px;#} {# #} {# </style>#} {% endblock %} {% block main %} <div style="width:50rem; margin:0 auto"> <ul class="list-group list-group-flush"> <h2>{{ user.username }}</h2> </ul> <li role="presentation"class="btn btn-light"><a href="{{ url_for('usercenter',user_id=user.id,tag='1') }}">所有問答</a> </li> <li role="presentation"class="btn btn-light"><a href="{{ url_for('usercenter',user_id=user.id,tag='2') }}">所有評論</a> </li> <li role="presentation"class="btn btn-light"><a href="{{ url_for('usercenter',user_id=user.id,tag='3') }}">我的信息</a> </li> </ul> </div> {% block user %} {% endblock %} {% endblock %}
(7)父類模板代碼:
<!DOCTYPE HTML> <html> <head lang="en"> <meta charset="UTF-8"> <title>{% block title %}首頁{% endblock %}</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="{{ url_for('static',filename='js/base.js') }}"></script> {% block head %}{% endblock %} <body id="mybody"> {#<nav class="navbar navbar-expand-lg navbar navbar-light"style="background-color:#e3f2fd">#} <nav class="navbar navbar-expand-lg navbar navbar-dark bg-blue"style="opacity:0.8"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"><a class="navbar-brand" href="{{ url_for('index') }}">首頁 </a></li> <li class="nav-item active"><a class="navbar-brand" href="{{ url_for('question') }}">發佈問答 </a></li> <li class="nav-item active"><a class="navbar-brand" href="http://www.astron.ac.cn/index.htm">中國天文網</a></li> <li class="nav-item active"><a class="navbar-brand" href="http://www.dili360.com/cng/tag/list/6489.htm">國家地理網</a></li> <li class="nav-item active"><a class="navbar-brand" href="http://www.astronomy.com.cn/bbs/forum.php">天文論壇</a></li> <form action="{{url_for('search')}}" method="get" class="form-inline" > <input name="q" class="form-control mr-sm-2" type="search" placeholder="請輸入關鍵字" > <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button> </form> </ul> <nav class="navbar navbar-expand-lg navbar navbar-dark bg-blue"> {% if username %} <a class="navbar-brand" href="{{ url_for('usercenter',user_id=session.get('userid'),tag=1) }}">{{ session.get('user') }} </a> <a class="navbar-brand" href="{{ url_for('logout') }}">註銷 </a> {% else %} <a class="navbar-brand" href="{{ url_for('login') }}">登錄 </a> <a class="navbar-brand" href="{{ url_for('regist') }}">註冊 </a> {% endif %} </nav> </div> </nav> <body background="http://p0.so.qhimgs1.com/bdr/_240_/t01ebfe75930e0eb7a0.jpg"style="background-repeat:no-repeat;background-size: 100% 100%; background-attachment: fixed;"> {% block main %} {% endblock %} <div id="footer"> <div class="copyRight" style="text-align: center"> Copyright ©xulishuai版權全部 </div> </div> </body> </body> </html>
(8)config.py代碼:
import os SECRET_KEY = os.urandom(24) SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:123456@127.0.0.1:3306/misdb?charset=utf8' SQLALCHEMY_TRACK_MODIFICATIONS = False
(9)tianwen.py代碼:
from flask import Flask from flask_sqlalchemy import SQLAlchemy import config from flask import Flask, render_template, request, redirect, url_for,session from functools import wraps from datetime import datetime from sqlalchemy import or_, and_ 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) 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('questions')) 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) 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() # user=User(username='mis1',password='11111') # db.session.add(user) # db.session.commit() @app.route('/') def base(): return render_template('base.html') # 調用數據庫把用戶評論放在首頁 @app.route('/index/') def index(): context = { 'questions':Question.query.order_by('-creat_time').all() } return render_template('index.html',**context) @app.route('/login/',methods=['GET','POST']) def login(): if request.method == 'GET': return render_template('login.html') else: usern = request.form.get('username') passw = request.form.get('password') user = User.query.filter(User.username == usern).first() if user: if user.password==passw: session['user'] = usern session['userid'] = user.id session.permanent = True return redirect(url_for('base')) else: return u'password error' else: return u'password is not existed' @app.route('/regist/',methods=['GET','POST']) def regist(): if request.method=='GET': return render_template('regist.html') else: usern=request.form.get('username') passw=request.form.get('password') nickn=request.form.get('nickname') user=User.query.filter(User.username==usern).first() if user: return u'username existed' else: user=User (username=usern,password=passw,nickname=nickn) 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('/question/',methods=['GET','POST']) @loginFirst#發佈前登陸,python裝飾器 def question(): if request.method=='GET': return render_template('question.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): quest = Question.query.filter(Question.id == question_id).first() return render_template('detail.html', ques=quest) #評論功能 @app.route('/comment/',methods=['POST']) @loginFirst#發佈前登陸,python裝飾器 def comment(): detail = request.form.get('fabu') author_id = User.query.filter(User.username == session.get('user')).first().id quest_id =request.form.get('question_id') pinglun = Comment(question_id=quest_id,detail=detail, author_id=author_id) db.session.add(pinglun) db.session.commit() return redirect(url_for('detail',question_id=quest_id)) #我的信息頁 @app.route('/usercenter/<user_id>/<tag>') @loginFirst#發佈前登陸,python裝飾器 def usercenter(user_id,tag): user=User.query.filter(User.id== user_id).first() context={ 'user':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.context_processor def mycontext(): usern=session.get('user') if usern: return{'username':usern} else: return{} @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', questions=ques) @app.route('/logout/') def logout(): session.clear() return redirect(url_for('index')) if __name__ == '__main__': app.run(debug=True)
以上就是Python+Flask+MysqL的web建設技術過程,讀者能夠根據本身的需求修改。