期末作品检查:总结Python+Flask+MysqL的web建设技术过程
一、个人学期总结
在一学期里我们学习并实现了基于Python的Flask框架web建设项目，要在一学期里入门一个新的语言并且完成相应的框架项目建，对我这个代码“小白”来说还是非常有难度的。
首先让我们来了解一下Python的一些优势和目前的发展情况，python是一种面向对象的解释型计算机程序设计语言，语法简洁清晰，目前已超越java成为最热门的编程语言之一。作为以后有可能向IT方向发展的学生来说，紧跟潮流进行学习和自我提升是非常重要的事情，也许老师也是考虑到这一点，所以让我们接触了最新最热门的Python以及Pycharm开发工具。
学期初始，我们学习了Python的基础语法，输入、输出、交互、数字计算的方法、字符串基本操作、凯撒密码、自制九九乘法表、中英文词频统计等，还学习了import turtle库，并利用这个库绘制出多种多样的图形，海龟图标有趣可爱，课堂氛围活泼许多，从而激发了我们学习Python的兴趣，提升了我们对编程语言的思维能力，为构建Flask框架制作网页的学习打下基础。
在学习Python+Flask+MysqL的web建设时，需要安装数据库（mysql）、开发工具（pycharm）和开发需要用到的第三方库等。
一开始，我们学习网页前端的制作，第一次知道五花八门的网页原来是由许许多多的标签对组成的，每一对都有它特定的一些功能，包含了标签对里的众多参数，每个参数都有不同的含义，给页面前端带来不同的效果。刚开始接触html+css+js的时候会想各种办法去把网页做好看，尝试了各种各样的样式和标签对，或者从网页上cope别人做好的样式代码去修改，碰到不会的代码就问百度解答或同学探讨，在这过程中又学会了许多课堂上没有教过的知识，但是最终做出的页面也不尽人意，这才感悟做出漂亮好看的前端如此不易。老师在课上推荐了菜鸟教程这个平台（http://www.runoob.com/），里面的bookstrap样式简洁明了，很是好看，为我们做出一个好看的页面提供了便捷的途径。
在后端建设过程中，我们引入了flask库，用于创建一个Flask对象以及页面的跳转，引入flask_sqlalchemy库进行数据库的关联映射等，学习了对数据的增删改查等操作，利用对数据库的查询、添加功能实现了页面的登陆、注册以及发布功能，这些功能的实现根据前端页面的name属性名，后台请求接收同名name的值，再对接收到的值做一系列的操作。在对这些name属性命名时，要注意前后端对应，且同一页面不能出现相同命名，否则会出现数据传递出错，造成一系列的麻烦，所以在编程过程中要时刻注意代码的唯一性、对应性、尽量用更少更优化的代码实现功能。
说到代码，讲了唯一性和对应性，就不得不提简洁性和清晰性了，打代码时可以多用“Ctrl+Alt+L”快捷键进行格式化代码，以便我们清晰的观察和修改代码。养成良好的习惯还在于多用“Ctrl+/”打注释，把个人的理解和思路整理成简单的注释，不仅方便自己复习和修改还有利于使用者及他人查看学习。
一般来说，在着手写代码前，应先明确目标和功能，理请原理和思路，再开始编写，遵循小步快走的原则，在写好每个功能代码后，按原理检查是否出错， 再运行页面验证功能，如此渐渐的把整个系统实现。出错时也不必惊慌，先用F12打开页面控制台查看数据发送、接收情况和红色报错项目，或者到pycharm后台里找相应的报错字眼、提示等等去解决问题。
总之，借用老师的一句话，“编程是一门艺术活”，像做建筑一般，字母是它的钢筋水泥和砖块，只有实打实的基础，地基牢固，才能成就崛起的名胜古迹。
本学期学习了python+flask web开发，我觉的自己真正的学到了东西，从菜鸟到会独立完成自己的项目，过程中遇到很多问题，查阅资料，与同学讨论后一起解决。 虽然这个学期python课程学习结束了，但是我的学习不会止于此，我还会继续学习python语言，不断提升自己的能力。
二、Python+Flask+MysqL的web建设技术过程总结
1、使用工具
工具：pycharm64.exe + Python 3.6 64-bit + MySQL + Navicat for MySQL
2、基本页面展示
（1）导航条
（2）登录页面
（3）注册页面
（4）发布页面
（5）首页
（6）评论页面
（7）个人页面
3、第三方库导入、Flask初始概览与数据库链接
主py文件：
config：数据库连接
app = Flask(__name__) app.config.from_object(config) db = SQLAlchemy(app) class User(db.Model): # 创建类User __tablename__ = 'user' # 类对应的表名user id = db.Column(db.Integer, primary_key=True, autoincrement=True) # autoincrement自增长 username = db.Column(db.String(20), nullable=False) # nullable是否为空 _password = db.Column(db.String(200), nullable=False) #内部使用 nickname = db.Column(db.String(20), nullable=True) @property def password(self): return self._password @password.setter def password(self,row_password): self._password=generate_password_hash(row_password) def check_password(self,row_password): result=check_password_hash(self._password,row_password) return result class Fabu(db.Model): __tablename__ = 'fabu' 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('fabu')) 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)) author = db.relationship('User', backref=db.backref('comments')) db.create_all() # 使用装饰器，设置路径与函数之间的关系。 #使用Flask中render_template，用不同的路径，返回首页、登录员、注册页。 # 用视图函数反转得到URL，url_for(‘login’)，完成导航里的链接。 @app.route('/') def daohang(): context={ 'fabus': Fabu.query.order_by('-creat_time').all() } return render_template('daohang.html',**context) if __name__ == '__main__': app.run(debug=True)
4、增删改查功能
# 插入功能 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()
5、加载静态文件、父模板与其他页面继承
url_for运用：
from flask import url_for
跳转后端请求：
加载静态文件：（css、js、image）
继承父模板：
6、注册功能：
（1）html文件：
{% extends 'daohang.html' %} {% block zhucetitle %}注册{% endblock %} {% block zhucehead %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/denglu.css') }}"> <script src="{{ url_for('static',filename='js/denglu.js') }}"></script> {% endblock %} {% block daohangbody %} <div class="center-block" id="zhucebox"> <div class="panel panel-primary" id="zhucebox1_1"> <div class="panel-heading"> <h2 class="panel-title">注册</h2> </div> <br> <form class="bs-example bs-example-form" role="form" action="{{ url_for('zhuce') }}" method="post"> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" class="form-control" name="user" id="user" placeholder="请输入用户名"> </div> <br> <div class="input-group"> <span class="input-group-addon"></span> <input type="password" class="form-control" name="pass" id="pass" placeholder="请设置密码" > </div> <br> <div class="input-group"> <span class="input-group-addon"></span> <input type="password" class="form-control" id="again" placeholder="请再次输入密码"> </div> <div id="error_box1"> <br> </div> <br> <label><input type="submit" class="btn btn-default" value="注册" onclick="fnRegistration()"></input></label> </form> </div> </div> {% endblock %}
（2）js文件：
function fnRegistration() { var uSer = document.getElementById("user"); var pAss = document.getElementById("pass"); var aGain = document.getElementById("again"); var oError = document.getElementById("error_box"); var isError = true; oError.innerHTML = "<br>"; // 验证用户名 if (uSer.value.length < 6 || uSer.value.length > 20) { oError.innerHTML = "用户名只能6-20位"; isError = false; return isError; } else if ((uSer.value.charCodeAt(0) >= 48) && (uSer.value.charCodeAt(0) <= 57)) { oError.innerHTML = "用户名首字母不能是数字"; isError = false; return isError; } else for (var i = 0; i < uSer.value.length; i++) { if ((uSer.value.charCodeAt(i) < 48) || (uSer.value.charCodeAt(i) > 57) && (uSer.value.charCodeAt(i) < 97) || (uSer.value.charCodeAt(i) > 122)) { oError.innerHTML = "用户名只能由数字和字母组成"; isError = false; return isError; } } // 验证密码 if (pAss.value.length < 6 || pAss.value.length > 20) { oError.innerHTML = "密码只能6-20位"; isError = false; return isError; } // 验证再次输入的密码 if (aGain.value != pAss.value) { oError.innerHTML = "密码不一致"; isError = false; return isError; } // 验证弹框 window.alert("注册成功！"); return true; }
（3）py文件：
@app.route('/zhuce/', methods=['GET', 'POST']) 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重定向
7、登录功能：
（1）html文件：
{% extends 'daohang.html' %} {% block denglutitle %}登陆{% endblock %} {% block dengluhead %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/denglu.css') }}"> <script src="{{ url_for('static',filename='js/denglu.js') }}"></script> {% endblock %} {% block daohangbody %} <div class="center-block" id="loginbox"> <div class="panel panel-primary" id="loginbox1_1"> <div class="panel-heading"> <h2 class="panel-title">登陆</h2> </div> <br> <form class="bs-example bs-example-form" role="form" action="{{ url_for('denglu') }}" method="post"> <div class="input-group"> <span class="input-group-addon"></span> <input class="form-control" type="text" name="user" id="user" placeholder="请输入用户名"> </div> <br> <div class="input-group"> <span class="input-group-addon"></span> <input class="form-control" type="password" name="pass" id="pass" placeholder="请输入密码" > </div> <div id="error_box"> <br> </div> <div class="checkbox"> <label> <input type="checkbox">记住我 </label> </div> <br> <label><input type="submit" class="btn btn-default" onclick="fnLogin()" value="登陆"> </input> </label> </form> </div> </div> {% endblock %}
（2）js文件：
function fnLogin() { var uSer = document.getElementById("user"); var pAss = document.getElementById("pass"); var oError = document.getElementById("error_box"); var isError = true; oError.innerHTML = "<br>"; // 验证用户名 if (uSer.value.length < 6 || uSer.value.length > 20) { oError.innerHTML = "用户名只能6-20位"; isError = false; return isError; } else if ((uSer.value.charCodeAt(0) >= 48) && (uSer.value.charCodeAt(0) <= 57)) { oError.innerHTML = "用户名首字母不能是数字"; isError = false; return isError; } else for (var i = 0; i < uSer.value.length; i++) { if ((uSer.value.charCodeAt(i) < 48) || (uSer.value.charCodeAt(i) > 57) && (uSer.value.charCodeAt(i) < 97) || (uSer.value.charCodeAt(i) > 122)) { oError.innerHTML = "用户名只能由数字和字母组成"; isError = false; return isError; } } // 验证密码 if (pAss.value.length < 6 || pAss.value.length > 20) { oError.innerHTML = "密码只能6-20位"; isError = false; return isError; } // 验证弹框 window.alert("登陆成功！"); return true; }
（3）py文件：
内有session功能
@app.route('/denglu/', methods=['GET', 'POST']) 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'用户不存在,请先注册'
处理器模板：
8、发布功能：
（1）html文件：
{% extends 'daohang.html' %} {% block fabutitle %}发布{% endblock %} {% block fabuhead %} <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> {% endblock %} {% block daohangbody %} <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; } </style> <div class="panel panel-default center" style="height:450px;width:500px"> <div class="panel-body"> <div class="form-group"> <form role="form" action="{{ url_for('fabu') }}" method="post"> <div class="form-group"> <label for="name" style="color: black">选择列表</label><br> <select class="form-control" style="height:35px;width:400px"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <br> <label for="title" style="color:black">标题</label><br> <textarea class="form-control" rows="1" cols="50" id="title" name="title" style="height:35px;width:400px"></textarea><br> <label for="detail" style="color: black">详情</label><br> <textarea class="form-control" rows="5" cols="50" id="detail" name="detail" style="height:100px;width:400px"></textarea><br> <input style="color: whitesmoke" type="checkbox" name="c1" id="c1" value="">记住我<br> <div id=""><br></div> <input type="submit" value="发布" class="btn btn-default" onclick=""> </div> </form> </div> </div> </div> {% endblock %}
（2）py文件：
class Fabu(db.Model): __tablename__ = 'fabu' 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('fabu')) 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('/fabu/', methods=['GET', 'POST']) @loginFirst def fabu(): if request.method == 'GET': return render_template('fabu.html') else: title = request.form.get('title') detail = request.form.get('detail') author_id = User.query.filter( User.username == session.get('user')).first().id fabu = Fabu(title=title, detail=detail, author_id=author_id) db.session.add(fabu) db.session.commit() return redirect(url_for('daohang'))
9、评论功能：
（1）html文件：
{% extends 'daohang.html' %} {% block fabu_viewtitle %}发布{% endblock %} {% block fabu_viewhead %} <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> {% endblock %} {% block daohangbody %} <h2 href="#" class="text-center" style="color: oldlace">{{ ques.title }}</h2> <br> <p class="text-center"> <a href="#"> <small>{{ ques.author.username }}</small> </a>    <span class="pull-center" style="color: oldlace"><small>{{ ques.creat_time }}</small></span> </p> <hr> <div style="width: 700px;margin: auto"> <p style="color: oldlace">{{ ques.detail }}</p> </div> <hr> <form action="{{ url_for('comment') }}" method="post"> <div class="form-group" style="height: 180px;width: 700px;margin: auto"> <textarea name="pinglun" class="form-control" rows="5" id="pinglun" placeholder="请输入评论"></textarea> <input type="hidden" name="hidden_id" value="{{ ques.id }}"> <br> <input type="submit" value="发送" class="btn btn-default" onclick=""> </div> <div style="width: 700px;margin: auto"> <h4 style="color: oldlace">评论：（{{ ques.comments|length }}）</h4> <ul class="list-unstyled"> {% for foo in comments %} <li class="list-group-item"> <a>{{ foo.author.username }}</a> <span class="badge pull-right">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> <br> </li> {% endfor %} </ul> </div> </form> {% endblock %}
（2）py文件：
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)) author = db.relationship('User', backref=db.backref('comments')) @app.route('/detail/<question_id>') def detail(question_id): quest=Fabu.query.filter(Fabu.id==question_id).first() comments = Comment.query.filter(Comment.fabu_id == question_id).all() return render_template('fabu_view.html',ques=quest,comments=comments) @app.route('/comment/',methods=['POST']) @loginFirst def comment(): detail = request.form.get('pinglun') author_id = User.query.filter(User.username == session.get('user')).first().id fabu_id = request.form.get('hidden_id') comment = Comment(detail=detail,author_id=author_id,fabu_id=fabu_id) db.session.add(comment) # 执行操作 db.session.commit() # 提交到数据库 return redirect(url_for('detail',question_id=fabu_id))
10、个人中心实现：
html文件：
（1）user模板：
{% extends 'daohang.html' %} {% block title %}个人中心{% endblock %} {% block head %} {% endblock %} {% block daohangbody %} <div style="width: 700px;margin: auto"> <ul class="nav nav-pills "> <li class="active"><a href="{{ url_for('usercenter',user_id=user_id,tag=1) }}">个人信息</a></li> <li class="active"><a href="{{ url_for('usercenter',user_id=user_id,tag=2) }}">全部评论</a></li> <li class="active"><a href="{{ url_for('usercenter',user_id=user_id,tag=3) }}">全部发布</a></li> </ul> {% block user %}{% endblock %} </div> {% endblock %}
（2）usercenter1：
{% extends 'user.html' %} {% block user %} <div class="page-header"> <ul class="page-header"> <h3 style="color: whitesmoke"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br> <small style="color: azure">个人资料信息<span class="badge"></span></small> </h3> <div class="panel panel-default" style="height:180px;width:400px"> <ul class="list-group" style="..."> <li class="list-group-item">用户名：{{ username }}</li> <li class="list-group-item">昵称：</li> <li class="list-group-item">性别：</li> <li class="list-group-item">年龄：</li> </ul> </div> </ul> </div> {% endblock %}
（3）usercenter2：
{% extends 'user.html' %} {% block user %} <div class="page-header"> <ul class="page-header"> <h3 style="color: whitesmoke" ><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br> <small style="color: azure">全部评论<span class="badge"></span></small> </h3> <div class="panel panel-default" style="width:700px"> <ul class="list-group" style="..."> {% 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.creat_time }}</span> <p style="...">{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> </ul> </div> {% endblock %}
（4）usercenter3：
{% extends 'user.html' %} {% block user %} <div class="page-header"> <ul class="page-header"> <h3 style="color: whitesmoke"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br> <small style="color: azure">全部问答<span class="badge"></span></small></h3> <ul class="list-group" style="height:300px;width:700px"> {% for foo in fabus %} <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.creat_time }}</span> <p style="...">{{ foo.detail }}</p> </li> {% endfor %} </ul> </ul> </div> {% endblock %}
py文件：
@app.route('/usercenter/<user_id>/<tag>') @loginFirst def usercenter(user_id,tag): user=User.query.filter(User.id==user_id).first() context={ 'user_id':user.id, 'username': user.username, 'fabus': user.fabu, 'comments': user.comments } if tag=='1': return render_template('usercenter1.html',**context) elif tag=='2': return render_template('usercenter2.html', **context) else: return render_template('usercenter3.html', **context)
11、搜索功能：
@app.route('/search/') def search(): qu = request.args.get('q') ques = Fabu.query.filter( or_( Fabu.title.contains(qu), Fabu.detail.contains(qu) ) ).order_by('-creat_time') return render_template('daohang.html', fabus=ques)
12、密码保护功能：
@property def password(self): return self._password @password.setter def password(self,row_password): self._password=generate_password_hash(row_password) def check_password(self,row_password): result=check_password_hash(self._password,row_password) return result
