《ASP.NETWeb应用系统开发教学课件作者于华610第10章节》由会员分享，可在线阅读，更多相关《ASP.NETWeb应用系统开发教学课件作者于华610第10章节（162页珍藏版）》请在金锄头文库上搜索。
1、第10章 基于ASP.NET的儿童网站的开发,10.1 系统设计 10.2 数据库的设计与实现 10.3 主要功能模块的设计,10.1 系 统 设 计 10.1.1 系统需求分析 儿童是一个很大的消费群体，在个性化消费的今天，儿童的消费也需要个性化。目前电子商务蓬勃发展，但国内针对儿童服务的网站却暂处空白，本实例是以儿童为服务对象的网站开发。它不仅是传统的购物网站，还融入了多种元素，如有声读物、音乐、互动的虚拟空间等，切切实实为儿童定制。,该网站定义为儿童购物个性综合网站。儿童：本网站的所有内容和功能均和儿童相关。购物：本网站提供基本的服饰购物功能，主要是配合实体店的运营。个性综合：网站的设计
2、主要以个性、温馨为主，提供童话故事、儿童音乐、BBS、试衣间、模特秀等功能，目的是方便家长，使其不需要再去其他地方搜集资料。,10.1.2 系统形象设计 1LOGO设计 网站名称“HotuBeBe”可以理解为Hot your baby，装扮你的宝贝，让你的宝贝火起来，即“时尚宝贝”。将“HotuBeBe”设计成两朵四叶草的样子，每个字母代表一个花瓣。Hotu是大朵四叶草，代表父母；BeBe是小朵四叶草，代表孩子。总体寓意是父母用自己的爱装扮自己的宝贝，让孩子健康、快乐、时尚地成长，如图10-1所示。,图10-1 网站LOGO设计,2网站首页设计 由于是“儿童综合网站”，所以在设计方面以“四叶草
3、”为依托，尽量接近“童真、童趣”，给人一种童年和美好希望的感觉。这个网站的主要目标人群是年轻的爸爸妈妈们，他们追求方便、独特和时尚，抓住他们的心理以及需求设计了“购物”、“童话”、“音乐”、“宝贝秀”和“BBS”模块。综合性比较强的网站给年轻父母提供了很多便利及服务，因此首页中商品分类按钮采用时尚卡通化设计，效果如图10-2所示。,图10-2 首页商品分类按钮,网站设计的主题以绿色、蓝色、白色三种颜色为主色调，使用导航栏对各个网页进行导向。网站首页设立公告栏，公布网站最新的动态。网站首页整体设计效果如图10-3所示。,图10-3 网站首页整体设计效果,10.1.3 系统功能设计 系统分为会员用
4、户模块、购物模块、论坛模块、童话模块、音乐模块和宝贝秀模块。系统将访问本网站的用户区分为注册用户和非注册用户两种，不同类型用户所拥有的权限是有区别的，具体权限分配如图10-4所示。,图10-4 不同用户的权限分配,1主页 主页即网站的首页，是网站的第一内容页，整个网站的最新、最值得推荐的内容将在这里展示。在设计上，注重协调各区域的主次关系，以营造易用性与视觉舒适性的人机交互界面为终极目标。网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现儿童的智趣。静态主页方式介绍网站具备的功能和“公告栏”提供的最新资讯。 “搜索”功能可利用ASP.NET与数据库结合的技术建立数据库查询管
5、理系统，采用交互式动态的Web画面来实现。,2购物 购物模块具有商品分类管理、商品展示、品牌管理、支付方法管理、配送区域和配送方法设置、商品搜索和分类查询、商品评论、购物车、会员订单提交、订单管理、在线支付、订单统计、销售统计等网上商店常用的功能。该模块适合企业网站建立在线商品销售栏目，开展B2C电子商务。购物模块主要是配合实体店的运营，更多的功能还是以展示为主，这不仅为老顾客购物提供方便，也可吸引新顾客来实体店购买。,3宝贝秀 宝贝秀(模特秀)主要是根据不同季节、不同的时装主题进行服饰搭配，通过模特的展示给顾客提供当下最新的时尚资讯。同时，在此会提供“试衣间”功能，顾客可以上传宝贝的照片，然
6、后选择虚拟衣服搭配出适合自己孩子的服饰。 我们要做的就是把人们不可或缺的“衣”这部分“E”化，让大家可以用最快的速度试穿多件自己所想要的衣服，而且不需要店员逐一地拿取，也不需要多次进出试衣间，这不仅节省了时间，而且可以预防被偷窥。,4童话与音乐 童话与音乐模块给予顾客尽可能多的选择，可以作为对孩子的教育，也可以作为孩子临睡前的故事和摇篮曲。 音乐模块中会设置最新音乐推荐、歌曲排行榜、MV推荐等，用户可在网页上直接观看音乐MV，也可以对其音乐进行下载、收藏、试听。在此模块中还设计了留言板功能，用户可以提供自己的建议。 童话模块使用Flash以电子杂志的形式简单实现，今后会以IPAD中的“有声读物
7、”应用(如“APPLE TREE”)为蓝本进行完善。,5BBS 论坛的设置主要是为顾客提供互相交流学习的一个平台。用户可根据自己的需求发帖，比如可以展示自己宝贝的时尚照，可以进行疑问咨询等，同时论坛也是提供儿童时尚资讯的主要平台。,6会员和个人中心 本网站提供会员“注册”、“登录”和“个人中心”模块，会员可登录“个人中心”自主完善和修改个人信息。这样便于管理，也为客户提供了一个良好的自主管理平台。 “收藏夹”模块的主要功能是方便会员平时浏览网站时对自己所需的“服饰”、“音乐”、“童话”等的收藏，以便下一次访问。会员也可根据需要对其进行删除、增加等操作，此操作主要体现在“个人中心”模块中。,10
8、.2 数据库的设计与实现 1用户登录信息表(Login) 用户登录信息表记录用户名、密码等用户信息，如表10.1所示。 2城市信息表(City) 城市信息表记录省编号对应的城市信息，如表10.2所示。 3论坛回复信息表(TalkReply) 论坛回复信息表记录论坛帖子回复信息，如表10.3所示。 4商品信息表(Product) 商品信息表记录商品的相关信息，如表10.4所示。,表10.1 用户登录信息表,表10.2 城 市 信 息 表,表10.3 论坛回复信息表,表10.4 商 品 信 息 表,5论坛信息表(Talk) 论坛信息表记录发布帖子的信息，如表10.5所示。 6购物车信息表(Buyb
9、ag) 购物车信息表显示购物车商品信息，如表10.6所示。 7音乐信息表(Music) 音乐信息表记录音乐的相关信息，如表10.7所示。 8视频信息表(Mv) 视频信息表记录音乐模块视频的信息，如表10.8所示。,表10.5 论 坛 信 息 表,表10.6 购物车信息表,表10.7 音 乐 信 息 表,表10.8 视 频 信 息 表,9童话信息表(Story) 童话信息表记录网站中童话的相关信息，如表10.9所示。 10背景设置信息表(Bgset) 背景设置信息表记录产品显示背景的设置信息，如表10.10所示。 11公告栏信息表(Info) 公告栏信息表存放首页公告信息，如表10.11所示。
10、12省信息表(Province) 省信息表记录省编号和省名，如表10.12所示。,表10.9 童 话 信 息 表,表10.10 背景设置信息表,表10.11 公告栏信息表,表10.12 省 信 息 表,13留言信息表(Message) 留言信息表记录用户在音乐页面用户留言的信息，如表10.13所示。 14订单信息表(OrderList) 订单信息表记录用户购买商品的相关信息，如表10.14所示。 15收藏夹信息表(Favourites) 收藏夹信息表保存个人中心内的收藏夹信息，如表10.15所示。,表10.13 留 言 信 息 表,表10.14 订 单 信 息 表,表10.15 收藏夹信息表,
11、10.3 主要功能模块的设计 10.3.1 用户登录注册模块 1用户注册模块(Reigister.aspx) 注册用户可以“登录”来获得购买商品、发帖回复、个人中心等权限。未注册用户可以“注册”，正确填写会员信息后，便能以会员身份登录。用户注册模块使用了Panel控件实现了同意用户协议、填写基本信息、填写用户详细信息等用户注册流程，其中 “用户协议”界面，如图10-5所示。,图10-5 “用户协议”界面,“用户注册”界面除了验证控件以外，使用TextBox记录提交用户的输入信息，使用FileUpload上传图片，如图10-6所示。 “用户详细信息”界面使用TextBox记录提交用户的姓名、出生
12、年月、联系地址、邮政编码和联系方式，使用DropDownList选择省份和城市，如图10-7所示。 完成所有信息填写后，如果信息正确，则会显示“注册成功”界面，如图10-8所示。,图10-7 用户详细信息界面,图10-6 “用户注册”界面,图10-8 “注册成功”界面,注册页面(Reigister.aspx)中加入了RequiredFieldValidator、RangeValidator、RegularExpression Validator、CompareValidator、CustomValidator、ValidationSummary等验证控件，用于对用户信息进行验证。验证“用户名已
13、存在”的效果的实现代码如下：,protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) string Username = args.Value; if (db.judge(Username) /用户名确认 args.IsValid = false; /验证失败 else args.IsValid = true; /验证正确 ,验证需要借助Db类中封装的判断指定用户是否存在的数据库judge方法。相关代码如下： public static bool judge(stri
14、ng userName) SqlConnection con = db.createCon(); con.Open(); SqlCommand cmd=new SqlCommand(“select count(*) from login where UserName= “+userName+“, con); int count =(int)cmd.ExecuteScalar(); if(count0), return true; else return false; ,在填写完联系方式，单击“下一步”按钮后(触发Btn_Next3_Click事件)，调用数据库对象方法insertOperate
15、插入用户注册信息，完成注册流程。相关代码如下： protected void Btn_Next3_Click(object sender, EventArgs e) user user = new user(); user.username = this.TB_Username.Text.ToString(); /用户名 user.password = this.HFPassword.Value; /密码 user.email = this.TB_Email.Text.ToString(); /电子邮箱 user.truename = this.TB_Truename.Text.ToString(); /真实姓名 user.sex = this.RB_Sex.SelectedValue.ToString(); /性别 user.birth = this.TB_Birth.Value; /生日,user.ProName = this.Drop_Province.SelectedValue.ToString(); /省份 user.CityName = this.Drop_City.SelectedValue.ToString();/城市 user.address = this.TB_Ad
