期末作品检查
1.个人学期总结
这一学期，在杜云梅老师的带领下接触到了网页制作的课程，也接触了新的开源工具python。python是一种面向对象的解释型计算机程序设计语言，n具有丰富和强大的库，能够把用其他语言制作的各种模块很轻松地联结在一起。python也是目前最受欢迎的编程语言。在管理信息系统的课程的学习中，主要可以分为前中后期三个阶段。
前期阶段:用Python进行简单算数计算。了解和使用turtle库（海龟库），理解和练习条件、循环、函数定义，通过代码画出了五角星、同心圆、太阳花、中国国旗；学习字符串的基本操作，通过输入字符串，输出代码计算后的结果、凯撒密码、GDP格式化输出、九九乘法表等简单操作。利用python进行英文词汇统计，组合数据类型练习，用文件形式实现完成的英文词频统计、中文词频数统计。利用datetime处理日期和时间，将字符串转化成imestamp与timedelta。还了解管理信息系统概念与基础，理解数据存储的各类方式：字典、列表、元组、集合。
中期阶段：初期的web网页开发。学习了web基础，用html元素制作web界面；练习使用下拉列表选择框、无序列表、有序列表、定义列表；制作自己的导航条；练习样式表：行内样式表、内嵌样式表、外部样式表等；运用css做图片导航块，使用JS定义函数进行登录注册验证，完成登录与注册页面的前端，还有不同阅读模式的使用
后期阶段：开始进行Flask项目，加载静态文件，父模板的继承和扩展，连接mysql数据库，创建用户模型，建立mysql和app的连接。通过用户模型，对数据库进行增删改查操作。完成注册功能，将界面的数据存到数据库，redirect重定向登录页。完成登录功能，用session记住用户名，增加用户名。登录之后更新导航。在父模板中更新导航，插入登录状态判断代码。完成注销功能，清除session。发布功能的实现，制作首页的显示列表，首页列表显示全部问答，完成问答详情页布局，从首页问答标题到问答详情页，完成评论功能，完成评论列表显示及排序，个人中心显示，个人中心标签页导航，完成个人中心—导航标签，实现搜索功能（包括高级搜索等），实现密码加密功能。还增加了模型分离与数据迁移，让数据管理更加高效简洁。
2.总结Python+Flask+MysqL的web建设技术过程
使用工具：pycharm64.exe ； MySQL 、 Navicat for MySQL（可视化Mysql）
（1）主页面
（2）注册页面
（3）登录页面
（4）个人中心
（5）发布帖子
（6）底部导航
（7）评论
主要代码：
主py文件
import pymysql from flask import Flask, render_template, request, redirect, url_for, session from flask_sqlalchemy import SQLAlchemy from functools import wraps import config from datetime import datetime from sqlalchemy import or_,and_ pymysql.install_as_MySQLdb() 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(50)) class Sent(db.Model): __tablename__ = 'sent' 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) author_id = db.Column(db.Integer, db.ForeignKey('user.id')) creat_time = db.Column(db.DateTime, default=datetime.now) author = db.relationship('User', backref=db.backref('sent')) 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')) sent_id = db.Column(db.Integer, db.ForeignKey('sent.id')) creat_time = db.Column(db.DateTime, default=datetime.now) detail = db.Column(db.TEXT, nullable=False) sent = db.relationship('Sent', backref=db.backref('comments', order_by=creat_time.desc)) author = db.relationship('User', backref=db.backref('comments')) db.create_all() # 添加 # user=User(username='mis111',password='starlight') # db.session.add(user) # db.session.commit() # 修改 # user = User.query.filter(User.username == 'vixx').first() # user.password = '00000' # db.session.commit() # 删除 # user = User.query.filter(User.username == 'mis111').first() # db.session.delete(user) # db.session.commit() # 遍历首页 @app.route('/') def base(): context = { # 'sent':Sent.query.order_by('creat_time').all(), 'username': Sent.query.order_by('creat_time').all() } return render_template('shouye.html', **context) # @loginFirst @app.route('/detail/<sent_id>') def detail(sent_id): sentt = Sent.query.filter(Sent.id == sent_id).first() context = { 'comments': Comment.query.all(), } return render_template('detail.html', sen=sentt, **context) @app.route('/login/', methods=['GET', 'POST']) def login(): if request.method == 'GET': return render_template('dl.html') else: username = request.form.get('dlusername') password = request.form.get('dlpassword') user = User.query.filter(User.username == username, User.password == password).first() if user: session['user'] = username session.permanent = True return redirect(url_for('base')) else: return '用户不存在或密码错误' @app.context_processor def mycontext(): usern = session.get('user') user=User.query.filter(User.username == session.get('user')).first() if usern: return {'usern': usern, 'useraction':user} else: return {} @app.route('/logout/') def logout(): session.clear() return redirect(url_for('base')) @app.route('/register/', methods=['GET', 'POST']) def register(): if request.method == 'GET': return render_template('zhuce.html') else: username = request.form.get('username') password = request.form.get('password') nickname = request.form.get('nickname') user = User.query.filter(User.username == username).first() if user: return "账户已存在" else: user = User(username=username, password=password, nickname=nickname) 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('/sent/', methods=['GET', 'POST']) @loginFirst def sent(): if request.method == 'GET': return render_template('sent.html') else: title = request.form.get('titleDetail') detail = request.form.get('questionDetail') author_id = User.query.filter(User.username == session.get('user')).first().id sent = Sent(title=title, detail=detail, author_id=author_id) db.session.add(sent) db.session.commit() return redirect(url_for('base')) # return render_template('sent.html') @app.route('/comment/', methods=['POST']) @loginFirst def comment(): comment = request.form.get('comment') sent_id = request.form.get('sent_id') auth_id = User.query.filter(User.username == session.get("user")).first().id comm = Comment(author_id=auth_id, sent_id=sent_id, detail=comment) db.session.add(comm) db.session.commit() return redirect(url_for('detail', sent_id=sent_id)) @app.route('/usercenter/<user_id>/<tag>') @loginFirst def usercenter(user_id, tag): user = User.query.filter(User.id == user_id).first() context = { 'username': user.username, 'sent': user.sent, 'comments': user.comments, 'user': user } if tag == 'wenda': return render_template('wenda.html', **context) elif tag == 'pinlun': return render_template('pinlun.html', **context) else: return render_template('GRZX.html', **context) @app.route('/search/') def search(): qu = request.args.get('q') ques = Sent.query.filter( or_( Sent.title.contains(qu), Sent.detail.contains(qu) ) ).order_by('creat_time') return render_template('shouye.html', username=ques) if __name__ == '__main__': app.run(debug=True)
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jelly音乐汇 {% block title %}{% endblock %} </title> <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> <link rel="stylesheet" type="text/css" href="../static/css/index.css"> {% block head %}{% endblock %} </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid dao"> <ul class="nav nav-pills nav2"> <li><img src="{{ url_for('static',filename='image/logo.png') }}" width="50px" height="50px"></li> <li class="active"><a href="{{ url_for('base') }}">首页</a></li> <li><a href="#">国内榜</a></li> <li><a href="#">港澳台榜</a></li> <li><a href="#">欧美榜</a></li> <li><a href="#">日韩榜</a></li> <li><a href="{{ url_for('sent') }}">发帖</a></li> {% if usern %} <li style="float: right;margin-right: 100px"><a href="{{ url_for('logout') }}">注销</a></li> <li style="float: right"><a href="{{ url_for('usercenter',user_id=useraction.id,tag='wenda') }}">{{ usern }}</a></li> {% else %} <li style="float: right;margin-right: 150px"><a href="{{ url_for('register') }}" style="color: hotpink">注册</a></li> <li style="float: right"><a href="{{ url_for('login') }}">登录</a></li> {% endif %} <div > <form action="{{ url_for('search') }}" method="get" class="bs-example bs-example-form" role="form"> <div class="col-lg-6" style="width: 250px;padding-bottom: 30px"> <div class="input-group"> <input name="q" type="text" class="form-control" placeholder="请输入关键字"> <span class="input-group-btn"> <button class="btn btn-default" type="submit">搜索</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </form> </div> </ul> </div> </nav> {% block body %}{% endblock %} </body> </html>
shouye.html
{% extends 'index.html' %} <meta charset="UTF-8"> <title> {% block title %} 首页 {% endblock %}</title> {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/shouye.css') }}"> {% endblock %} {% block body %} {#<div class="back">#} <div class="all" > {# <div class="panel panel-default">#} {# <div class="panel-body">#} {% for foo in username %} <div class="wai" > <li class="have-img"> <div class="content"> <div class="author"> <a class="avatar" target="_blank" href=""> <img class="img" src="{{ url_for('static',filename='image/touxiang.jpg') }}"></a> <div class="info"> <a class="nickname" href="{{ url_for('usercenter',user_id=foo.author_id,tag='wenda')}}">{{ foo.author.username }}</a> <span class="badge" data-shared-at="2017-11-30T08:15:03+08:00">{{ foo.creat_time }}</span> </div> </div> <br> <a style="font-size: 20px" class="stitle" target="_blank" href="{{ url_for('detail',sent_id=foo.id) }}">{{ foo.title }}</a> <p class="abstract"> {{ foo.detail }}</p> <div class="meta"> <a class="collection-tag" target="_blank" href="">{{ biaoqian }}</a> </div> </div> </li> </div> {% endfor %} </div> </div> <div id="dibu"> <div class="img"><a href="http://music.163.com/"><img src="{{ url_for('static',filename='image/music.jpg') }}"></a><div class="desc"></div><a href="#">友情链接</a></div> <div class="img"><a href="https://y.qq.com/portal/playlist.html"><img src="{{ url_for('static',filename='image/back2.jpg') }}"></a><div class="desc"></div><a href="#">音乐中心</a></div> <div class="img"><a href="http://www.melon.com/index.htm"><img src="{{ url_for('static',filename='image/melon.jpg') }}"></a><div class="desc"></div><a href="#">Melon</a></div> <div class="img"><a href="http://www.baidu.com"><img src="{{ url_for('static',filename='image/music1.jpg') }}"></a><div class="desc"></div><a href="#">回到顶部</a></div> </div> {% endblock %}
login.html
{% extends 'index.html' %} {% block body %} <link rel="stylesheet" type="text/css" href="../static/css/style.css"> <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'> <div class="lg-container" > <h1>登录</h1> <form action="{{ url_for('login') }}" method="post" id="lg-form" name="lg-form" > <div> <label for="username">Username:</label> <input class="shuru" id="uname" type="text" name="dlusername" placeholder="请输入用户名"><br> </div> <div> <label for="password">Password:</label> <input class="shuru" id="upass" type="password" name="dlpassword" placeholder="请输入密码" > </div> <input type="checkbox" name="vehicle" value="true" ><span>记住密码</span> <a class="right" href="">登录遇到问题?</a> <div id="error_box"></div> <button type="submit" value="login" id="login" onclick="return fnLogin()">登录</button> </form> <div id="message"></div> </div> {% endblock %}
zhuce.html
{% extends 'index.html' %} {% block body %} <link rel="stylesheet" type="text/css" href="../static/css/style.css"> <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'> <div class="lg-container"> <h1>注册</h1> <form action="{{ url_for('register') }}" method="post" id="lg-form" name="lg-form" > <div> <label for="username">Username:</label> <input class="shuru" type="text" name="username" autocomplete="off" placeholder="请输入登录用户名"> </div> <div> <label for="nickname">nickname:</label> <input class="shuru" type="text" name="nickname" autocomplete="off" placeholder="请输入昵称"> </div> {# <div>#} {# <label for="phonenumber">phonenumber:</label>#} {# <input type="text" name="phonenumber" autocomplete="off" placeholder="手机号码" >#} {# </div>#} <div> <label for="password">Password:</label> <input class="shuru" type="password" id="upass" name="password" autocomplete="off" placeholder="设置密码" > </div> <div> <label for="password">Password1:</label> <input class="shuru" type="password" id="upass1" name="password" autocomplete="off" placeholder="确认密码" > </div> <div id="error_box"></div> <button type="submit" id="regist" onclick="return fnzhuce()">注册</button> </form> </div> {% endblock %}
detail.html
<!DOCTYPE html> <html lang="en"> <head> {% extends 'index.html' %} <meta charset="UTF-8"> <title> {% block title %} 详情 {% endblock %} </title> {% block head %} <link rel="stylesheet" href="../static/css/detail.css"> {% endblock %} </head> <body> {% block body %} <div class="all have-img"> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h3> 标题:{{ sen.title }} <br> <small>作者:{{ sen.author.username }}</small> <small class="badge">时间:{{ sen.creat_time }}</small> </h3> </div> </div> </div> <div class="row clearfix"> <div class="col-md-12 column"> <p> {{ sen.detail }} </p> </div> </div> </div> <div> <form role="form" action="{{ url_for('comment') }}" method="post"> <textarea placeholder="写出你的评论" class="form-control" rows="10" id="comment" name="comment"> </textarea> <input type="hidden" name="sent_id" id="sent_id" value="{{ sen.id }}"> <div class="button"> <button type="submit">发布</button> </div> </form> </div> <div> <h4>评论：({{ sen.comments|length }})</h4> {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px"> <a href="{{ url_for('usercenter',user_id=foo.author.id,tag='wenda') }}">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> </div> {% endblock %} </body> </html>
geren.html
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title> {% block title %} 个人中心 {% endblock %} </title> {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}"> {% endblock %} {#<link rel="stylesheet" href="../static/css/geren.css">#} </head> <body> {% block user %} <div class="all have-img"> <div> <h4>用户名：{{ username }} <br> <small>全部问答</small> </h4> {% for foo in sent %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px"> <a href="">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> <hr> <div> {# <h4>用户名：{{ sent_username }}#} {# <br>#} <small>全部评论</small> {# </h4>#} {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px"> <a href="#">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> <hr> <div> <h4>{{ user }} <br> <small>用户资料</small> </h4> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px">用户：{{ username }}</li> <li class="list-group-item" style="width: 900px">编号：</li> <li class="list-group-item" style="width: 900px">昵称：</li> </ul> </div> </div> {% endblock %} </body> </html>
GRZX.html
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title>{% block title %} 个人中心 {% endblock %}</title> {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}"> {% endblock %} </head> <body> {% block user %} <div class="all have-img"> <h4>{{ username }} <small> 个人资料</small></h4> <hr> <a href="#" class="list-group-item " style="background-color: pink">用户：{{ username }}</a> <a href="#" class="list-group-item" style="background-color: pink">编号：{{ id }}</a> <a href="#" class="list-group-item" style="background-color: pink">昵称：lwn1224 </a> {# <ul style="padding-left: 0px;margin-bottom: 0px;">#} {# <li class="list-group-item" style="width: 900px">用户：{{ username }}</li>#} {# <li class="list-group-item" style="width: 900px">编号：{{ id }}</li>#} {# <li class="list-group-item" style="width: 900px">昵称：{{ nickname }}</li>#} {# </ul>#} </div> {% endblock %} </body> </html>
pinlun.html
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title>{% block title %} 评论 {% endblock %}</title> {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}"> {% endblock %} </head> <body> {% block user %} <div class="all have-img"> <h4>{{ username }} <small> 全部评论</small></h4> <hr> {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px"> <a href="#">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> {% endblock %} </body> </html>
sent.html
{% extends 'index.html' %} <meta charset="UTF-8"> <title>发布</title> <link rel="stylesheet" type="text/css" href="../static/css/release.css"> {% block body %} <div class="container" style="background-image: url(/static/image/back.jpg);width: 500px" > <div class="row clearfix"> <div class="col-md-4 column"> </div> <div class="col-md-4 column"> </div> <div class="lg-container"> <h1 align="center" style="color: salmon">发布帖子</h1> <form action="{{ url_for('sent') }}" method="post"><br/> <div class="q"> <label for="titleDetail">标题</label><br> {# <input type="text" placeholder="标题" class="form-control" id="titleDetail" name="titleDetail">#} <textarea id="titleDetail" name="titleDetail" class="form-control" cols="80" rows="1"></textarea> </div> <div class="form-group"> <label for="questionDetail">内容</label><br> {# <textarea class="form-control" id="questionDetail" name="questionDetail" cols="60" rows="5" ></textarea>#} <textarea placeholder="详情" class="form-control" rows="5" id="questionDetail" name="questionDetail" style="width: 500px"></textarea> </div> <br> <button type="submit" onclick="{{ url_for('sent') }}" >发布</button> </form> </div> <div class="col-md-4 column"> </div> </div> </div> {% endblock %}
user.html
<!DOCTYPE html> <html lang="en"> <head> {% extends 'index.html' %} <meta charset="UTF-8"> <title>{% block title %} 个人 {% endblock %}</title> {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}"> {% endblock %} </head> <body> {% block body %} <div class="all"> <ul class="nav nav-tabs"> <li class="active"><a href="{{ url_for('usercenter' ,user_id=user.id,tag='wenda') }}">全部问答</a></li> <li><a href="{{url_for('usercenter' ,user_id=user.id,tag='pinlun') }}">全部评论</a></li> <li><a href="{{ url_for('usercenter' ,user_id=user.id,tag='geren') }}">个人信息</a></li> </ul> </div> {% block user %}{% endblock %} {% endblock %} </body> </html>
wenda.html
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title>{% block title %} 问答 {% endblock %}</title> {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}"> {% endblock %} </head> <body> {% block user %} <div class="all have-img"> <h4>{{ username }} <small> 全部问答</small></h4> <hr> {% for foo in sent %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px"> <a href="">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> {% endblock %} </body> </html>
