青岛美丽一身网站的设计与制作计划书.doc

青岛美丽一身网站的设计与制作计划书1 网站功能介绍网站的界面设计主调颜色为粉红色，由浅粉和桃红色进行搭配，设计美观。本网站分为前台展示和后台管理两大部分，其中前台的主要功能是商品展示和用户购买及评价留言，后台的主要功能是管理员管理商品、处理订单、管理用户、管理基本信息。具体介绍如下：1.1前台主要功能及特点1.1.1主页功能（1） 商品分类导航服装：外套、连衣裙、T恤、针织衫； 饰品：包包、首饰、帽子；（2） 顶部导航：特卖专区、特别活动、会员注册、在线留言。如图1所示：图1.1 主页顶部展示（3） 会员登录界面；（4） 销量前6名商品排序；（5） 最新商品展示，包括商品名称、商品图片、商品价格，共9个服装类、6个饰品类；如图2所示：图1-2 主页商品展示及会员登录、商品排名等（6） 底部：加入收藏、设为主页、后台管理。1.1.2 会员注册（1） 会员注册信息有：用户名、密码、真实姓名、电话、地址、头像等；（2） 会员注册后即有10个积分、每次登陆增加2个积分、每次购物增加5个积分；会员注册界面如图3所示：图1-3 会员注册界面i. 商品细节显示（1） 商品小图片、大图片、商品名称、原价格、现价格；（2） 商品详情；（3） 商品评价；（4） 商品最近成交记录；（5） 参考尺寸、物流介绍、质量保证；商品细节显示如图4所示：图1-4 商品细节显示1.1.4会员购物（1） 会员登陆后，可以购物；（2） 购物时填入确定电话、地址、邮编；（3） 购物后可以评价，评价后即在网页中显示购物记录及评价信息；1.1.5在线留言（1） 会员登陆后可以留言（2） 管理员可以删除留言会员在线留言如图5所示：图1-5 在线留言1.2后台主要功能及特点(1) 对管理员的管理：包括添加、删除管理员、修改密码等；(2) 商品的添加：添加时，需选择商品的分类，输入商品的名称、价格、上传商品的图片，如图6所示：图2-1 商品添加(3) 商品的管理：可以分页显示商品，具有删除功能；(4) 用户管理：管理本网站的用户，具有删除功能；(5) 订单查看：分页显示交易记录；(6) 客服设置。2 数据库设计 采用ACCESS进行数据库设计，有8个数据表：商品分类表（big和class）、商品信息表（book）、商品成交记录表（chengjiao）、留言信息表（liuyan）、管理员信息表（shop_admin）、用户信息表（tb_user）、客服信息表（kf），下面为几个主要表的结构展示：(1) 商品分类表（big和class）的数据表视图图2-1商品分类表表结构(2) 商品信息表（book）的设计表视图图2-2商品分类表表结构(3) 商品成交记录表（chengjiao）的设计表视图图2-3商品分类表表结构（4） 用户信息表（tb_user）的设计表视图图2-4商品分类表表结构其他各表不再详细在这里列出，各表关系如下图2-5商品分类表表结构3 详细设计3.1数据库连接技术在需要与数据库进行连接的所有页面的设计上，我采用的头文件,conn.asp的具体内容如下所示：4.2 销售排名技术将销售前6名的商品展示到主页上，可以使用SQL语句中的排序语句：“select * from 商品信息表 order by 销售量 decs”，使其按销售量由高到底排列，主要代码如下% i=1do while not rs.eof and i a href=xijie.asp?id=img src= width=50 height=50 align=left border=1 第名：价格：元总销售额：件 3.3 会员注册技术中的注册信息检查由于在会员注册时，用户可能输入非法信息，如两次密码不一致，所以本设计使用JavaScript语句来判断用户的输入是否合法，主要代码如下：function check()if (myform.UserName.value=)alert(请输入用户名！);myform.UserName.focus();return;if (myform.TrueName.value=)alert(请输入真实姓名！);myform.TrueName.focus();return;if (myform.PWD1.value=)alert(请输入密码！);myform.PWD1.focus();return;if (myform.PWD1.value.length6)alert(密码至少为6位，请重新输入！);myform.PWD1.focus();return;if (myform.PWD2.value=)alert(请确认密码！);myform.PWD2.focus();return;if (myform.PWD1.value!=myform.PWD2.value)alert(您两次输入的密码不一致，请重新输入！);myform.PWD1.focus();return;if(myform.birthday.value=)alert(请输入您的生日);myform.birthday.focus();return;if(CheckDate(myform.birthday.value)alert(请输入标准日期（如：1980/07/17或1980-07-17）);myform.birthday.focus();return;if (myform.Email.value=)alert(请输入Email地址！);myform.Email.focus();return;var i=myform.Email.value.indexOf();var j=myform.Email.value.indexOf(.);if(i0)|(j0)alert(您输入的Email地址不正确，请重新输入！);myform.Email.value=;myform.Email.focus();return;myform.submit();3.4商品展示技术点击主页中的超链接，相应的展示页展示4行*3列的最新商品，其中主页中超链接如下设置：连衣裙，表示zhanshi.asp网页需要接受两个传递参数，id1表示大类，id2表示小类。zhanshi.asp网页中使用语句找到相应的类别，然后使用双重do while-loop语句显示商品，伪代码如下：%dim i,jj=1do while not rs.eof and j % i=1 do while not rs.eof and i3.5用户购物功能设计浏览者只有注册为本网站的用户，才能进行购物，用户注册或者登陆后，将会产生一个session(username)，用过这个session来连接各网页，判断用户是否登陆。用户在购买商品后，可以对商品进行评价，交易和评价的结果会添加到数据库，显示到网页中去。如图7展示的为商品评价：图4-1 商品评价3.6 后台管理后台管理界面采用左右两侧框架技术，左侧为导航链接，右侧为操作界面，如上文中的图6所示。3.6.1商品添加技术向数据库中添加商品，使用的SQL语言如下：set rs=server.CreateObject(adodb.recordset)rs.Open select * from book,conn,1,3rs.AddNew 添加记录rs(name)=trim(request(bookname) 商品名rs(img1)=session(FileName2)图片地址rs.Update 更新记录rs.Closeset rs=nothing3.6.2图片上传技术图片上传技术是本设计的难点，我将图片上传的保存路径设置为updatepic文件夹，并为文件命名，再将图片保存到数据库中；同样，删除改商品时，该图片也将删除，以存储空间。 上传后显示及保存图片主要代码如下：If File.FileSize0 Then 如果 FileSize 0 说明有文件数据File.SaveToFile Server.mappath(FileName) 保存文件Response.Write 上传成功&FileName&response.Write()session(FileName1)=fnameEnd If3.6.3商品的管理对商品进行管理如图8所示，可以查看商品，删除商品图4-2 商品查看与管理删除商品的记录，使用SQL语句：conn.execute delete from book where id in (&selectbookid&)删除商品同时也删除其上传的图片，使用如下语句进行删除path=server.mappath(.&rs(img) 查找商品图片名称并赋予path变量response.Write(path) Set fso = server.CreateObject(Scripting.FileSystemObject)if (fso.FileExists(path) Then Set delfile = fso.GetFile(path) 找到商品图片路径 delfile.Delete 删除改文件 set delfile=nothingend if用户管理与订单查看，与商品管理的操作相似，不再冗速。4小 结网站已上传。经过测试，前台网页运行正常，实现了商品的动态显示，顾客可以方便地进行选购，后台管理方便可行。设计主调颜色为粉红色，由浅粉和桃红色进行搭配，符合现代女性审美观念，美观大方。网站操作简单，主题鲜明，可以适应中小型企业或店铺的商务网站的