个人学期总结
在本学期我们学习了一门新语言python，他的语句不像那些java那么复杂，因为PY是
解释性语言，天生就有作为测试脚本语言的优势，语法简单，通俗易懂，可移植性好。对
于我们这些初学者而言还是比较容易上手的。老师一步步教我们去详细的操作，可以让我
们去完全的掌握这个功能怎么实现。
刚开始的时候我们学习了turtle库、条件、循环、函数的定义代码，后来学习了web、Flask
的制作。并可以实现网站父模板统一布局：头部导航条、底部图片导航、中间主显示区域布
局，注册、登录、注销、发布、列表显示详情页评论、列表显示个人中心搜索，条件组合
搜索的功能。在此过程中我们还学习到了css，就是样式。样式可以设置城我们自己喜欢的
样子，不同的风格。整个样式的布局那些可以体现每个人的不同水平。
在写代码的过程中，我也会遇到许多各种各样的大问题和小问题。比如某一行的代码
漏了，导致出错，或者是某个英文单词加多了个s，又出错。这样就会浪费了许多不必要的
时间。有时候子模版忘记去继承了父模版。就是因为自己太粗心才会导致了这些不必要的
错误出现一次又一次。所以我们在编辑代码的时候一定要细心一点，这样才能做的又快又
好。专心听老师讲的每一节课，才不会漏掉一些小细节。
所以说我们要多去实践，只有多实践才会出真理。要尝试动手，不要眼高手低。有些人
就是会觉得自己懂了，然后就觉得不必要去听了。可是当让他去动手做的时候却毫无头绪。
所以我们需要多思考，多动手。这样才能知道自己到底什么地方不懂，才能够对症下药去解
决问题。遇到困难要面对，不要觉得难就不去学了。其实多去思考最后还是能够去解决这些
问题的。
总结Python+Flask+MysqL的web建设技术过程
（1）展示登录的界面
这是登录页面的html代码
{% extends‘base.html‘ %} {% block title %}登陆{% endblock %} {% block head %} <link href="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"> <link href="{{ url_for(‘static‘,filename=‘css/login.css‘) }}" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/base.css‘) }}"> <script src="{{ url_for(‘static‘,filename=‘js/login.js‘) }}"></script> <script src="{{ url_for(‘static‘,filename=‘js/base.js‘) }}"></script> {% endblock %} {% block main %} <div class="box"> <h2 style="text-align: center">登录</h2> <form action="{{url_for(‘login‘)}}" method="post"> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名" name="username" style="width:350px;height:50px"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码" name="password" style="width:350px;height:50px"> </div> <br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="return fnLogin()">登陆</button><br> <a class="link-forget cl-link-blue"href="{{ url_for(‘regist‘) }}" >忘记密码</a> <a class="link-forget cl-link-blue"href="{{ url_for(‘regist‘) }}">注册</a> </div> </form> </div> {% endblock %}
（2）注册页面
注册页面的html代码
{% extends‘base.html‘ %} {% block title %}注册{% endblock %} {% block head %} <link href="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"> <link href="{{ url_for(‘static‘,filename=‘css/login.css‘) }}" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/base.css‘) }}"> <script src="{{ url_for(‘static‘,filename=‘js/regist.js‘) }}"></script> <script src="{{ url_for(‘static‘,filename=‘js/base.js‘) }}"></script> {% endblock %} {% block main %} <div class="box"> <h2 style="text-align: center">注册</h2> <form action="{{url_for(‘regist‘)}}" method="post"> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名" name="username" style="width:350px;height:50px"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码" name="password" style="width:350px;height:50px"><br> <input id="upass1" type="password" placeholder="请重复输入密码" style="width:350px;height:50px"> </div> <div class="input_box"> <input id="nname" type="text" placeholder="请输入昵称" name="nickname" style="width:350px;height:50px"> </div> <br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="return fnRegist()">注册</button><br> </div> </form> </div> {% endblock %}
（3）发布问答
发布问答的html
{% extends‘base.html‘ %} {% block title %}发布问题{% endblock %} {% block head %} <link href="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"> <link href="{{ url_for(‘static‘,filename=‘css/ask.css‘) }}" rel="stylesheet" type="text/css"> <link href="{{ url_for(‘static‘,filename=‘css/base.css‘) }}" rel="stylesheet" type="text/css"> <link href="{{ url_for(‘static‘,filename=‘css/login.css‘) }}" rel="stylesheet" type="text/css"> <script src="{{ url_for(‘static‘,filename=‘js/base.js‘) }}"></script> {% endblock %} <nav></nav> {% block main %} <div class="box"> <h2>发布问题</h2> <form action="{{url_for(‘ask‘)}}" method="post"> <div class="question"> <label for="title">问题</label> <textarea id="title" name="title" rows="1" clos="60"></textarea> </div> <div class="form-group"> <label for="detail">详情</label> <textarea class="form-group" id="detail" name="detail" rows="5" cols="60" ></textarea> </div> <div class="input-area"> <input type="submit" value="立即发布"></input> </div> </form> </div> {% endblock %}
（4）详情页
详情页的html
{% extends ‘base.html‘ %} {% block title%}问答详情{% endblock %} {% block head %} <!-- 引入 Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/detail.css‘) }}"> <script src="{{ url_for(‘static‘,filename=‘js/base.js‘) }}"></script> {% endblock %} <nav></nav> {% block main %} <div class="container"> <div class="row clearfix"> <div class="page-header"> <h3>标题：{{ques.title}} <select> <option>收藏</option> <option>点赞</option> </select><br> <!--<small ><a href="{{url_for(‘usercenter‘,user_id=ques.anthor_id,tag=3)}}">{{ques.author.username}}</a>--> <a class="author" href="{{url_for(‘usercenter‘,user_id=ques.author_id,tag=1)}}">{{ques.author.username}}</a> <span class="badge">{{ques.create_time}}</span></small> </h3> </div> <p>内容：{{ques.detail}}</p> <hr> <form action="{{url_for(‘comment‘)}}"method="post" style="margin:20px"> <div class="form-group"> <textarea name="new_comment"class="form-control"rows="5"id="new-comment"placeholder="write your comment"></textarea> <input name="question_id" type="hidden" value="{{ques.id}}"> </div> <button type="submit"class="btn btn-default">发送</button> </form> <!--评论数目--> <h4>评论:({{ ques.comments|length }})</h4> </div> </div> <ul class="list-group"style="margin:10px"> {%for foo in ques.comments%} <li class="list-group-item"> <span class="glyphicon lgyphicon-heart-empty" aira-hidden="true"></span> <a href="{{url_for(‘usercenter‘,user_id=foo.author.id,tag=1)}}">{{foo.author.username}}</a> <span class="badge">{{foo.create_time}}</span> <p>{{foo.detail}}</p> </li> {%endfor%} </ul> {% endblock %}
（5）夜间模式
夜间模式的html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>夜晚模式</title> <script> function mySwitch() { var oBody=document.getElementById("myBody"); var oOnoff=document.getElementById("myOnOff"); if(oOnoff.src.match("bulbon")){ oOnoff.src="http://www.runoob.com/images/pic_bulboff.gif"; oBody.style.background="black"; oBody.style.color="white"; }else{ oOnoff.src="http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background="white"; oBody.style.color="black"; } } </script> </head> <body id="myBody"> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"> <script>document.write(Date())</script> </body> </html>
（6）个人中心的父模版html
{% extends ‘user.html‘%} {% block head %} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/detail.css‘) }}"> <script src="{{ url_for(‘static‘,filename=‘js/base.js‘) }}"></script> {% endblock %} {% block user%} <div class="page-header"> <h3> <span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<br><small>全部问答<span class="bagde"></span></small> </h3> <ul class="list-group" > {%for foo in questions%} <li class="list-group-item"> <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <a href="{{url_for(‘usercenter‘,user_id=foo.author_id,tag=1)}}">{{foo.author.username}}</a> <span class="badge">{{foo.create_time}}</span> <p>文章标题：{{ foo.title }}</p> <p>文章内容：{{foo.detail}}</p> </li> {% endfor %} </ul> </div> <div class="page-header" > <h3> <span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<br><small>全部评论<span class="bagde"></span></small> </h3> <ul class="list-group" > {%for foo in comments%} <li class="list-group-item"> <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <a href="{{url_for(‘usercenter‘,user_id=foo.author_id,tag=1)}}">{{foo.author.username}}</a> <span class="badge">{{foo.create_time}}</span> <p>文章标题：{{ foo.title }}</p> <p>评论内容：{{foo.detail}}</p> </li> {% endfor %} </ul> </div> <div class="page-header" > <h3> <span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<br><small>个人信息<span class="bagde"></span></small> </h3> <ul class="list-group"> <li class="list-group-item">用户：{{ username }}</li> <li class="list-group-item">昵称：xxx</li> <li class="list-group-item">问答条数：{{ questions|length }}</li> <li class="list-group-item">评论条数：{{ comments|length }}</li> </ul> </div> {% endblock %}
（7）全部问答
全部问答的html
{% extends ‘usercenter.html‘%} {%block user%} <div class="page-header"> <h3> <span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<br><small>全部问答<span class="bagde"></span></small> </h3> <ul class="list-group" > {%for foo in questions%} <li class="list-group-item"> <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <a href="{{url_for(‘usercenter‘,user_id=foo.author_id,tag=1)}}">{{foo.author.username}}</a> <span class="badge">{{foo.create_time}}</span> <p>文章标题：{{ foo.title }}</p> <p>文章内容：{{foo.detail}}</p> </li> {% endfor %} </ul> </div> {% endblock%}
（8）全部评论
全部评论的html
{% extends ‘usercenter.html‘%} {%block user%} <div class="page-header" > <h3> <span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<br><small>全部评论<span class="bagde"></span></small> </h3> <ul class="list-group" > {%for foo in comments%} <li class="list-group-item"> <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <a href="{{url_for(‘usercenter‘,user_id=foo.author_id,tag=1)}}">{{foo.author.username}}</a> <span class="badge">{{foo.create_time}}</span> <p>文章标题：{{ foo.title }}</p> <p>评论内容：{{foo.detail}}</p> </li> {% endfor %} </ul> </div> {% endblock%}
（9）个人信息
个人信息的html
{% extends ‘usercenter.html‘%} {%block user%} <div class="page-header" > <h3> <span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{username}}<br><small>个人信息<span class="bagde"></span></small> </h3> <ul class="list-group"> <li class="list-group-item">用户：{{ username }}</li> <li class="list-group-item">昵称：xxx</li> <li class="list-group-item">问答条数：{{ questions|length }}</li> <li class="list-group-item">评论条数：{{ comments|length }}</li> </ul> </div> {% endblock%}
（10）首页父模版的html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> {% block title %}{% endblock %} 页面 </title> <style> p.sansserif{font-family:"Comic Sans MS", cursive, sans-serif} </style> {% block head %} <!--引入bootstrap--> <link href="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"> <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/base.css‘) }}"> <script src="{{ url_for(‘static‘,filename=‘js/base.js‘) }}"></script> <link rel="stylesheet" type="text/css" href="../static/css/tu.css"> {% endblock %} </head> <body id="myBody"> <nav> <div class="img"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515127601934&di=c0de8be320080667a285226dc31f1fe6&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F17%2F65%2F65%2F58PIC58PICW58PICVXF_1024.jpg" style="width:100%;height:350px" ><br> </div> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="25px"> <ul> <a href="{{ url_for(‘base‘) }}">首页</a> <a href="{{ url_for(‘login‘) }}">登录</a> <a href="{{ url_for(‘regist‘) }}">注册</a> <a href="{{ url_for(‘ask‘) }}">发布问题</a> <a href="{{url_for(‘logout‘)}}">注销</a> </ul><br> <form action="{{url_for(‘search‘)}}" method="get"> <input name="q" type="text" placeholder="请输入关键字"> <button type="submit">搜索</button> </form> <div class="zy"> {% if username %} <a href=""><p class="sansserif">{{ username }},您好</p></a> <li><a href="{{url_for(‘logout‘)}}">注销</a></li> {% else %} {% endif %} </div> </nav> {% block main %} <div> <ul class="list-group" style="align-content: center"> {%for foo in questions %} <li class="list-group-item" > <span class="glyphicon glyphicon-leaf"aria-hidden="true"></span> <a href="{{ url_for(‘detail‘,question_id=foo.id) }}" class="title">标题：{{ foo.title }}</a><br> <p class="detail">内容：{{ foo.detail }}</p> <a class="author" href="{{url_for(‘usercenter‘,user_id=foo.author_id,tag=1)}}">{{foo.author.username}}</a>评论：({{ foo.comments|length }})<br> <span class="badge">{{foo.create_time}}</span> </li> {% endfor %} </ul> </div> {% endblock %} <div class="area"> </div> <footer> <div class="footer_box"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515125656787&di=5d6eb7fa3e307a8574f5720179a18d59&imgtype=0&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F51%2F75%2F16pic_5175300_b.jpg" style="width:50%;height:300px" ><br> Copyright@2017 个人版权，版权所有 作者：黄乐仪 </div> </footer> </body> </html>
①.安装与配置：
下载安装MySQL数据库
下载安装Navicat for MySQL
下载安装第三方库MySQL-python 中间件（pip install flask-sqlalchemy （Python的ORM框架SQLAlchemy））
②.运用可是化工具Navicat for MySQL创建数据库
③.数据库配置信息config.py
import os DEBUG=True SECRET_KEY=os.urandom(24) DIALECT=‘mysql‘ DRIVER=‘mysqldb‘ USERNAME=‘root‘ PASSWORD=‘ROOT‘ HOST=‘127.0.0.1‘ PORT=‘3306‘ DATABASE=‘misdb‘ SQLALCHEMY_DATABASE_URI = ‘mysql+pymysql://root:123456@localhost:3306/misdb?charset=utf8‘ SQLALCHEMY_TRACK_MODIFICATIONS = False
建立mysql和app的连接
from flask import Flask from flask_sqlalchemy import SQLAlchemy import config app = Flask(__name__) # 创建Flask对象 app.config.from_object(config) # 关联config.py文件进来 db = SQLAlchemy(app) # 建立和数据库的关系映射 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‘)) fabu_id = db.Column(db.Integer, db.ForeignKey(‘fabu.id‘)) creat_time = db.Column(db.DateTime, default=datetime.now) detail = db.Column(db.Text, nullable=False) fabu = db.relationship(‘Fabu‘, backref=db.backref(‘comments‘, order_by=creat_time.desc)) # order_by=creat_time.desc按时间降序 author = db.relationship(‘User‘, backref=db.backref(‘comments‘)) db.create_all() # 测试是否连接成功 @app.route(‘/lin/‘) # 跳转测试。 def lin(): return ‘lin‘ if __name__ == ‘__main__‘: app.run(debug=True)
创建用户模型
class User(db.Model): # 创建类User ... class Fabu(db.Model): ... class Comment(db.Model): ...
通过用户模型，对数据库进行增删改查
# 插入功能 user = User(username=‘15‘,password=‘12‘) db.session.add(user) db.session.commit() # 查询功能 user=User.query.filter(User.username=="15").first() print(user.username,user.password) # 修改功能 user=User.query.filter(User.username=="15").first() user.password=‘888‘ db.session.commit() # 删除功能 user=User.query.filter(User.username=="15").first() db.session.delete(user) db.session.commit()
完成注册功能
# 跳转注册。 @app.route(‘/zhuce/‘, methods=[‘GET‘, ‘POST‘]) # methods定义它有两种请求方式,因为它在表单的请求是post，类似我们在idea中的sava请求模式 def zhuce(): if request.method == ‘GET‘: return render_template(‘zhuce.html‘) else: username = request.form.get(‘user‘) # post请求模式，安排对象接收数据 password = request.form.get(‘pass‘) nickname = request.form.get(‘nickname‘) user = User.query.filter(User.username == username).first() # 作查询，并判断 if user: return u‘该用户已存在‘ else: user = User(username=username, password=password, nickname=nickname) # 将对象接收的数据赋到User类中,即存到数据库 db.session.add(user) # 执行操作 db.session.commit() return redirect(url_for(‘denglu‘)) # redirect重定向
完成登录功能
# 跳转登陆。 @app.route(‘/denglu/‘, methods=[‘GET‘, ‘POST‘]) # methods定义它有两种请求方式 def denglu(): if request.method == ‘GET‘: return render_template(‘denglu.html‘) else: username = request.form.get(‘user‘) # post请求模式，安排对象接收数据 password = request.form.get(‘pass‘) user = User.query.filter(User.username == username).first() # 作查询，并判断 if user: # 判断用户名 if user.check_password(password): # 判断密码 session[‘user‘] = username # 利用session添加传回来的值username session.permanent = True # 设置session过期的时间 return redirect(url_for(‘daohang‘)) else: return u‘用户密码错误‘ else: return u‘用户不存在,请先注册‘
上下文处理器中可以在任何模板页面中调用
@app.context_processor # 上下文处理器，定义变量然后在所有模板中都可以调用，类似idea中的model def mycontext(): user = session.get(‘user‘) if user: return {‘sessionusername‘: user} # 包装到username,在所有html模板中可调用 else: return {} # 返回空字典，因为返回结果必须是dict
用上下文处理器app_context_processor定义函数，把登陆时定义的session get进来
@app.context_processor # 上下文处理器，定义变量然后在所有模板中都可以调用，类似idea中的model def mycontext(): user = session.get(‘user‘) if user: return {‘sessionusername‘: user} # 包装到username,在所有html模板中可调用 else: return {} # 返回空字典，因为返回结果必须是dict
完成注销功能session并跳转
# 跳转注销。 @app.route(‘/logout‘) def logout(): session.clear() # 注销时删除所有session return redirect(url_for(‘daohang‘))
.编写请求登录的装饰器
# 跳转某页面之前先进行登录。定义decorator可以增强函数功能,装饰器本身是函数，入参是函数，返回值也是函数 def loginFirst(fabu): @wraps(fabu) # 加上wraps，它可以保留原有函数的__name__,docstring def wrapper(*args, **kwargs): # 定义wrapper函数将其返回，用*args, **kwargs把原函数的参数进行传递 if session.get(‘user‘): # 只有经过登陆，session才能记住并get到值 return fabu(*args, **kwargs) else: return redirect(url_for(‘denglu‘)) return wrapper
实现发布评论，并显示评论区
# 跳转评论 @app.route(‘/comment/‘, methods=[‘POST‘]) @loginFirst # 装饰器，跳转某页面之前先进行登录 def comment(): detail = request.form.get(‘pinglun‘) # post请求模式，安排对象接收数据 author_id = User.query.filter(User.username == session.get(‘user‘)).first().id fabu_id = request.form.get(‘fa_id‘) comment = Comment(detail=detail, author_id=author_id, fabu_id=fabu_id) # 将对象接收的数据赋到Comment类中,即存到数据库 db.session.add(comment) # 执行操作 db.session.commit() # 提交到数据库 return redirect(url_for(‘fabuview‘, fabu_id=fabu_id)) # 重定向到fabuview请求时要带fabu_id
个人中心—视图函数带标签页面参数tag（在if判断时判断tag，可以三个页面跳转同一请求函数）
# 跳转用户详情 @app.route(‘/yonghu/<username_id>/<tag>‘) # 为了把页面分开，我们在html页面传了一个tag参数 def yonghu(username_id, tag): user = User.query.filter(User.id == username_id).first() context = { ‘userid‘: user.id, ‘username‘: user.username, ‘fabus‘: user.fabu, ‘comments‘: user.comments } # 根据tag的不同去到不同页面，一个请求跳转3个不同页面 if tag == ‘1‘: return render_template(‘yonghu1.html‘, **context) elif tag == ‘2‘: return render_template(‘yonghu2.html‘, **context) else: return render_template(‘yonghu3.html‘, **context)
实现导航条中的搜索功能
# 跳转首页搜索 @app.route(‘/search/‘) def search(): sousuo = request.args.get(‘sousuo‘) # args获取关键字,区别form fabus = Fabu.query.filter( or_( # 两种查询条件 Fabu.title.contains(sousuo), # contains模糊查 Fabu.detail.contains(sousuo) ) ).order_by(‘-creat_time‘) return render_template(‘daohang.html‘, fabus=fabus) # fabus要和原首页数据模型一样
密码保护
from werkzeug.security import generate_password_hash,check_password_hash _password = db.Column(db.String(200), nullable=False) # 密码加密内部使用 @property # 定义函数，需要用属性时可以用函数代替 def password(self): # 密码加密外部使用 return self._password @password.setter def password(self,row_password): # 密码进来时进行加密,generate_password_hash是一个密码加盐哈希函数，生成的哈希值可通过check_password_hash()进行验证。 self._password = generate_password_hash(row_password) def check_password(self,row_password): # check_password_hash函数用于验证经过generate_password_hash哈希的密码。若密码匹配，则返回真，否则返回假。 result = check_password_hash(self._password,row_password) return result
