课程设计文档模板.docx

课程设计文档模板.docx

《课程设计文档模板.docx》由会员分享，可在线阅读，更多相关《课程设计文档模板.docx（43页珍藏版）》请在冰豆网上搜索。

课程设计文档模板

JavaScript程序设计课程设计报告

课题名称婚纱工作室网站

小组成员学号姓名

144104138欧鹏程

144104144何谊清

144104119张景胜

144104147陈玉莲

144104126黄炳贵

班级14计算机网络技术1班

指导教师罗乐霞

成绩

信息工程系

二〇一六年一月

一、任务要求与总体设计

1.1网站说明

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

如下图示：

图1.1.1网站结构图

说明：

本网站分为前台管理和后台管理两大块。

为了兼容大多数浏览器以及手机页面，本网站是利用Amazeui，中国首个开源HTML5跨屏前端框架。

在前台管理中分为首页、作品展示页、预约服务页、留言板页。

在首页中，主要显示婚纱工作室的一些信息和介绍；在作品展示页面中，由于要不同大小图片带来的影响以及用户需要的预览图片，引入相应的插件并调用；在预约服务页面中，验证逻辑基本上是HTML5来写的，部分是利用框架，当用户选定相应的服务时，可以将其他不相干的服务选项进行隐藏，当用户选定在线客服时是可以唤醒QQ软件，进行QQ在线客服聊天；在留言板页面中，用户可以添加留言，当用户发表留言时，需要输入验证码并验证，生成验证码是用原生的JavaScript写的。

在后台管理中分为首页，作品展示管理页面，预约管理页面，留言管理页面。

当管理点击首页时是可以跳转到前台管理页面，点击注销时可以把本页面关闭的；在作品展示中，以表格列出所有的作品的基本信息，当点击编辑时是可以出现模态框将对应作品的详细信息显示，并且管理员是可以修改的，当管理员点击新增时是可以上传新的作品，并修改信息；在预约管理页面中，同样以表格列出所有的预约的基本信息，带你点击处理按钮时是可以出现模态框将对应预约的详细信息显示，如果是手机页面，管理员点击电话号码是可以打电话与客户沟通的；当用户留下的联系方式为e-mail电子邮箱时，管理员点击邮箱地址时是可以调用outlook发送e-mail电子邮件；在留言管理中，管理员可以对用户留言进行管理，当点击删除时，是可以删除该条留言，当点击回复时，是可以回复该条留言。

1.2课程设计目标

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

应用瀑布流插件展示工作室的作品，应用图片预览插件预览作品，可支持键盘操作，说明提供的各种服务，给用户提供预约服务，在线咨询功能，利用原生JavaScript生成验证码插件，生成所需的验证码。

后台管理提供对前台信息的管理（文字或图片的添加、修改、删除、搜索），以及对预约和在线咨询的应答。

在线留言或预约时的验证，图片展示特效，以及图片查看时的显示，后台文字管理时使用在线编辑器录入。

二、网站建设

2.1任务分工安排

编号

工作任务

计划完成时间

负责人

1.

对网站框架进行部署、完成后台的作品展示的管理界面和留言的管理界面

2016年1月14日

欧鹏程

2.

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

2016年1月14日

何谊清

3.

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

2016年1月14日

张景胜

4.

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

2016年1月14日

陈玉莲

5.

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

2016年1月14日

黄炳贵

2.2网站文件说明

说明系统各网页文件或文件夹的功能，需要列出和课程设计任务目标有关的重要文件。

说明：

本网站主要的目录为：

Admin文件夹（包含后台管理界面的模板文件和后台管理界面的框架文件），Home文件夹（包含前台管理界面的模板文件和前台管理界面的框架文件），

Public文件夹（包含样式表文件、自定义字体文件、图片、JavaScript文件、jQuery文件、基于jQuery开发的插件），目录树结构具体如下图所示：

图2.2.1网站目录树结构

说明：

在Admin文件夹下，模板文件是存放在View文件夹下，该文件夹下又分为Admin文件夹（存放模板文件）和Public文件夹（存放框架文件），Admin文件夹下有message.html（留言管理页面）、product.html（作品展示管理页面）、service.html（预约服务管理页面），Public文件夹下有base.html（后台管理框架页面），后台管理界面目录树结构具体如下图所示：

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

说明：

在Home文件夹下，模板文件是存放在View文件夹下，该文件夹下又分为Index文件夹（存放模板文件）和Public文件夹（存放框架文件），Index文件夹下有index.html（工作室介绍信息页面）、message.html（留言页面）、product.html（作品展示页面）、service.html（预约服务页面），Public文件夹下有base.html（后台管理框架页面），前台管理界面目录树结构具体如下图所示：

图2.2.3前台管理界面

说明：

在Public文件夹下，有css文件夹（存放样式表文件），fonts文件夹（自定义字体文件）、images文件夹（存放图片文件）、js文件夹（JavaScript文件、jQuery文件、基于jQuery开发的插件）。

在css文件夹下有admin.min.css（前端框架样式表，amazeui框架源码文件）、amazeui.min.css（前台管理界面样式表，amazeui框架源码文件）、wd.css（自定义样式表文件）；在js文件夹下有amazeui.ie8polyfill.min.js（兼容IE8以下的浏览器脚本，amazeui框架源码文件）、amazeui.min.js（前端框架脚本，amazeui框架源码文件）、jquery.min.js（JavaScript库）、kinercode.js（原生JavaScript生成验证码图片插件）、wd.js（自定义函数、插件、调用插件的脚本）、wookmark.min.js（基于jQuery开发的瀑布流插件）、zoom.min.js（基于jQuery开发的图片预览插件）、zzsc.js（利用最新的HTML5技术开发的跳动的时间插件）。

图2.2.4资源目录结构

2.3网站主要界面的实现

列出与课程设计任务目标有关页面的实现，每个页面的说明应包含以下内容：

文字说明该页是什么功能，附页面的截图，对关键JavaScript代码的说明（可另外附加程序流程图说明）。

以下为示例，可自行添加相应内容：

1、作品展示页面

当用户预览作品展示页面时，由于不同的分辨率或者不同大小的图片会带来影响，所以本页面引入了瀑布流插件，当用户点击某一张图片时是可以进行上一张、下一张的预览。

附图如下：

图2.3.1.1大分辨率预览

图2.3.1.2中分辨率预览

图2.3.1.3小分辨率预览

图2.3.1.4图片预览

页面的主要HTML代码如下：

……（省略）