web课程设计.docx
《web课程设计.docx》由会员分享，可在线阅读，更多相关《web课程设计.docx（42页珍藏版）》请在冰豆网上搜索。
web课程设计
课程设计（论文）
课程名称：
Web工程技术及应用
题目：
“HomeDesigner”网站设计
院（系）：
管理学院
专业班级：
信管1001
姓名：
常新华
学号：
100440102
指导教师：
张志霞
2013年7月12日
西安建筑科技大学课程设计（论文）任务书
专业班级：
信管1001学生姓名：
常新华指导教师（签名）：
一、课程设计（论文）题目
“HomeDesigner”网站设计与开发
二、本次课程设计（论文）应达到的目的
本课程为《Web工程技术及应用》课程的主要教学环节之一。
通过本课程设计，使学生初步掌握借助网络解决管理工作的实际问题的步骤和方法，以分析问题为出发点，抽象出具体的功能模块，再进行合理的组织，形成一个可以进行查询、事物处理等功能的网站。
在设计过程中，理论联系实际，巩固所学的理论知识，加深对其理解，亲自用所学知识和网站设计技术，将网络技术应用到管理科学之中。
三、本次课程设计（论文）任务的主要内容和要求（包括原始数据、技术参数、设计要求等）
课程设计的内容：
题目可自拟，具体介绍个人、公司、企业、机构、团体的具体情况，并能解决一定的实际问题。
课程设计的要求
1.设计工具：
以Frontpage、Dreamweaver等软件为基础，要使用HTML、CSS、JavaScript、JSP以及数据库管理系统。
2.设计成果：
A.软件：
建立一个网站（含约20页以上的网页）
B．设计说明书：
具体包括：
公司（或行业、团体）概况、组织机构、存在的问题；实施网站设计的背景与原因；实施进展（包括实施中存在的问题及解决方式），具体包括需求分析、设计规划和设计技巧；实施后取得的成效；经验总结及对其它企业或行业的借鉴意义；现在存在的问题、进一步完善的建议；参考文献。
3.纪律要求：
A.字数（包括图表）不得少于5000字。
B.禁止直接抄袭网站或报刊内容。
C.不允许雷同报告，发现后所有雷同以零分记。
四、应收集的资料及主要参考文献：
主要搜集与选题有关的资料
主要参考文献：
[1]樊月华.《Web技术应用基础》.北京：
清华大学出版社.
以及其他相关的网站和制作工具书
五、审核批准意见
教研室主任（签字）
设计总说明
本次web课程设计完成了一个家装设计类网站——“HomeDesigner”,网站中共有“首页”、“设计”、“我的主页”、“博客”和“联系我们”五个模块，在“设计”下又设了“整体”、“客厅”、“卧室”、“书房”、“厨房&餐厅”、“家具”等二级菜单，分别提供了各类家装图片与信息的浏览与下载功能。
在“我的主页”中提供个人头像修改，发表博客和浏览已发表及收藏的博客，在“博客”中可以浏览、评论、收藏、发表博客。
使用html、css、javascript、jquerry等完成前端页面的设计，使用jsp、ajax等技术以及struts2框架完成后台功能，使用mysql数据库完成数据存储。
页面中所有照片文字信息等均从数据库加载。
关键字：
web，网站设计，struts2，java，ajax，jquery
1绪论
1.1网站简介
这是一个家装设计类网站，主要提供家庭装修方面的资料、博客。
用户注册后，可以获得50金币，用于下载。
网站会上传家庭装修各方面的资料，如客厅、卧室、餐厅等，供用户浏览和下载，下载时必须登录并支付相应金币。
网站提供博客功能，但用户必须登录，可以发布博客、收藏博客、评论博客等。
网站名为“HomeDesigner”,网站中共有“首页”、“设计”、“我的主页”、“博客”和“联系我们”五个模块，在“设计”下又设了“整体”、“客厅”、“卧室”、“书房”、“厨房&餐厅”、“家具”等二级菜单。
1.2设计目的
这个网站的宗旨是为需要家装和爱好家装的网友们提供一个交流学习的平台。
提供优秀的家装设计供大家参考，为喜爱设计的网友提供展示的平台。
网友可以在这里找到喜爱的装修样式，可以发布自己的装修设计，可以交流自己的装修心得，可以展示自己的装修成果。
1.3设计内容
首先对国内外的设计类网站进行了浏览，找出其中优秀的地方与不足的地方，然后确定了网站主体为“家庭装修”，确定了各个模块的结构与功能，然后使用html、css、jquerry、javascript等绘制了静态页面。
之后使用struts2框架及jsp、ajax等技术完成后台程序的设计。
2需求分析
2.1.需求调查
浏览分析国内外装修设计类网站，明确自己网站的主题与宗旨、功能模块、技术路线。
调查网友装修需求，对网站的常用功能的要求。
2.2可行性研究分析
本项目要求功能模块数量始终，全部图片和文字信息均来自数据库，要求动态加载到网页，在ajax动态访问时会有问题，但项目总体难度适中，功能模块较为实用。
1.技术可行性：
开发本系统要求开发人员能够熟练运用jsp、Mysql等编程语言。
目前都已经学习完这些编程语言，因此本次系统开发在技术上是可行的。
2.时间可行性：
开发时间需要两星期，虽然时间较紧，但还是可以完成的。
3.经济可行性：
由于所开发的网站规模相对比较小，要求并不是很高，所以从人力物力财力方面都是可行的。
4.操作可行性：
本招聘网站界面简单大方，所以操作起来简单易懂，所以在操作上是可行的。
2.3网站需求描述
目前同类型设计网站主要面向专业设计人员，对一般有家装需求的用户并不适用。
本网站主要面向一般普通用户，提供普通家庭的装修方案以及交流平台。
（1）功能需求。
1）浏览网站家装设计方案，包括照片和文字等，可以在主页根据下载量推荐最热设计，推荐最新设计，根据收藏量推荐最热博文。
2）提供设计方案下载功能，但要求登录验证。
3）提供博客功能，用户可以浏览并收藏博客，发表博客，评论博客。
4）用户注册后可以修改个人头像。
5）用户可以浏览以收藏博客和以发表博客并删除。
6）管理员可以删除设计、博客、用户。
（2）性能要求。
1）下载时有登录验证，下载需要提供金币。
2）进入博客要求登录验证。
（3）其他方面特殊要求。
1）用户注册后自动登录，用户名为邮箱@符之前的字段。
2.4软硬件平台
操作系统：
Windows732bit
开发平台：
myeclipse10dreamweare
数据库：
mysql
2.5设计概要目标
确定主题，构思整个网站的结构、画出布局图；进行概要设计、网站模块划分，各个模块实现技术要求等。
3概要设计
3.1网站主题
网站名称：
“HomeDesigner”
主题：
家庭装修
宗旨：
为网友提供最新最好的家装方案，为家装爱好者提供交流的平台。
3.2用例设计
（1）用户用例
图3.2.1用户用例图
（2）管理员用例图
图3.2.2管理员用例图
3.3网站结构
1.用户模块
图3.3.1网站用户模块结构
2.管理员模块
图3.3.2网站管理员模块结构
3.4网站模块设计
1.首页推荐模块
首页分为三块，“经典推荐”、“最新推荐”、“博客推荐”。
“经典推荐”中的内容有管理员设定，“最新推荐”中的内容由系统自动根据发布日期进行推荐，“博客推荐”内容由系统根据博客发表日期排序进行推荐。
2.设计模块
该模块主要是展示各类家装设计，分为“整体”、“客厅”、“卧室”、“书房”、“厨房&餐厅”、“家具”等子模块，分别放置对应的设计方案，提供放大镜功能，单击二级菜单进入子模块，显示该类设计墙，单击其中一个进入详细页面，详细页面中提供下载功能，下载要求支付金币，单击下载进行登录验证，若未登录，转到登录界面，若已登录，扣除相应金币后获得下载链接进行下载。
3.博客模块
进入博客要求登录验证，若未登录，转向登录页面，若已登录，进入博客界面，提供博客浏览功能，博客按时间倒序排列，用户可以点击详细进入详细界面，详细页面提供收藏功能，点击“收藏”可以将该博客收藏，该页面显示用户基本信息和已发表、已收藏博客等。
提供博客评论功能。
博客分为“博主设计”、“我家”、“装修心得”、“经典”等四类，用户可以分类浏览。
4.我的主页模块
进入我的主页，显示用户已发表博客和基本信息，用户可以单击头像更改头像，可以浏览和删除已发表博客和已收藏博客。
单击发表博客可以进入发表博客页面，选择上传照片和信息等即可发表。
5.联系我们模块
该部分只提供了开发者的基本信息
6.登录注册模块
用户进入登录页面，输入用户名、密码、验证码等信息后可以登录网站，也可已点击注册连接进入注册页面，填写邮箱、两次输入密码后可以注册用户，用户名为邮箱@符前的字符串。
登录注册都是用ajax进行动态验证，提高用户体验度。
7.管理员模块
管理员登录后可以删除或上传设计，删除博客和删除用户。
3.5数据流程
1.网站整体流程
图3.5.1网站整体流程图
用户进入网站便来到首页，首页显示了三组照片，分别为“经典推荐”，“最新设计”、“最新博客”。
用户可以通过点击前两组照片上的链接进入设计详细页面或导航栏“设计”下的二级菜单进入设计主体分类页面，浏览各类设计。
在设计详细页面中，如果该设计可下载，则出现下载按钮，用户单击下载按钮可以获得下载连接，但要进行登录验证，只有登录用户可以进行此项操作，若未登录则转向登录页面。
用户也可以通过导航栏进入“我的页面”和“博客”页面，但这两项都要进行登录验证，只有已登录用户方可进入，否则进入登录页面。
2.登录流程图
图3.5.2登录流程图
如果用户已有本网站账户，则输入用户名和密码以及验证码等信息，经验证后可以登录，否则重新进入登录页面。
如果用户没有帐号，则进入注册页面，输入邮箱和密码等基本信息后可以注册用户，用户名为邮箱@符号之前的字符串，并自动登录网站。
登录成功后转到上一步操作的页面处。
3.博客和我的主页流程图
图3.5.2登录流程图
用户经过登录验证后可进入我的主页和博客，在我的主页中用户可以修改头像，单击头像后选择新头像上传即可；查看已发表博文，进入详细页面后可以删除；查看已收藏博文；发表博文，进入发表界面后选择上传照片并填写相应信息后点击上传即可。
进入博客界面，可以分类浏览博文，点击查看详细，对博文进行评论和收藏等操作。
3.6网站风格
这是一个设计类网站，风格已清新艺术为主，主体选用蓝色、灰色和白色作为主色调，
图3.6.1主色调选择
但由于这是一个设计网站，可以使用jquerry技术动态的修改背景色，提高用户体验度，使用户增加设计的感觉。
3.7界面布局
1.主体布局
图3.7.1页面主体布局
头部放登录按钮，登录信息等，尾部为系统信息等，底部放一些链接和版权信息。
网站所有页面整体布局一致，只有主体部分少有不同。
2.其余页面的主体部分布局
（1）首页
图3.7.2首页主体
首页是三类推荐的的照片组合，提供照片放大镜功能。
（2）分类查看设计页面主体部分布局
图3.7.3分类查看设计页面主体部分布局
（3）登录注册
图3.7.4博客主体部分布局
（4）“设计”详细页面
图3.7.5“设计”详细页面主体部分布局
（5）博客界面
图3.7.6博客主体部分布局
4详细设计
4.1数据库设计
4.1.1.ER图
（1）用户
图4.1.1用户ER图
（2）设计方案
图4.1.2设计方案ER图
（3）设计分类
图4.1.3设计分类ER图
（4）博客
图4.1.4博客ER图
（5）博客分类
图4.1.5博客分类ER图
（6）评论
图4.1.6评论ER图
4.1.2逻辑设计
用户（编号,用户名,密码,邮箱,等级,照片,金币）
设计方案（编号,方案名称,设计时间,设计者姓名,方案照片,是否推荐,设计信息,设计文档,下载地址,设计类编号,下载币）
设计方案分类（编号,设计类名称,设计类信息）
博客分类（编号,博客名称,博客类信息）
博客（编号,博客名,上传时间,用户id,博客照片,博客类编号,评论数,博客信息,博客文本）
博客收藏（编号,博客编号,用户编号,评论时间）
博客评论（编号,博客编号,用户编号,评论内容,评论时间）
4.1.3实体设计
表4.1.1User用户表
序号
数据名称
数据代码
类型
宽度
备注
1
编号
uid
int
4
主键
2
用户名
username
varchar
20
唯一
3
密码
password
varchar
20
非空
4
邮箱
email
varchar
30
5
等级
ugrade
int
4
默认1
6
照片
uphoto
char
50
7
金币
money
int
12
默认50
表4.1.2design设计表
序号
数据名称
数据代码
类型
宽度
备注
1
编号
did
int
4
主键
2
方案名称
designname
varchar
50
3
设计时间
designdate
long
4
设计者姓名
designername
varchar
50
5
方案照片
designphoto
varchar
200
6
是否推荐
isgood
int
2
7
设计信息
designinfo
varchar
200
8
设计文档
designintroduction
text
9
下载地址
downlocation
char
50
10
设计类编号
dcid
int
4
外键
11
下载币
downmoney
int
2
表4.1.3designClass设计表
序号
数据名称
数据代码
类型
宽度
备注
1
编号
dcid
int
4
主键
2
设计类名称
dcname
varchar
50
3
设计类信息
dcinfo
varchar
200
表4.1.4designClass设计表
序号
数据名称
数据代码
类型
宽度
备注
1
编号
bid
int
4
主键
2
博客名
blogname
varchar
50
3
上传时间
blogdate
long
4
用户id
uid
int
12
外键
5
博客照片
blogphoto
varchar
200
6
博客类编号
bcid
int
4
7
评论数
commentnum
int
12
8
博客信息
bloginfo
char
200
9
博客文本
blogintroduction
text
表4.1.5blogClass设计表
序号
数据名称
数据代码
类型
宽度
备注
1
编号
bcid
int
4
主键
2
博客名称
bcname
varchar
50
3
博客类信息
bcinfo
varchar
200
表4.1.6博客评论表
序号
数据名称
数据代码
类型
宽度
备注
1
编号
bcid
int
4
主键
2
博客编号
bid
int
4
外键
3
用户编号
uid
int
4
外键
4
评论内容
commentinfo
text
5
评论时间
commenttime
long
表4.1.7收藏表
序号
数据名称
数据代码
类型
宽度
备注
1
编号
blid
int
4
主键
2
博客编号
bid
int
4
外键
3
用户编号
uid
int
4
外键
4
评论时间
lovetime
long
4.2详细设计
4.2.1.程序系统结构
图4.2.1系统结构图
以下为各包内文件作用：
表4.2.1各DAO文件的作用
文件名
作用
/com/cz/homedesigner/dao/DesignDao.java
负责数据库设计方案有关的信息进行处理
/com/cz/homedesigner/dao/BlogDao.java
负责数据库博客有关的信息进行处理
/com/cz/homedesigner/dao/UserDao.java
负责数据库用户有关的信息进行处理
以上这些类全部为接口类，真正的实现类全部在/com/cz/homedesigner/dao/impl包中，
表4.2.1各DAOIMPL文件的作用
文件名
作用
/com/cz/homedesigner/dao/impl/DesignDaoImpl.java
负责数据库设计方案有关的信息进行处理
/com/cz/homedesigner/dao/impl/BlogDaoImpl.java
负责数据库博客有关的信息进行处理
/com/cz/homedesigner/dao/impl/UserDaoImpl.java
负责数据库用户有关的信息进行处理
表4.2.3各SERVICE文件的作用
文件名
作用
/com/cz/homedesigner/service/DesignService.java
负责设计方案类相关操作的业务逻辑
/com/cz/homedesigner/service/BlogService.java
负责博客类相关操作的业务逻辑
/com/cz/homedesigner/service/UserService.java
负责用户类相关操作的业务逻辑
以上这些操作累全部为接口，其真正的实现在/com/cz/homedesigner/service/impl中
表4.2.3各SERVICE文件的作用
文件名
作用
/com/cz/homedesigner/service/impl/DesignServiceImpl.java
负责设计方案类相关操作的业务逻辑
/com/cz/homedesigner/service/impl/BlogServiceImpl.java
负责博客类相关操作的业务逻辑
/com/cz/homedesigner/service/impl/UserServiceImpl.java
负责用户类相关操作的业务逻辑
工厂类是用于连接各接口类与实现类，使各类之间完全脱离，降低类与类之间的耦合度。
表4.2.4各FACTORY文件的作用
文件名
作用
/com/cz/homedesigner/factory/DesignDaoFactory.java
负责连接DesignDao类的接口与实现类
/com/cz/homedesigner/factory/DesignServiceFactory.java
负责连接DesignService类的接口与实现类
/com/cz/homedesigner/factory/BlogDaoFactory.java
负责连接BlogDao类的接口与实现类
/com/cz/homedesigner/factory/BlogServiceFactory.java
负责连接BlogService类的接口与实现类
/com/cz/homedesigner/factory/UserDaoFactory.java
负责连接UserDao类的接口与实现类
/com/cz/homedesigner/factory/UserServiceFactory.java
负责连接UserService类的接口与实现类
Action类为struts框架中的类，负责后台程序与界面之间的相互调用与数据传递
表4.2.5各ACTION文件的作用
文件
作用
/com/cz/homedesigner/action/BaseAction.java
基础action类，获取了session等对象，为了让后面的action继承
/com/cz/homedesigner/action/DesignAction.java
用于设计方案管理相关操作
/com/cz/homedesigner/action/BlogAction.java
用于博客相关操作
/com/cz/homedesigner/action/UserAction.java
用于用户管理相关操作
/com/cz/homedesigner/action/LoginAction.java
用于登录相关操作
/com/cz/homedesigner/action/FileUpLoadAction.java
用于处理上传文件的操作
工具类，主要是连接数据库、生成验证码等操作的工具类
表4.2.6各UTIL文件的作用
文件名
作用
/com/cz/homedesigner/utils/DBUtil.java
用于连接数据库
/com/cz/homedesigner/utils/ImageUtil.java
用于生成验证码
各vo文件，为实体类，存放各实体对象。
表4.2.7各VO文件的作用
文件
作用
/com/cz/homedesigner/vo/Design.java
用于保存设计方案
/com/cz/homedesigner/vo/DesignClass.java
用于存放设计方案类别
/com/cz/homedesigner/vo/Blog.java
用于存放博客对象
/com/cz/homedesigner/vo/BlogClass.java
用于存放博客类别
/com/cz/homedesigner/vo/.BlogCommentjava
用于存放博客评论
/com/cz/homedesigner/vo/.BlogLovejava
用于存放收藏博客
/com/cz/homedesigner/vo/User.java
用于存放用户对象
各xml文件，这些xml文件为struts2框架的配置文件，用于指定各action中方法调用那个页面，及页面调用那个action。
表4.2.7各VO文件的作用
文件
作用
/struts_blog.xml
博客相关操作的配置文件
/struts.xml
Struts2框架的主配置文件
/struts_main.xml
主要操作的配置文件
/struts_user.xml
用户相关操作的配置文件
表4.2.8各INTERCEPTER文件的作用
文件
作用
/com/cz/homedesigner/intecepter/CheckLoginIntercepter
登录拦截器
在WebRoot下有各界面的的jsp文件，及用到的css、js、图像、flash等文件。
5网站实现
5.1静态界面的绘制
（1）首页
图5.1.1首页图
该页为网站
升级会员 