期末作品检查
1.个人学期总结
本学期在杜老师的带领下,我们进行了python的学习,在博客园发布了很多篇学习随笔,自己也对这个语言有了一定的认识。我的学习过程大概可以分为3个阶段。前期理论课,理解管路信息系统,基础练习;中期开始网页的制作;后期为网页增加功能。
前期
理论授课,了解并理解管理信息系统,了解python基本的功能并让自己实现python的功能,在这个时期里,我们学习Python进行简单算数计算。了解turtle库(海龟库),在此环境中练习条件、循环、函数定义的代码敲打,并画出了五角星、同心圆、太阳花、中国国旗等。随后便学习了字符串的基本操作,学会输入字符串,输出代码计算后的结果。还学习了凯撒密码、九九乘法表等简单操作。利用python进行英文词汇统计,组合数据类型练习,用文件形式实现完成的英文词频统计、中文词频统计。利用datetime处理日期和时间,同时了解管理信息系统概念与基础,理解数据存储的方式如字典、列表、元祖、集合,以致于后来我们学习的网页制作,与这四个数据存储方式息息相关。了解到Web是图形化的和易于导航的、与平台无关、是分布式的、是动态的、是交互的。
中期
来到本学期的重头戏——web的学习,学会认识URL,会观察网站网址,区分组成部分,练习用标签制作简单的页面,用html制作web页面,练习使用下拉列表选择框、无序列表、有序列表、定义列表。开始制作自己的导航条(HTML头部元素:<base> 定义了页面链接标签的默认链接地址。<style> 定义了HTML文档的样式。<link> 定义了一个文档和外部资源之间的关系)。练习样式表:行内样式表、内嵌样式表、外部样式表。分别练习定义三类选择器:HTML 选择器、CLASS 类选择器、ID 选择器。初步运用css做图片导航块,使用JS定义函数进行登录注册验证,完成登录与注册页面的前端,夜间模式的开启与关闭。
后期
为网页增加功能。开始做Flask项目,加载静态文件,父模板的继承和扩展,连接mysql数据库,创建用户模型,建立mysql和app的连接。通过用户模型,对数据库进行增删改查操作。完成注册功能;完成注销功能;发布功能的实现;制作首页的显示列表;首页列表显示全部问答;完成问答详情页布局;从首页问答标题到问答详情页;完成评论功能;完成评论列表显示及时间排序;个人中心显示;个人中心标签页导航;完成个人中心—导航标签;实现搜索功能;实现密码加密功能。
2.总结Python+Flask+MysqL的web建设技术过程,标准如下:
1.即是对自己所学知识的梳理
2.也可作为初学入门者的简单教程
3.也可作为自己以后复习的向导
4.也是一种向外展示能力的途径
完成登陆与注册页面的前端
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <link href="../static/css/login.css" rel="stylesheet" type="text/css"> <script src="../static/js/login.js"></script> </head> <body> <div class="box"> <h2>广州商学院GZCC</h2> <h3>注册</h3> <div class="input_box"> <input id="uname" type="text" placeholder="请输入用户名" style="width:280px"> </div> <div class="input_box"> <input id="upass" type="password" placeholder="请输入密码" style="width:280px"> </div> <div class="input_box"> <input id="uupass" type="password" placeholder="请重复输入密码" style="width:280px"> </div> <div class="input_box"> <input id="nname" type="password" placeholder="请输入昵称" style="width:280px"> </div> </div> <br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">注册</button><br> </div> </div> <script> window.alert("go!") </script> </body> </html>
css:
body{ background: #8be5ee; padding-right:230px; padding-left:230px; color: rgba(40, 102, 255, 0.82); padding-top: 40px; font-size: 16px; background: #18c7ff; font-family:verdana,Arial,Helvetica,sans-serif; } h2{ padding-left: 60px; } h3{ padding-left: 120px; }
js:
function fnLogin() { var oUname = document.getElementById("uname") var oName = document.getElementById("nname") var oError = document.getElementById("error_box") var oUpass = document.getElementById("upass") var ooUpass=document.getElementById("uupass") oError.innerHTML = "<br>" //unname if (oUname.value.length < 6 || oUname.value.length > 20) { oError.innerHTML = "用户名6-20位"; return; } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) { oError.innerHTML = "first letter."; return; } else for (var i = 0; i < oUname.value.length; i++) { if ((oUname.value.charCodeAt(i) < 48) || (oUname.value.charCodeAt(i) > 57) && (oUname.value.charCodeAt(i) < 97) || (oUname.value.charCodeAt(i) > 122)) { oError.innerHTML = "only letter or number"; return; } } //upass if (oUpass.value.length < 6 || oUpass.value.length > 12) { oError.innerHTML = "密码6-12位" return; } //uupass if (ooUpass.value!=oUpass.value) { oError.innerHTML = "重复密码错误" return; } //name if (oName.value.length < 3 || oUpass.value.length > 6) { oError.innerHTML = "昵称3-6位"; return; }else for (var i = 0; i < oUname.value.length; i++){ if ((oUname.value.charCodeAt(i) < 48) || (oUname.value.charCodeAt(i) > 57) && (oUname.value.charCodeAt(i) < 97) || (oUname.value.charCodeAt(i) > 122)) { oError.innerHTML = "only letter or number"; return; } } window.alert("登陆成功!") }
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"; } }
链接mysql数据库,创建用户模型
from flask import Flask from flask_sqlalchemy import SQLAlchemy 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) db.create_all() @app.route('/') def hello_world(): return 'Hello World!' if __name__ == '__main__': app.run() SQLALCHEMY_DATABASE_URI='mysql+pymysql://root:@localhost:3306/mis15?charset=utf8' SQLALCHEMY_TRACK_MODIFICATTONS = False
制作首页的现实列表
db.create_all() # 首页 @app.route('/') def index(): context={ 'title':'title', 'detail':'detail', 'username': 'yang', 'create_time': 'create_time', } return render_template('base.html',**context)
首页列表显示全部问答,完成问答详情页布局
{% extends 'daohang.html' %} {% block title %}首页{% endblock %} {% block main %} <p>{{ user }}contex</p> <div class="box"> <ul class="list-group" style=" padding-left: 0; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.498039) 0 0 0 0;"> {% for foo in questions %} <li class="list-group-item"> <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> <a href="#">{{ foo.author.username }}</a> <br> <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div>
{% extends 'daohang.html' %} {% block title %}问答详情{% endblock %} {% block main %} <div class="page-header"> <h3>Title{{ ques }}<br> <small>author {{ ques.author_id }}{{ ques.creat_time }}</small> </h3> </div> <p class="lead">detail{{ ques.detail }}</p> <hr> <form action="{{ url_for('question') }}" method="post"> <div class="form-group"> <textarea name="new_comment" class="form-control" rows="3" id="new_comment" placeholder="write your comment"></textarea> </div> <button type="submit" class="btn btn-default">发送</button> </form> <ul class="list-group" style="margin: 10px"></ul> {% endblock %}
完成评论功能
@app.route('/comment/',methods=['POST']) @loginFrist def comment(): comment = request.form.get('new-comment') ques_id = request.form.get('question_id') auth_id = User.query.filter(User.username == session.get('user')).first().id comm = Comment(author_id = auth_id, question_id=ques_id ,detail=comment) db.session.add(comm) db.session.commit() return redirect(url_for('detail',question_id=ques_id))
实现搜索功能
@app.route('/search/') @loginFirst 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('base.html',questions=ques)
经过这一整个学期的学习,基本熟悉了Python+Flask+MysqL的web建设技术过程,同时也加强了自己的学习能力,希望在以后能继续保持,多多运用这些知识,并且找出自己不足的地方,学习到更多的知识。