期末作品检查

“米可美妆城”系统介绍

1）         这学期总结：打开了页面设计的大门，学习到很多知识。

 

2）         网站结构设计

①  总体分为两个部分，第一个部分是前段的HTML （CSS、JS、IMAGES），第二个部分是后台的数据库操作。

②  页面总体功能按键：首页+登录+注册+发布问答+图片区+搜素框

3）         模块详细设计

①      首页：运用了一个整体的背景色，导航条处于常规的横向导航，左边还有个下拉菜单按钮，中间是一个美妆系统的主欢迎界面，点击“更多”可以进入详细的系统介绍页面。

②      登录：登录界面运用的是两块主div操作，左边为图案，右边为登录的用户名及密码框，如果还没有账号，即可点击下方的链接返回到注册页面注册。

③      注册：注册满足有用户名和两次密码一致即可，注册的账号信息将会存储到数据库。

④      图片区：图片区可供预览图片，基本操作包括鼠标经过，会有颜色的变化提示，以及点击图片会进入到系统所给的图片链接，联网跳转到链接后，可查看更多主题图片的信息。

⑤      发布问答：该模块为系统的主模块，是用户自由交流的中心，所有的问答，评论，用户名，用户个人信息可以在此页面进行跳转；个人信息页面包括昵称、用户、编号、头像上传等等。

⑥      搜索框：根据关键字，可以搜集相应的板块信息。

4）         数据库设计

  （一）登录注册以及评论等操作

在py界面、代码展示如下：

运用Navicat for MySQL数据库去存储数据，从而在前端读取出来，

Id、title、detail、time等等

最后db create all 即可实现数据库表的建立

5）      系统实现的关键算法与数据结构

l  从导入的数据库、包中，有session传值

l  开始flask页面

1.1.Flask项目主程序由几部分构成。

1.2使用装饰器，设置路径与函数之间的关系。

1.3使用Flask中render_template，用不同的路径，返回首页、登录员、注册页。

1.4.用视图函数反转得到URL，{{url_for(‘login’)}}，完成导航条里的链接。

③详情问答中运用到的Question.query.all()

1. 前端页面循环显示整个列表。
2. 问答排序

1. @app.route('/')
2. def index():
3.     contex={
4.         'questions':Question.query.order_by('-creat_time').all()
5.     }
6.     return render_template('index.html',**contex)

 

④评论中运用的

l  定义评论的视图函数

l  @app.route('/comment/',methods=['POST'])

l  def comment()：

l  读取前端页面数据，保存到数据库中

l  用<input type="hidden" 方法获取前端的"question_id" 

l  显示评论次数

l  要求评论前登录

l  尝试实现详情页面下的评论列表显示

6）      成品展示

（一）首页：

 

#首页及导航条

 

#点我有惊喜菜单

 

下菜单 点击每一个选项之后会跳转到一个惊喜链接。HOME/ABOUT/CONTACT

（二）登陆页面及登录成功显示：

 

（三）注册页面：

 

（四）图片区的展示（包括轮播图以及四个模块的主题图片）

 

#图片区1.1

轮播图：自动播放图片；

左右可以划动，浏览图片。

                              

#图片区1.2：

 

（五）个人信息页面

①   个人信息包括：用户名、编号、昵称、头像图片等等

 

②   头像上传 ：

          

     提示图片上传成功！

（六）详细问答页面：

# 图片1.1发送评论页面

 

# 图片1.2点赞页面的显示 ，对这个内容的点赞

 

# 图片1.3 点赞数的汇总以及评论量的获取

 

返回到首页的基本信息

 

# 图片1.4的展示

（七）数据库的评论数据部分展示：