期末作品检查:总结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'  # 类对应的表名userid = 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)@propertydef password(self):return self._password@password.setterdef 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  resultclass 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添加传回来的值usernamesession.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__,docstringdef 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().idfabu = 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>&nbsp&nbsp&nbsp<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().idfabu_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、密码保护功能：

@propertydef password(self):return self._password@password.setterdef 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

转载于:https://www.cnblogs.com/silu666-666/p/8183030.html