"第四届"网页设计大赛

大纲:

小组介绍

  • 作品名称
  • 小组名称
  • 小组成员
  • 指导教师

作品介绍

  • 前端:各个板块以及设计思路、实现方式。
  • 后端:各个功能、模块的介绍、设计思路。

采用技术

  • 前端采用的各个库
  • 后端采用的各个库

该程序如何运行

程序下载


小组介绍:

  • 作品名称:石家庄财经职业学院-新校区
  • 小组名称:True不会写网页组
  • 小组成员:甄雨锋、郑泽田、贾龙涛
  • 指导教师:刘天宇

作品介绍:

前后端都实现了响应式布局。

0x01 前端:

欢迎页

  • 设计思路:

    • JS:生成400个div,将它添加到父盒子中,并且它们都有一个相同的类名,并且为每个盒子设置一个随机的动画完成周期,以及延迟多少秒后进行动画。

    • css:为js生成带标签的盒子,设置动画,在2000px外的距离,归属到它自身的位置(0px)。

    • js:在14秒之后,差不多动画特效完成了,为父盒子添加一个类名。

    • css:执行父盒子指定的特效,从0px在归属到2000px外的位置(弹出特效)。


网站首页

  • 设计思路:

    • 使用art-template模板引擎,先设计一个模板,那么这里的公共模板为顶部导航栏以及页脚。

    • 在首页中,继承父类模板,在父类的body中,添加了轮播图等内容。

    • 学院新闻:后端读取到数据库内容后,渲染给客户端,并且在底部添加了分页功能,每页只展示3个文章。


校园风光

  • 设计思路:
    • 这里使用了fullpage这个js库,一共有5个大页,每个大页后有两个子页,每一页展示的是同一个校园角落。

校园风光

  • 设计思路:
    • 这里使用了svg,基于图片之上,通过坐标轴点缀的圆形,点击该按钮,即可弹出该位置的名称以及图片。

留言板

  • 设计思路:
    • 这里的留言内容数据库中的留言内容,在发表时,采用了axios向后端发起请求,在后端接收到请求后,会将该评论添加到数据库中,如果添加成功,服务端则返回一个成功码,然后通过jQuery将表单中的val值,添加到评论展示中,如果后端添加失败,则提示添加失败。

404页

  • 设计思路:
    • 如果所有的路由都不匹配,则将404页返回客户端,并且在5秒后返回首页。

0x02 后端:

登录页

  • 设计思路:
    • 这里的背景有白天和夜晚两张图片,进行轮流轮播,在登录时,如果账号正确,那么则添加session信息,并且进入后台,如果不正确,则提示账号密码错误。

登录拦截

  • 如果在没有登录的情况下,直接访问后台的管理页面,是不允许的,它会重定向到登录页,如果在已经登录的情况下(客户端有cookie信息),那么在访问后台,是免登陆的。

文章管理

  • 设计思路:

    • 该页面可以进行增删改操作,点击编辑,会基于现在文章内容之上,进行修改。

    • 并且可以自定义封面,如果不选择封面,那么会使用默认的封面,编辑器采用的是富文本编辑器,比较简介,而且功能全。

    • 发布文章页面,和该页面类似,只不过是发布文章。


评论管理

  • 设计思路:
    • 该页面可以删除已经发布的评论。

前端设置

  • 设计思路:

    • 该页面可以更改欢迎页的封面图。

    • 实现思路:直接将上传的文件,更改名称,并移动到目标文件夹,替换掉原有的文件。


采用技术:

该网站为动态网站,可通过后端操作,设置前端内容,接下来详情介绍。

0x01 前端:

运用技术:

css js
Bootstrap Bootstrap
Animate jQuery
wow
art-template
axios
fullpage

0x02 后端:

后端语言为:node,用的是Express框架。

运用技术:

第三方库 第三方库
Express express-session
mongoose formidable
mongoose-sex-page moment
axios art-template

0x03 数据库:

数据库为:MongoDB,使用的是Mongoose封装后的。


如何运行该网站?

  • 1.安装Node.js环境

  • 2.安装MongoDB数据库,并且将其配置完成后使用mongod命令打开数据库。

  • 3.第一次运行将以下代码取消注释

  • 4.将终端定位到项目首级,输入node app命令,终端显示添加成功的信息后,按两次Ctrl+C将程序停止运行。

  • 5.然后将刚刚取消的注释在注释掉。

  • 6.直接使用node app命令运行程序即可。


源码下载:

http://yq2048.cn/web/21web/web.zip

发表评论 / Comment

用心评论~