电子商务模拟实验报告

1、实验：电子商务网站设计试验实验目的：1、登录模块设计实验：（1）理解电子商务网站中登陆模块设计的意义。（2）掌握登陆模块的设计方法和技巧。2、导航条模块设计实验（1）理解导航模条在网站中的意义。(2）掌握设计导航条的方法。3、新闻模块设计实验：（1）熟悉电子商务网站中新闻模块的几种样式。（2）掌握新闻模块的设计方法和应用技巧。 4、公告模块设计实验：（1）理解电子商务网站中公告存在的意义。（2）学会在电子商务网站中设计公告。（3）学会添加高效的公告5、商品展示模块设计实验：（1）熟悉电子商务网站中商品展示的方式。（2）掌握在电子商务网站中展示商品的方法和技巧。 6、商品购物车、订单模块查询设计

2、：（1）熟悉电子商务网站中购物的流程。（2）掌握电子商务网站中订单产生的流程7、咨询信息模块设计实验：（1）掌握电子商务网站中公告模块的设计方法。（2）掌握电子商务网站中咨询信息的添加方法。（3）体会在电子商务网站中咨询信息的作用。8、友情链接模块设计实验：（1）掌握在电子商务网站中添加友情链接模块的方法。（2）掌握在电子商务网站中添加高效友情链接的技巧。9、网站调查模块设计实验：（1）了解网站调查的意义。（2）掌握设计网站调查的方法。（3）掌握从网络收集信息的手段和效率10、电子商务网站设计综合实验：（1）掌握开发功能齐全的电子商务网站过程。（2）掌握电子商务网站的综合管理技能。1、登陆界面

3、的设计1.1.进入前台编辑器界面-点击登录注册样式一。在组件列表中选择“登陆样式一”或者“登陆样式二”来添加登陆功能模块，模块添加完成后就可以在编辑器的编辑模式下看到添加组件的页面效果了图1.1 登陆界面1.2保存好之后程序版本控制。添加完成登陆页面保存后，在导航中通过“程序版本控制”按钮来把新添加的页面从测试区同步到工作区去。在完成页面的同步后就可以进行前台页面测试了。图1.2 程序版本控制界面1.3 进入测试程序前台图1.3 进入前台程序测试1.4.1生成程序后台 图1.4 生成程序后台1.4.2添加用户：在后台的用户管理上添加用户数据库。在对登陆前台页面添加完成后，就可以利用系统提供的“

4、生成程序后台”按钮自动生成登陆页面的后台程序了。通过后台程序的生成就完成了一个完整的用户管理模块的设计了。图1.5 添加用户数据库1.5学生作业练习某电子商务网站首页做的很难看，特别是登陆框做的很小，很难被发现，导致该网站访问率下降。请你现在为该网站主页只设计一个登陆框，其他内容不需设计。练习如下，适当调整宽度图1.6 调整宽度之后的登陆界面2导航条设计实验2.1导航条实现原理：后台管理界面添加导航，将导航信息保存到数据库中，前台展示页面通过查询后台数据库，得出导航信息的标题、链接页面、打开方式等信息，以超级链接形式实现导航。2.2实验内容及步骤： 2.2.1进入编辑器页面，点击“电子商务组件

5、”按钮，通过按钮点击“导航条”，设置相关导航条图2.1进入编辑器界面2.2.2 程序版本控制图2.2进入程序版本控制界面2.2.3测试程序前台 图2.3 进入测试程序前台2.2.4生成程序后台 在对导航前台页面添加完成后，就可以利用系统提供的“生成程序后台”按钮自动生成导航页面的后台程序了。通过后台程序的生成就完成了一个完整的导航条管理模块的设计了。图2.4 进入生成程序后台2.2.5练习：为沃尔玛练习导航条：后台程序添加导航条：添加首页、促销活动。新闻界面等图2.5 在后台管理导航管理上添加导航条前台测试显示：图2.6沃尔玛导航条显示3 新闻模块设计实验3.1 实现原理：后台管理界面添加新闻

6、，将新闻信息保存到数据库中，前台展示页面通过查询后台数据库，得到新闻的标题、作者、内容及新闻的展示图片，在表格中呈现新闻信息。3.2实验内容及步骤（1）进入编辑器界面。添加组件：新闻信息样式一。图3.1点击新闻样式出现新闻界面调整位置如下：图3.2 调整新闻的界面3.2.2程序版本控制：图3.3 程序版本控制之新闻管理3.2.3前台测试：图3.4 进入测试程序前台3.2.4进入生成程序后台新闻管理。添加新闻图3.5 进入后台管理界面3.2.5作业练习。添加花店新闻：假设你开了一个网上花店，现在需要通过在网上发布相关新闻来宣传产品和网站，甚至可以炒作网站。请设计一个新闻中心，要求以适当的大小放在

7、适当的位置，并发布适当的内容。图3.6 添加花店新闻的编辑界面图3.7添加新闻后花店的整体效果图 3.8新闻界面的详细内容界面4 公告设计模块4.1 实现原理：实现原理：后台管理界面发布公告，将公告信息保存到数据库中，前台展示页面通过查询后台数据库，得出公告信息的标题、内容等信息，以表格形式展示出来。4.2 实验内容及步骤4.2.1 进入编辑器，添加公告信息样式组件，调整页面排版图4.1 添加公告信息样式一4.2.3测试程序前台.程序控制之后进入测试程序前台测试。图4.2 添加公告样式一之前台4.2.4生成程序后台 在对公告前台页面添加完成后，就可以利用系统提供的“生成程序后台”按钮自动生成公

8、告页面的后台程序了。通过后台程序的生成就完成了一个完整的公告管理模块的设计了。图4.3 后台管理界面之公告管理4.2.4练习：某电子商务公司内部员工出现内部经济丑闻，现公司决定通过网站公告栏发布公告，以挽回公司形象。请为该公司网站设计一公告栏，具体文字内容自拟。要求以适当大小放在适当位置，并发布适当内容。 图4.4 公告之编辑界面5商品展示模块设计实验5.1 实验原理：后台管理界面发布商品，将商品信息保存到数据库中，前台展示页面通过查询后台数据库，得到商品的名称、价格、原价和现价及商品的展示图片，在表格中呈现商品信息。5.2实验内容及步骤5.2.1前台编辑器-多商品展示（调整居中）图5.1前台

9、编辑器之多商品展示5.2.2程序版本控制：图5.2多商品展示之程序控制版本 5.2.3后台测试：商品管理页图5.3多商品展示之后台5.2.4练习：请为联想电脑网站的产品介绍页面设计商品展示栏。要求从电子商务角度，以适当的大小放在适当的位置，发布适当的信息，介绍其最新的几种产品。图5.4多商品展示之后台管理：添加电脑产品前台测试：图5.5 多商品展示之前台测试 商品修改：图5.6 多商品展示之修改后台6商品购物车、订单查询实现原理：点击购买商品，将选购的商品信息保存在购物车表中，同时购物车模块中的信息从购物车表中查询出来，以表格形式表现出来。当点击付款时，产生随即订单编号，将这次选购的商品金额，

10、邮购地址等信息保存起来。一次购物操作完成。6.1现在上题点击联想电脑进入购物车图6.1购物车之添加商品加入购物车6.2新建用户登录订购商品页面图6.2 购物车之前田编辑器调整排版：图6.3购物车之前台编辑器6.3程序版本控制：图6.4购物车之程序版本控制6.4测试前台：图6.5购物车之测试程序前台6.5生成程序后台;图6.6购物车之后台管理6.6订购货物后图6.1购物车之后台管理7咨询信息模块设计实验实现原理：后台管理界面或前台页面添加咨询信息，将咨询信息保存到数据库中，前台展示页面通过查询后台数据库，得到咨询信息的标题、作者、内容，在表格中呈现咨询信息。7.1实验内容及步骤：7.1.1前台编

11、辑器修改格式：图7.1咨询信息之前台编辑器7.1.2程序版本控制图7.1咨询信息之程序版本控制7.1.3测试程序前台：图7.2咨询信息测试程序前台7.1.4生成程序后台：图7.3咨询信息之生成程序后台7.1.5发布咨询：图7.4咨询信息之后台管理7.1.6某域名代理公司网站主页需要加入信息咨询功能，请为该公司设计。要求以适当大小放在适当位置。图7.5咨询信息之前台编辑器8友情链接模块设计及实验实现原理：后台管理界面添加友情链接，将链接信息保存到数据库中，前台展示页面通过查询后台数据库，得到链接的地址、链接的标题、网站的log图片等信息，以超级链接的形式实现友情链接。8.1 实验内容及步骤8.1

12、.1前台编辑器加入友情模块链接：图8.1友情链接之前台编辑器调整格式后图8.2友情链接之前台编辑器8.1.2程序版本控制：图8.2友情链接之程序版本控制8.1.3测试前台初步：图8.2友情链接之测试程序前台8.1.4生成程序后台：添加各种网站链接，如淘宝，Google等图8.4友情链接之添加链接添加中国移动、360，京东商城图8.5、友情链接之添加链接图8.6友情链接咨询信息之添加链接再重新测试程序前台图8.7友情链接之添加链接图8.8友情链接之添加链接8.4学生练习，为电脑销售公司添加友情链接添加友情链接1号店图8.9友情链接之添加链接一号店添加友情链接京东商城图8.10友情链接之添加链接京

13、东商城测试程序前台显示图8.11友情链接之测试程序前台9网站调查模块设计9.1进入网站编辑页面，前台编辑器图9.1网站调查之测试程序前台改动位置之后居中自成一个区块图9.2网站调查之测试程序前台9.2保存之后程序版本控制图9.3网站调查之程序版本控制9.3测试程序前台图9.3网站调查之测试程序前台9.4生成程序后台图9.4网站调查之后台9.5练习为肯德基做个客户需求调查图9.5网站调查之后台添加调查调查问题：图9.5网站调查之调查问题图9.6网站调查之调查问题图9.7网站调查调查问题另添加女性对裤子喜好的调查图9.8网站调查之程序版本控制至此，实验1到实验9全部做完，效果图如下：图9.9整体页

14、面 图9.9整体页面 图9.9整体页面 后台效果图如下：图9.9整体页面 10电子商务网站设计综合实验建立一个clothestore站点，卖各种款式的女装10.1图片插入服务器：图10.1加入图片 10.2 公告的管理设计图10.2加入公告图10.3加入公告10.2.2前台显示效果：图10.3加入公告后前台显示效果10.3导航条的设计图10.5加入导航条图10.7新闻 10.4上传商品：图10.7上传商品 前台显示商品图10.8前台显示商品10.5双11新闻管理：图10.9新闻管理前台显示：图10.10加入双11新闻10.6商品订购：图10.11商品订购商品订购：图10.12前台 图10.13

15、购物车及订单查询10.7加入咨询信息管理： 图10.14咨询台10.8加入后台链接管理。图10.15咨询管理前台测试显示至后台咨询管理和友情链接图10.16 友情链接10.9 调查管理：图10.16调查管理添加项目主题：图10.17调查管理对原创设计外套的调查；图10.19调查管理前台调查管理的显示效果：图10.20 调查管理 之前台1010整体前台效果：图10.21前台整体效果图10.22前台整体效果图10.23前台整体效果整体后台效果： 图10.24后台整体效果实验总结以前在逛各大网站时，总是想着那些网站如何进行网站的布局的。所以接触这次电子商务模拟实验时是充满兴趣的，带着期待的心情去做这个实验。不过，一开始进入里面觉得一点都不有趣，因为都是一个框架一个框架的做，而且系统本身存在很大问题，进入代码模式修改代码时只能进行一些基本的修改，不能深入。而且每个电子商务组件是固定的，机械的，布局又有点丑。之后进行新闻管理时才感到乐趣，自己撰写新闻稿，发布到上面，上传