第一组：婚纱工作室教程.doc

PAGE  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生成验证码插件，生成所需的验证码。后台管理提供对前台信息的管理（文字或图片的添加、修改、删除、搜索），以及对预约和在线咨询的应答。在线留言或预约时的验证，图片展示特效，以及图片查看时的显示，后台文字管理时使用在线编辑器录入。 二、网站建设 2.1 任务分工安排 编号工作任务计划完成时间负责人对网站框架进行部署、完成后台的作品展示的管理界面和留言的管理界面2016年1月14日欧鹏程对网站框架进行部署、完成后台预约服务的管理界面2016年1月14日何谊清完成前台首页的界面以及前台预约服务的表单界面2016年1月14日张景胜网站数据的采集以及前台作品展示的界面2016年1月14日陈玉莲网页所需素材的收集以及留言板的界面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文件夹下，模板文件是存放在