实验二 XX网上购物网站的模仿设计与实现

指导书

指导思想

1. 用心阅读、理解消化成功的或先进的成果，用好人类的成果，做自己的高质量产品；

2. 模仿不是抄袭，要超越；

3. 向华为学习，美国有安卓，华为有鸿蒙。

一、实验目的与要求

1. 熟悉内容展示的网页设计

2. 熟悉样式表现的设计运用

3. 熟悉页面元素的行为编程

4. 了解与认知网站类软件的用户需求

5. 以购物网站为参照设计与实现

6. 页面核心内容具有增删改存与搜索等功能

7. 创新素质与论文写作训练：前五项，每项建议有1至3个：想法-设计编程实现-结果表现-解释结果-得出结论；多个方法、方案要有比较分析。要写在报告中。

8. 题目自拟作为副标题

9. 必须使用JS、CSS、CSS3、HTML、HTML5、表单、Ajax、JSON等技术，运用拓展使用前后端框架等技术与后端设计技术等加分

10. 提升自学能力与创新能力

11. 要求实现的系统能够独立运行，功能合理且实用性强、界面美观大方

12. 报告中要有：小组成员及分工；系统功能结构图及简要说明；所使用的技术；系统截图等

13. 提交材料包括∶

(1) 项目源代码：学号_姓名_实验2ver1.zip（模仿网站）

(2) 项目源代码：学号_姓名_实验2.zip（模仿设计完善的网站）

(3) 实验报告：学号_姓名_实验2.docx

答辩演示报告：学号_姓名_实验2.ppt

二、实验仪器设备/实验环境

1. Windows win7/win8/win10等操作系统

2. Visual Studio Code或其它IDE软件

3. 浏览器：谷歌、火狐、IE等浏览器

三、实验原理

1. 网页内容设计

2. 网页样式设计

3. 网页元素行为设计

四、实验内容

分析操作网站的用户功能需求，设计功能界面、操作与实现。

1. 网页内容设计

2. 网页样式设计

3. 网页元素行为设计

4. 网站项目内容存储目录结构

5. 用户角色有买家、卖家、平台管理者

6. 网站功能需求分析

7. 网站功能设计：界面、操作、数据影响

8. 功能实现

9. 前端框架技术应用（拓展加分）

10. HTML5 WebSQL等数据库运用（拓展加分）

11. 后端与数据库等设计技术（拓展加分）

12. 其它相关设计

实验内容需要包括以下具体内容等（要求正常运行，可操作）

1.网站文件目录存储结构

据网站的业务逻辑，合理的设计文件和文件夹的命名，对网站代码的设计和后期的维护很重要。文件夹的命名应该采用符合计算机系统统一的命名规范。相同业务逻辑的内容，应该放在同一个文件夹里面，以便开发及维护。具体的案例，如图5.1所示。

2.网站内容的设计及显示

1）网站内容的设计和规划

根据网站的业务内容，收集相关的资源，然后对网站的所有功能，做一个整体的规划设计。参考案例，如图5.2所示：

图5.2 网站整体布局样式

2）网站展示风格美观统一

版面布局应能突出重点同时，整体布局和谐。采用已学过的多种技术，包含CSS+JS的各种特效，使得网站图片和字体合理搭配，选择色调和主题协调。在丰富内容的基础上，搭配多种形式的多媒体展现形式。参考案例，如5.3所示：

图5.3 某电商平台商品展示页面

五、实验步骤

1. 选择模仿的购物网站。

2. 进入一个网页，保存网页到“temp”目录中；

3. 将temp其下子目录中的文件按照扩展名，分别保存到d:\学号_姓名_实验2ver1下的html、css、js、images等对应目录中；

4. 运用“https://tool.oschina.net/codeformat/html”对html、js、css文件格式化后复制，粘贴到源文件中保存，使得源文件便于阅读理解消化；

5. 运用vscode，打开temp目录中的html文件另存到d:\学号_姓名_实验2ver1\html中，再修改文件中的相应路径，并保存，要注意：用..\进入上级目录的对应子目录中；

6. 按照上面同样的方法步骤，把其他页面进行同样的操作。

7. 调试通过后，按要求打包提交。

8. 对于一般的购物网站，我们的角色或称用户类型是买家，针对这类用户进行分析其功能，画出买家-功能图即用例图。

9. 购物网站中的商品图、价格、介绍等信息，这类信息是必然又是一类用户输入的，这类用户的角色是卖家，通过分析，画出：卖家-功能图的用例图；

10. 购物网站中买家、卖家需要有管理，这就是买卖管理者角色，通过分析，画出：买卖管理者-功能图的用例图；

11. 对于以上各类用户的功能进行设计：

1) 画出各个功能的界面图

2) 操作名与过程

3) 数据影响，包括数据增删改存与搜索的说明

12. 进行数据文件或数据库的设计，确定保存文件位置、类型、结构等

13. 运用web编程技术实现以上各个用户类的所有功能；

14. 调试、测试通过后，按照要求打包提交；同时把完成的实验报告与答辩演示报告PPT一起提交。

六、实验注意事项

1. 组长负责统筹整个组别的任务分配

2. 写上组别全部人员的完整学号，姓名，每组最多6人

3. 把代码和运行结果的截图贴在上交的作业报告文件里面（包括结果说明、方案方法比较分析与结论）

4. 实验宗旨是要训练每位同学独立完成任务的能力！关键技术组内分工攻关、有问题互相帮助研讨交流！

5. 项目任务、实验报告、项目演讲展示报告由每位同学独立完成，并各自提交自己的内容。

七、思考题或作业

1. 如何使用JS、CSS实现整个网站的显示风格按星期变化？

2. 购物网站的信誉体系是如何建立的？

八、实验总结

1. 写出对未来有用的体验