一、系统概要说明

  1. 父模板统一布局:

(1) 头部导航条

(2) 中间主显示区域布局

(3) 底部导航条

  1. 注册、登录、注销功能
  2. 发布、列表显示
  3. 详情页
  4. 评论、列表显示
  5. 个人中心
  6. 搜索、条件组合搜索
  7. 文章分类与显示
  8. 点赞、收藏
  9. 修改密码、头像、上传头像
  10. 推荐文章

二、网站结构设计

  1. 顶部导航条:

(4) 未登录时:首页、发布、搜索、登录、注册功能(Ps:此时点击发布,自动跳转到登录页面)

(5) 登录后:发布、设置、个人信息、注销功能

  1. 中间主显示区域布局:

(1) 用户的发布、点赞、评论总览

(2) 发布详情

(3) 文章分类与显示

  1. 底部导航条

三、模块详细设计

  1. 发布模块
  2. 个人中心模块

(1) 个人信息

 

{% extends 'yonghufather.html' %}

{% block yonghubody %}
    <h3 class="text-center">个人信息</h3>
    <ul class="list-unstyled nav1">
        <li style="background-color: #ffdedf">用户:{{ username }}</li>
        <li style="background-color: #8bb3ff">编号:{{ userid }}</li>
        <li style="background-color: #feffac">昵称:{{ nickname }}</li>
        <li style="background-color: #b0ffbe">头像:
            {% if  img is none%}
                <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3298685419,1477967578&fm=27&gp=0.jpg"
                 style="width: 100px">
            {% else %}
                <img src="/static/{{ img }}"
                 style="width: 100px">
            {% endif %}


            <form action="{{ url_for('uploadLogo',user_id=userid) }}"method="post" enctype="multipart/form-data">
                <input type="file" name="logo" required>
                <button type="submit">上传头像</button>
            </form>
        </li>

        <li style="background-color: #ffb664">文章:{{ fabus|length }}篇</li>
        <li style="background-color: #ffacde">评论:{{ comments|length }}条</li>
        <li style="background-color: #b89dff">收藏文章:{{ shoucang|length }}篇</li>
    </ul>

{% endblock %}

 

 

 

(2) 发布信息

 

 1 {% extends 'yonghufather.html' %}
 2 
 3 {% block yonghubody %}
 4 
 5     <div>
 6         <h3 class="text-center">全部发布信息({{ fabus|length }})</h3>
 7         <ul class="list-unstyled">
 8             {% for foo in fabus %}
 9                 <li class="list-group-item">
10                     <a href="{{ url_for('yonghu',username_id=foo.author_id,tag=1) }}"><span
11                             class="glyphicon glyphicon-bell"></span>{{ foo.author.username }}</a>
12                     <span class="badge">{{ foo.creat_time }}</span>
13                     <span class="badge pull-right">{{ foo.leixing }}</span>
14                     <h4 class="text-center"><a href="{{ url_for('fabuview',fabu_id=foo.id) }}">{{ foo.title }}</a>
15                     </h4>
16 
17                     <br>
18                     <p>{{ foo.detail }}</p>
19                 </li>
20             {% endfor %}
21         </ul>
22         <br>
23         <br>
24         <br>
25     </div>
26 
27 {% endblock %}

 

 

(3) 评论信息

 

 1 {% extends 'yonghufather.html' %}
 2 
 3 {% block yonghubody %}
 4 
 5     <div>
 6         <h3 class="text-center">全部评论信息({{ comments|length }})</h3>
 7         <ul class="list-unstyled">
 8             {% for foo in comments %}
 9                 <li class="list-group-item">
10                     <a href="{{ url_for('yonghu',username_id=foo.author_id,tag=1) }}"><span
11                             class="glyphicon glyphicon-bell"></span>{{ foo.author.username }}</a>
12                     <span class="badge pull-right">{{ foo.creat_time }}</span>
13                     <p>{{ foo.detail }}</p>
14                     <br>
15                 </li>
16             {% endfor %}
17         </ul>
18         <br>
19         <br>
20         <br>
21     </div>
22 
23 {% endblock %}

 

 

(4) 收藏文章

 

 1 {% extends 'yonghufather.html' %}
 2 
 3 {% block yonghubody %}
 4 
 5     <div>
 6         <h3>收藏文章({{ shoucang|length }})</h3>
 7         <hr>
 8         <table class="table table-bordered">
 9             <thead>
10             <tr>
11                 <th>文章</th>
12                 <th>作者</th>
13             </tr>
14             </thead>
15             <tbody>
16             {% for foo in shoucang %}
17                 <tr>
18                     <td><a href="{{ url_for('fabuview',fabu_id=foo.fabu.id) }}">{{ foo.fabu.title }}</a>&nbsp&nbsp&nbsp<em>浏览:{{ foo.fabu.yuedu }}&nbsp&nbsp&nbsp评论:{{ foo.fabu.comments |length }}&nbsp&nbsp&nbsp点赞:{{ foo.fabu.dianzangs |length }}</em></td>
19                     <td><a href="{{ url_for('yonghu',username_id=foo.author.id,tag=1) }}">{{ foo.author.username }}</a></td>
20                 </tr>
21             {% endfor %}
22             </tbody>
23         </table>
24         <br>
25         <br>
26         <br>
27     </div>
28 
29 {% endblock %}

 

 

 

四、数据库设计

  1. 用户表:

储存用户的账号与密码,密码在数据库中隐藏,只有管理员身份才能查看。注册成功时,账号与密码就会被录入数据库中;登录要依据数据库中的用户表。

  2.发布内容表

表中的信息包括标题、详情和文章类型。

  3.点赞表

录入的是用户的点赞情况,主要是统计点赞数量。

  4.评论表

录入的是用户的评论情况。

  5.收藏表

录入的是用户的收藏情况,主要是统计收藏数量

五、系统实现的关键算法与数据结构

  1. 高级搜索

可通过某些关键词对发布的内容进行搜索,包含这些关键词的内容都被筛选出来,不包含的内容不显示在首页。

  1. 包含限制条件的登录、注册功能

限制条件主要是用在对用户名、密码的限制,包括用户名的组成元素,密码的组成元素。

六、成品展示

  1. 首页布局

  1. 注册页面

  1. 登录页面

  1. 发布页面

  1. 个人信息页面

  1. 发布信息页面

  1. 评论信息页面

  1. 收藏文章页面

posted on 2018-06-15 23:06  016李云基  阅读(4704)  评论(0编辑  收藏  举报