姓名 | 学号 | gitID | 应用技术 |
顾思宇 | 2016011993 | dandelionClaw | 全部后端开发(包括ssh、文件上传及shiro框架配置应用) |
张慧 | 2016012019 | BUZA2018 | HTML5,Vue,JS,CSS |
程羚 | 2016012050 | chengling2016012050 | HTML,JQuery,CSS |
pilipili资讯网集合了最新最热门的电视剧、电影、番剧及游戏资讯。管理员上传新闻,游客进行预览,注册后可进入个人界面和进行评论。 管理员可以进行对用户、所有文章、数据字典、资讯栏目的管理。
用户名:admin
密码:admin
需要注意的是:为了代码编写方便,部分js文件中封装了JQuery中的$方法 前台页面中对代码直接的操作与维护最好不要链入JQuery文件,以免冲突报错
点击导航栏中的资讯类别可以进入不同分区
评论区
结构亮点:该多级评论功能即为树形结构的设计、开发、展示,后端实现具有良好扩展性,可轻松扩展为n级评论。
点击“回复”按钮展开二级评论框
回复框获得焦点展开,当其他一级评论的“回复”按钮被点击时,将收回
点击回复和登录按钮弹出登录/注册框
由用户名密码不合规范导致的注册失败
信息合规范时提示通过
搜索成功与失败时的新闻列表
新用户头像为默认头像
普通用户的下拉框样式
用户可进行头像等个人信息的更改 点击修改按钮可展开和收起修改面板,完成对信息的修改
头像的修改有两种方式:
- 可点击加号链入本地图片
- 直接将图片拖入提交框内
随后提交框对提交的图片进行预览
以下是修改后的个人界面
评论为一级评论时,显示评论的文章名
评论为二级评论时,显示评论的评论作者
点击页面中的“新增”键或头像下拉框中的“写文章”均可跳转至文章增加页面
文章头图的上传与头像上传相同,可拖入也可从目录选择 文章可以没有头图 添加的头图宽高比最好接近1.68:1
添加好的带头图的文章效果如下
在main/webapp/static/js文件夹下打开js文件carousel.js文件
在photoes对象中,可以进行对轮播图的增删改查。 photoes对象中,每个对象对应一张轮播图,对象中第一个键值对记录了轮播图的图片地址,第二个键值对记录了图片简介
如新增轮播图,只需要在已有键值对后按序添加新键值对,便可新生成一个轮播图和其按钮
在main/webapp/static/js文件夹下打开js文件hotnews.js文件
精选资讯栏提供了五条资讯展示空间,它们的内容由hotnews对象控制
0键:0键决定了是否为资讯标题前加一个小火苗,如有需要,只需将0键的值设为真 1键:1键是该条资讯的标题 2键:2键是该条资讯的链接 如有需要,只需对相应键值对进行修改
点击添加后会跳出相应弹框,效果图如下:
使用弹窗,可以更快的回到之前的页面,速度上比跳转响应要快,使后台管理界面看起来更加简单明了 弹窗界面与原界面相对独立,可以完全不影响页面的布局
点击编辑
弹框界面与添加大致相同
此时弹窗界面动态获取当前操作元素,自动读取相应数据并显示
点击删除
栏目管理所实现功能与数据字典大致相同
将栏目单独管理,可以方便产品的运营和维护
在后台的用户权限管理,我们去除了新增权限和权限删除的功能
新增权限即新增用户,随着用户在前台的注册自动生成相关数据 管理员无法随意删除用户账号,用户账号长期保存于数据库中
在新闻管理时,点击编辑、删除将跳转至新的页面
此时,所处理的任务不在当前的业务流中,故摒弃了之前使用的弹窗方式
文章的添加及删除操作,所处理的任务不在当前的业务流中,故摒弃了之前使用的弹窗方式,改为链接跳转
文章编辑与文章添加使用了相同的jsp文件,保持样式完全一致,以免用户产生差异感
点击“返回主页”和“logout”均可返回前台界面,logout将直接登录