一体化3团队项目-pilipili

 

1.1 github项目地址:https://github.com/yitihua/pilipili


2.1 小组成员:

    gitID 应用技术
    dandelionClaw 全部后端开发(包括ssh、文件上传及shiro框架配置应用)
    BUZA2018 HTML5,Vue,JS,CSS
    chengling2016012050 HTML5,JQuery,CSS

 


3.1 项目介绍

3.1.1 项目简介

pilipili资讯网集合了最新最热门的电视剧、电影、番剧及游戏资讯。管理员上传新闻,游客进行预览,注册后可进入个人界面和进行评论。 管理员可以进行对用户、所有文章、数据字典、资讯栏目的管理。

测试用管理员用户密码:

用户名:admin
密码:admin

 


3.2 功能模块

3.2.1 前台页面实现

需要注意的是:为了代码编写方便,部分js文件中封装了JQuery中的$方法 前台页面中对代码直接的操作与维护最好不要链入JQuery文件,以免冲突报错

3.2.1.1 游客默认首页

网站默认页面如下:

点击导航栏中的资讯类别可以进入不同分区

3.2.1.2 文章预览页面

3.2.1.3 评论区

结构亮点:该多级评论功能即为树形结构的设计、开发、展示,后端实现具有良好扩展性,可轻松扩展为n级评论。

点击“回复”按钮展开二级评论框

回复框获得焦点展开,当其他一级评论的“回复”按钮被点击时,将收回

3.2.1.4 登录注册框

点击回复和登录按钮弹出登录/注册框

信息合规范时提示通过

3.2.1.5 搜索功能

搜索成功与失败时的新闻列表

3.2.1.6 普通用户界面

头导航栏中,登录按钮变为用户头像

普通用户的下拉框样式

3.2.1.7 用户个人信息界面

用户可进行头像等个人信息的更改 点击修改按钮可展开和收起修改面板,完成对信息的修改

头像的修改有两种方式:

  • 可点击加号链入本地图片
  • 直接将图片拖入提交框内

随后提交框对提交的图片进行预览

以下是修改后的个人界面

3.2.1.8 用户个人评论管理界面

评论为一级评论时,显示评论的文章名

评论为二级评论时,显示评论的评论作者

3.2.1.9 管理员界面

管理员登录后,默认页面显示后台管理入口

管理员的头像下拉框多出“写文章”的入口

管理员个人界面多出“文章管理选项”

3.2.1.10 文章管理页面

3.2.1.11 写文章

点击页面中的“新增”键或头像下拉框中的“写文章”均可跳转至文章增加页面

文章头图的上传与头像上传相同,可拖入也可从目录选择 文章可以没有头图 添加的头图宽高比最好接近1.68:1

添加好的带头图的文章效果如下

3.2.1.13 需要管理员手动维护的部分

01 轮播图

在main/webapp/static/js文件夹下打开js文件carousel.js文件

在photoes对象中,可以进行对轮播图的增删改查。 photoes对象中,每个对象对应一张轮播图,对象中第一个键值对记录了轮播图的图片地址,第二个键值对记录了图片简介

如新增轮播图,只需要在已有键值对后按序添加新键值对,便可新生成一个轮播图和其按钮

02 精选资讯

在main/webapp/static/js文件夹下打开js文件hotnews.js文件

精选资讯栏提供了五条资讯展示空间,它们的内容由hotnews对象控制

0键:0键决定了是否为资讯标题前加一个小火苗,如有需要,只需将0键的值设为真 1键:1键是该条资讯的标题 2键:2键是该条资讯的链接 如有需要,只需对相应键值对进行修改


 

3.2.2 后台管理页面

3.2.2.1 数据字典

点击添加后会跳出相应弹框,效果图如下:

使用弹窗,可以更快的回到之前的页面,速度上比跳转响应要快,使后台管理界面看起来更加简单明了 弹窗界面与原界面相对独立,可以完全不影响页面的布局

 

点击编辑

弹框界面与添加大致相同

此时弹窗界面动态获取当前操作元素,自动读取相应数据并显示

点击删除

 

3.2.2.2 栏目管理

栏目管理所实现功能与数据字典大致相同

将栏目单独管理,可以方便产品的运营和维护

3.2.2.3 用户权限管理

在后台的用户权限管理,我们去除了新增权限和权限删除的功能

新增权限即新增用户,随着用户在前台的注册自动生成相关数据 管理员无法随意删除用户账号,用户账号长期保存于数据库中

3.2.2.4 新闻管理

在新闻管理时,点击编辑、删除将跳转至新的页面

此时,所处理的任务不在当前的业务流中,故摒弃了之前使用的弹窗方式

3.2.2.5 文章添加

文章的添加及删除操作,所处理的任务不在当前的业务流中,故摒弃了之前使用的弹窗方式,改为链接跳转

文章编辑与文章添加使用相同的jsp文件,保持样式完全一致,以免用户产生差异感

3.2.2.6 返回前台

点击“返回主页”和“logout”均可返回前台界面,logout将直接登录

posted @ 2019-07-30 08:32  Olina_Chenry  阅读(658)  评论(0编辑  收藏  举报