课程设计文档模板.docx

JavaScript程序设计课程设计报告

课题名称

课题名称

小组成员

婚纱工作室网站

学号

144104138

144104144

144104119

144104147

144104126

姓名

欧鹏程何谊清张景胜陈玉莲

黄炳贵

班

级

指导教师

14计算机网络技术1班

罗乐霞

成

绩

信息工程系

二〇一六年一月

一、任务要求与总体设计

网站说明

文字详细说明网站的功能，并画出网站结构图。如下图示：

图1.1.1网站结构图

说明：本网站分为前台管理和后台管理两大块。为了兼容大多数浏览器以及手机页面，本网站是利用Amazeui，中国首个开源HTML5跨屏前端框架。在前台管理中分为首页、作品展示页、预约服务页、留言板页。在首页中，主要显示婚纱工作室的一些信息和介绍；在作品展示页面中，由于要不同大小图片带来的影响以及用户需要的预览图片，引入相应的插件并调用；在预约服务页面中，验证逻辑基本上是HTML5来写的，部分是利用框架，当用户选定相应的服务时，可以将其他不相干的服务选项进行隐藏，当用户选定在线客服时是可以唤醒QQ软件，进行QQ在线客服聊天；在留言板页面中，用户可以添加留言，当用户发表留言时，需要输入验证码并验证，生成验证码是用原生的JavaScript写的。在后台管理中分为首页，作品展示管理页面，预约管理页面，留言管理页面。当管理点击首页时是可以跳转到前台管理页面，点击注销时可以把本页面关闭的；在作品展示中，以表格列出所有的作品的基本信息，当点击编辑时是可以出现模态框将对应作品的详细信息显示，并且管理员是可以修改的，当管理员点击新增时是可以上传新的作品，并修改信息；在预约管理页面中，同

样以表格列出所有的预约的基本信息，带你点击处理按钮时是可以出现模态框将对应预约的详细信息显示，如果是手机页面，管理员点击电话号码是可以打电话与客户沟通的；当用户留下的联系方式为e-mail电子邮箱时，管理员点击邮箱地址时是可以调用outlook发送e-mail电子邮件；在留言管理中，管理员可以对用户留言进行管理，当点击删除时，是可以删除该条留言，当点击回复时，是可以回复该条留言。

课程设计目标

详细说明用JavaScript实现什么功能，也可包含对网站整体色调的设计等其它与本次设计有关的内容

应用瀑布流插件展示工作室的作品，应用图片预览插件预览作品，可支持键盘操作，说明提供的各种服务，给用户提供预约服务，在线咨询功能，利用原生JavaScript生成验证码插件，生成所需的验证码。后台管理提供对前台信息的管理（文字或图片的添加、修改、删除、搜索），以及对预约和在线咨询的应答。在线留言或预约时的验证，图片展示特效，以及图片查看时的显示，后台文字管理时使用在线编辑器录入。

二、网站建设

2.1任务分工安排

编号

工作任务

计划完成时间

负责人

1.

对网站框架进行部署、完成后台的作品展示

2016年1月14日

欧鹏程

的管理界面和留言的管理界面

2.

对网站框架进行部署、完成后台预约服务的

2016年1月14日

何谊清

管理界面

3.

完成前台首页的界面以及前台预约服务的

2016年1月14日

张景胜

表单界面

4.

网站数据的采集以及前台作品展示的界面

2016年1月14日

陈玉莲

5.

网页所需素材的收集以及留言板的界面

2016年1月14日

黄炳贵

网站文件说明

说明系统各网页文件或文件夹的功能，需要列出和课程设计任务目标有关的重要文件。说明：本网站主要的目录为：Admin文件夹（包含后台管理界面的模板文件和后台管理

界面的框架文件），Home文件夹（包含前台管理界面的模板文件和前台管理界面的框架文件），Public文件夹（包含样式表文件、自定义字体文件、图片、JavaScript文件、jQuery文件、基于jQuery开发的插件），目录树结构具体如下图所示：

图2.2.1网站目录树结构

说明：在Admin文件夹下，模板文件是存放在View文件夹下，该文件夹下又分为Admin

文件夹（存放模板文件）和Public文件夹（存放框架文件），Admin文件夹下有message.html

（留言管理页面）、product.htm（l

作品展示管理页面）、service.htm（l

预约服务管理页面），Public

文件夹下有base.html（后台管理框架页面），后台管理界面目录树结构具体如下图所示：

图2.2.2后台管理界面目录树结构

说明：在Home文件夹下，模板文件是存放在View文件夹下，该文件夹下又分为Index文件夹（存放模板文件）和Public文件夹（存放框架文件），Ind