摘 要
近些年，互联网行业的发展带给了很多人在生活上的便利，互联网能够改变人们的生活和工作的模式。很多企业都在将普通的工作模式结合了互联网，利用互联网的优势提高管理员的工作效率。目前不少化妆品网站存在着许多问题，因此根据化妆品行业的特点，可以设计一个化妆品网站提高管理员的工作效率。计算机网络如果结合使用信息管理系统，能够提高管理员管理的效率，改善服务质量。优秀的化妆品网站能够更有效管理化妆品售卖业务规范，帮助管理者更加有效管理化妆品售卖，可以帮助提高克服人工管理带来的错误等不利因素。所以一个优秀的化妆品网站能够带来很大的作用。
本系统所使用的前端技术为HTML和CSS，开发工具选择使用Dreamweave。在实现化妆品网站之前，需要通过调研化妆品网站基本功能有哪些，设计出系统对应的总体架构，之后程序开发者可以编码实现化妆品网站，最后需要对化妆品网站利用测试用例进行测试，测试完成之后根据选择优化系统，本次编码实现的化妆品网站具有的功能包括：查看化妆品、购买化妆品、购物车管理、个人资料修改、收货地址管理、我的留言、登录。
关键词：HTML；CSS；Dreamweave
In recent years, the development of the Internet industry has brought many people convenience in life. The Internet can change the mode of people's life and work. Many enterprises are combining the common working mode with the Internet and using the advantages of the Internet to improve the work efficiency of administrators. At present, there are many problems in many cosmetics websites. Therefore, according to the characteristics of the cosmetics industry, a cosmetics website can be designed to improve the work efficiency of administrators. If the computer network is combined with the information management system, it can improve the efficiency of administrator management and improve the quality of service. Excellent cosmetics websites can more effectively manage the business norms of cosmetics sales, help managers more effectively manage cosmetics sales, and help improve and overcome the adverse factors such as errors caused by manual management. Therefore, an excellent cosmetics website can play a great role.
The front-end technology used in this system is HTML and CSS, and the development tool chooses Dreamweave. Before realizing the cosmetics website, we need to investigate the basic functions of the cosmetics website and design the overall architecture of the system. Then the program developer can code to realize the cosmetics website. Finally, we need to test the cosmetics website with test cases. After the test, we need to optimize the system according to the selection, The functions of the cosmetics website realized by this code include: viewing cosmetics, purchasing cosmetics, shopping cart management, personal data modification, receiving address management, my message and login.
Keywords：HTML；CSS；Dreamweave
目 录
1 绪论
1.1 课题背景
互联网发展到现在已经有七十多年的时间了，随着信息技术的不断发展，互联网会涉及到人们生活的各个方面当中[1]，互联网时代来临的时候可以推动各个行业的发展，给社会的经济领域添加了不少活力。
在当今的时候，很多行业都离不开互联网，尤其是在互联网时代下产生的化妆品网站更是受到人们的欢迎。化妆品网站的发展已有不少的时间，具有不同的种类。化妆品网站如此火爆有以下原因。
（1）相比于较传统的工作模式，化妆品网站能够提高管理员管理的效率和降低出错的效率。化妆品网站功能经过编译运行能够大大降低管理员管理出错的概率，管理员管理系统的时候如果发生了错误的情况系统会给出相应的提示。
（2）通过化妆品网站管理能够降低成本，可以节省大量的时间成本和人力资源，管理员能够提高管控能力[2]。
1.2 研究意义
随着计算机的普及，国际上化妆品网站前景良好，而国内上的化妆品商店数量上也增加了不少，网上化妆品售卖网站的出现，证明了化妆品网站具有良好的前景。在当今世界之中，随着科学技术的不断发展和计算机越来越普及，运用计算机对系统进行管理是一种趋势。如今随着社会和生活的信息量在不断地增长中，如何提高管理员的管理效率成为了人们关注的话题[3]。
传统人工管理化妆品网站会消耗过多的人力和物力，很有困难造成管理员管理混乱，从而对化妆品网站的正常运营造成影响，很多传统的管理模式已经不能够适应人们的要求[4]。我们可以充分利用计算机的资源，完成化妆品售卖的信息服务。最后为了方便管理员能够大量处理业务，可以借用于计算机强大的信息资源。在考虑到用户的便处之时还需要考虑到用户使用的安全问题。
随着对各种不同模型的讨论和信息技术的最终发展，并且还讨论了在海量数据中如何安全和高效地存储的问题，人们逐渐发明了一些办法。将计算机软硬件和数据库进行结合起来，研究了一套能够为企业正常运行而提供的功能，这种功能最后带动了信息管理系统的发展。一个化妆品网站不仅能够解决用户的需求，还能够降低人工的操作出现错误的几率。这能够使得管理员的管理更加标准化[5]。
1.3 课题研究现状
在很多发达国家中，化妆品网站的进展明显要快于我国很多，在管理方面也建设了很多不同的管理平台，这些管理平台能够为管理员管理提供数据信息，为化妆品商店售卖化妆品提供了一个高效的管理平台。这些化妆品网站原则上的设计能够结合网络软硬件构建出信息系统。
相比较于国外而言，我国网上化妆品售卖信息化发展是较为缓慢的，最初只是将网上售卖化妆品信息作为一个概念进行研究。随着信息技术的不断发展，目前我国在网上化妆品售卖管理方面已经有了进步[6]。
以化妆品网站的应用为基础，可以将软件开发机构分为几个层次：
第一个层次中的国外软件开发机构能够提供较为成熟的化妆品网站，这些化妆品网站的主要目标为市场上的高端用户，软件能够满足高端用户对其平台的要求。
第二个层次是我国的一些软件机构在研究化妆品网站的时候往往引入了国外软件的设计模式，之后结合国内市场的具体需要进行设计软件。设计出的软件一般能够符合大多数用户的认可。
第三个层次为定制的化妆品网站。一般是结合于用户的实际需求，定制有特殊功能的化妆品网站，从而满足用户的不同要求。
虽然随着技术的不断发展，但是国内很多机构在开发化妆品网站还有不少不足之处：
首先，很多国内机构使用的是旧的管理模式，所使用的化妆品网站仅仅能够对数据信息进行维护，但需要注意的是，只有提高管理员的管理能力，才能够有效率地提高其营运水平。所以这些机构需要利用化妆品网站来提高管理的效率。
其次，很多化妆品商店在internet的支持下，已经将售卖化妆品的工作移动到软件平台，但还是有很多的问题，很多化妆品网站之间数据不能够相互交互数据。
1.4 主要内容
（1）本次针对化妆品网站提出实现方案，按照软件开发的一般流程进行前期的调研和分析确定软件是否能够正常实现、技术是否可行和系统功能模块的设计开发，最后确定了使用的技术和实现系统的方案。
（2）HTML和CSS属于一种程序开发者实现的功能集合，可以帮助软件开发者快速构建软件层次架构和复用功能的一款工具，本平台框架使用了HTML和CSS，具有比较好的开发优势，可以帮助软件开发者快速构建基本的程序开发环境出来，通过调用HTML和CSS帮助程序开发者减少开发难度，提升了化妆品网站的安全和稳定性，能够帮助程序开发者完成系统功能模块的开发和数据的处理。
1.5 论文结构
针对本文的化妆品网站安排论文的章节如下：
第一章是引言。本章主要介绍了课题研究背景与意义、课题研究现状和论文结构。
第二章是系统开发环境及技术。本章介绍了化妆品网站开发环境和所涉及到的技术。
第三章是需求分析。本章介绍了化妆品网站的功能需求和非功能需求，绘制出系统功能模块图。
第四章是系统总体设计。对系统功能模块进行划分。
第五章是系统实现。本章阐述了化妆品网站功能模块的实现功能。
第六章是系统测试。本章阐述了使用黑盒测试对系统进行测试。
2相关技术简介
2.1 Jquery技术概述
本化妆品网站使用到了一些技术效果和表单的验证采用了Jquery技术实现，JavaScript库中包含了Jquery，Jquery能够简化代码的复杂性和使得代码更容易读懂。Jquery技术能够通过id选择器对HTML中的元素进行操作。Jquery技术还自带了鼠标事件和表单事件等，可以很容易地处理需要鼠标和表单的情况。JQuery技术可以通过CSS（）的方法进行实现赋予有关的元素。
JQuer技术还能够实现前后台交互，主要可以依赖于AJAX函数和表单FORM提交。AJAX可以接收不同的数据类型，可以设置同步和异步，表现出来的功能比较强大。AJAX强大之处在于无刷新操作可以不需要刷新页面就可以实现数据的改变。Form表单提交的方式跟AJAX方法有一定的区别，Form表单通过Action属性和SUBMIT函数表示提交。两种方式都有各自的优点，使用哪种方法需要根据情况决定。
2.2 UML语言
面向对象开发使用图形化建模语言通常采用是UML，全名称为统一建模语言，UML依靠强大的功能被许多程序开发者认可。UML能够通过符号表示面向对象系统的信息，在出现不久的时间被OMG标准所吸收。UML能够通过建模的标准描述现实世界的物体，系统在设计实现之前首先需要建模，统一建模语言从多个角度进行考虑，定义了用例图和类图等建模图，这些图能够从另外一个角度描述系统。系统模型将这些建模图整合成为一个整体，这样能够更好地分析状态。
建模语言能够统一不同的方法对不同系统的各种观点，这样可以减少不同建模语言之间的差异，UML是通用的一种建模语言，这样可以保证多个用户可以使用。
2.3 JavaScript技术
JavaScript属于脚本语言中的一种并且是弱类型的，其中的引擎可以作为浏览器的一部分。JavaScript最开始为实现客户端的界面效果，但是随着时间的发展，也能够开发服务端。JavaScript有如下优点：
（1）JavaScript属于解释性的脚本语言，使用JavaScript编写的代码不需要预先编译，因为是嵌入到HTML代码中的，因此只需要由浏览器进行解释即可。
（2）JavaScript的特性为基于对象，和面向对象的语言有差别，不支持的特性包括继承和重载。它是先描述对象，然后再次基础上构建具体对象。
（3）语言使用起来的话较为简单，变量不需要指定是什么类型就可以使用。
（4）JavaScript能够使得HTML页面变为动态页面，所以动态性是其基本一个特点。
2.4 B/S架构
本系统采用的是浏览器和服务器的架构方式，B/S架构能够扩展能力和功能要相对强大。B/S架构是在C/S架构上进行改进的产物。在浏览器服务器架构中用户端界面可以通过流啊两年前实现，而化妆品网站的业务逻辑需要在服务端中进行处理。前后端加上底层的数据库构成三层架构的方式。
随着开发的兴起，B/S架构开发的项目能够方便维护。如果传统的C/S架构项目需要更新的话，每个用户的电脑都需要进行对应的升级操作，这样做的话效率不高。
2.5 HTML5发展史
随着互联网的快速发展，程序开发人员对于Web技术要求也越高，HTML语言需要作对应的更新。很多网站页面虽然基于HTML，但是这需要程序开发人员不断地进行更新，从而满足用户的不同要求和程序人员的开发需要。
随着Web2.0的到来，WHATWG组织决定发展和完善HTML，改进HTML的一些缺陷，通过添加功能使得网页具有动态性。随着HTML新版本的发布，HTML5的动态性让很多互联网公司应用其技术到新产品中，在这过程中HTML5也在不断地完善着。
3 需求分析
3.1 功能需求
从软件开发角度来说，软件开发最重要的步骤包括需求分析和产品设计。如果需求分析和产品设计做得好的话，那么会节省很多开发时间，可以更快地把软件研究出来。对化妆品网站的业务需求有了一定的了解之后，需要对化妆品网站每个角色的功能进行分析。对化妆品网站进行建模，可以清晰地知道化妆品网站用例者之间不同的关系和每个角色的功能。用例建模的时候包括用例描述和用例图，用例图可以通过图形化的方式描述不同角色的功能。用例描述能够将交互流程以文字的形式表现出来，用例描述是用例图的补充说明[7]。
3.1.1 用例概述
图2.2 高层用例图
用例的简要描述如表2.1所示。
表2.1 用例描述
| 用例标识（UC） | 用例名称 | 摘要描述 |
| 1 | 登录 | 需要验证用户的身份 |
| 2 | 购买化妆品 | 用户登录系统之后可以购买化妆品 |
| 3 | 购物车管理 | 用户登录系统之后可以管理购物车的化妆品信息 |
| 4 | 个人资料修改 | 用户在个人资料修改页面中管理自己的个人信息 |
| 5 | 收货地址管理 | 用户登录系统之后可以管理收货地址 |
| 6 | 我的留言 | 用户在我的留言界面中管理留言信息 |
| 7 | 查看化妆品 | 用户登录系统之后可以查看化妆品信息 |
3.1.2 用例描述
（1）购物车管理信息用例
用户选择完化妆品之后可以在购物车里管理化妆品信息，购物车信息用例图如图2.3所示。
图2.3 购物车管理信息用例图
购物车管理功能中编辑用户信息用例描述如表2.2所示。
表2.2 购物车管理用例
| 用例标识 | 2.1 |
| 用例名称 | 购物车管理 |
| 参与者 | 用户 |
| 前置条件 | 用户需要登录进入系统 |
| 后置条件 | 购买化妆品 |
| 用例概述 | 用户选择完化妆品之后可以在购物车里管理化妆品信息 |
| 基本事件流 | 1. 用户输入用户名和密码成功登录 2. 进入到化妆品详情页面中 3. 可以选择增加化妆品数量、减少化妆品数量和结算 |
| 备选事件流 | 4a 购买化妆品的时候要保证库存充足 |
| 备注 |
（2）收货地址管理信息用例
收货地址管理信息功能中编辑收货地址信息用例描述如表2.3所示。
表2.3 收货地址管理信息用例
| 用例标识 | 2.2 |
| 用例名称 | 收货地址管理信息 |
| 参与者 | 用户 |
| 前置条件 | 用户需要登录进入系统 |
| 后置条件 | 收货地址管理 |
| 用例概述 | 用户可以管理收货地址信息 |
| 基本事件流 | 1. 用户输入用户名和密码成功登录 2. 进入到收货地址管理页面中 3. 用户管理收货地址信息 |
| 备选事件流 | 4a 输入收货地址信息的时候需要输入合法的信息 |
| 备注 |
（3）我的留言用例
我的留言功能中编辑留言信息用例描述如表2.4所示。
表2.4 我的留言用例
| 用例标识 | 2.3 |
| 用例名称 | 我的留言 |
| 参与者 | 用户 |
| 前置条件 | 用户需要登录进入系统 |
| 后置条件 | 留言信息管理 |
| 用例概述 | 用户可以管理留言的相关信息 |
| 基本事件流 | 1. 用户输入用户名和密码成功登录 2. 进入到留言管理页面中 3. 用户管理留言信息 |
| 备选事件流 | 4a 输入留言信息的时候需要输入合法的信息 |
| 备注 |
（4）查看化妆品信息用例
用户可以查看化妆品信息，查看化妆品信息用例图如图2.4所示。
图2.4 查看化妆品信息用例图
用户查看化妆品信息用例描述如表2.5所示。
表2.5查看化妆品信息用例
| 用例标识 | 2.4 |
| 用例名称 | 查看化妆品信息 |
| 参与者 | 用户 |
| 前置条件 | 用户需要登录进入系统 |
| 后置条件 | 查看化妆品的详情信息 |
| 用例概述 | 用户查看化妆品的详情信息 |
| 基本事件流 | 1. 用户输入用户名和密码成功登录 2. 进入到化妆品详情页面中 3. 可以选择加入购物车和立即购买化妆品 |
| 备选事件流 | 4a 购买化妆品的时候要保证库存充足 |
| 备注 |
（5）个人资料修改用例
用户在个人资料修改可以管理个人信息，个人资料修改信息用例图如图2.5所示。
图2.5 个人资料修改信息用例图
个人资料修改用例描述如表2.6所示。
表2.6 个人资料修改信息用例
| 用例标识 | 2.5 |
| 用例名称 | 个人资料修改 |
| 参与者 | 用户 |
| 前置条件 | 用户需要登录进入系统 |
| 后置条件 | 个人资料修改管理个人信息 |
| 用例概述 | 用户可以管理个人信息 |
| 基本事件流 | 1. 用户输入用户名和密码成功登录 2. 进入到个人资料修改页面中 3. 可以选择修改个人信息 |
| 备选事件流 | 4a 不能够输入不合法的字符信息 |
| 备注 |
（6）购买化妆品用例
购买化妆品用例描述如表2.7所示。
表2.7 购买化妆品信息用例
| 用例标识 | 2.6 |
| 用例名称 | 购买化妆品 |
| 参与者 | 用户 |
| 前置条件 | 用户需要登录进入系统 |
| 后置条件 | 购买化妆品 |
| 用例概述 | 购买化妆品 |
| 基本事件流 | 1. 用户输入用户名和密码成功登录 2. 进入到化妆品详情页面中 3. 点击预订按钮购买化妆品 |
| 备选事件流 | 4a 只有化妆品有剩余的情况下才可以预订成功 |
| 备注 |
3.2 可行性分析
3.2.1 经济可行性研究
如果管理员有了化妆品网站，便可以对化妆品售卖进行管理，在资金花费上可以节省不少。化妆品网站的设计开发与实现目的是解决传统模式带来的多余经济支出，尤其是人力资源带来的成本支出。传统的化妆品网站不仅需要消耗大量人力资源，而且往往需要管理员手工记载数据。本化妆品网站设计实现的目的为降低开发成本，并且可以节省管理员的时间和提高用户的体验感。考虑到目前的互联网开源框架和硬件设备，所以经济上是可行的[8]。
3.2.2 技术可行性研究
根据前期对化妆品网站功能的分析和确定，最后选择合适的软件架构和技术实现系统的开发，系统在设计实现的时候无论是开发工具还是系统架构使用的都是较为方便的开发模型，还包括了较为成熟的解决方法。综合市场上现有的化妆品网站[9]，本次所使用的技术基本可行，并且能够满足用较少的开发和学习的成本。此次使用的开发模式能够快速构建系统，有不少现成的系统可供参考，所以后期的系统维护和升级较为容易，因此在技术上是可行的。
3.2.3 操作可行性研究
化妆品网站开发出来的目的是为了用户访问的操作的，因此化妆品网站在设计的时候需要注意到用户操作和访问的问题，用户群体普遍能够接受信息化的使用操作，所以用户的学习成本不是很高。本化妆品网站在设计的时候没有采用过于繁杂的操作，使用的操作界面和按钮在设计上较为简单，参考了不少的主流化妆品网站，因此系统在操作性上是可行的。
3.3 非功能需求
化妆品网站在设计的时候需要注意非功能性需求，还要满足系统业务流程的需要。
（1）兼容性
一般软件系统可以分为服务器和客户端，服务器需要运行程序，客户端显示程序的界面，系统的机器需要放置在机房中，软件开发者在平常的时候需要对其维护，用户所能接触到的界面其实是由客户端运行的，属于人机交互的接口。为了提高化妆品网站的兼容率，需要考虑代码实现的时候和前端界面的样式是否能够相互适配。
（2）易操作性
程序开发人员实现系统的时候，除了保证业务功能的实现之外，还需要注意使得业务功能简化，用户在操作的时候能够简易完成事件流程。很多用户不具备真正的计算机知识，如果设置得过于复杂，那么会影响用户使用的体验感。（3）可扩展性
软件系统随着事件的推移需要更新系统，本化妆品网站也不例外，如果需求发生了改变，那么就需要调整系统的功能。如果采用的是面向对象程序设计方法，那么可以使用接口编程技术，严格遵循软件开发规范，最后对系统进行修改的时候会具有较高的适应性。
所设计的化妆品网站需要适应在未来管理的时候能够适应需求的变化。从侧面要求系统需要具有扩展性。因此系统开发的时候需要遵循一定的软件规范从而能够便于后期对系统的修改。
（4）可靠性
软件系统需要由可靠性，否则很多实际对系统的管理会失效，使得业务功能不能够正常地流转。系统的可靠性包括了硬件能力、应用和数据。一个系统可靠性越高那么代表系统从异常到能成功运行的能力和使用价值也会越高，用户的体验感会变得更好。
3.4 性能需求
在软件开发的过程中，虽然需要注意业务功能需求，但是性能需求也一样重要。如果系统性能不好的话，那么很有可能会导致用户的体验变差和管理员管理效率的减少。如果需要增强系统的性能，那么需要注意数据安全性、查询效率和系统响应速度。
（1）数据的安全性
化妆品网站每天的运行会产生很多数据，数据已经涉及到系统运行的每个部分中，因此数据的安全性变得非常地重要。系统需要对用户的密码作加密处理，用户的密码需要使用加密字符串进行处理，从而保证系统数据的安全性，用户在前台输入密码的时候需要采用特殊字符代替。
（2）系统的查询效率和响应速度
化妆品网站中很多模块都有查询的功能，有些查询功能还涉及到多表的查询。化妆品网站在运行了一段时间之后，业务量变得越来越多，因此，需要优化代码语句，通过减少查询字段和增加限制条件能够使得查询的速度变快。为了能够提升化妆品网站的效率，需要优化系统代码和减少系统的时间复杂度。在前端页面中引入CSS文件可以在页面头部中进行引入，页面的尾部中引入js文件，这能够增加页面的响应速度[10]。
4 总体设计
4.1 系统架构设计
本化妆品网站采用的是B/S模式，B/S模式又称浏览器/服务器模式，B/S模式有个很大的好处为如果系统有网络那么就可以运行，它依赖于Web浏览器的技术，因此在使用的时候不需要管理人员安装任何较为专业的软件，管理员在维护软件的时候也无需花费过多的精力。
浏览器端在向用户提供操作界面的时候还需要保存前端用户输入的各项信息和处理用户提交的请求，业务逻辑执行相关操作处理前端界面传递过来的数据，最后把处理结果显示给用户。服务器端主要处理用户点击页面传递过来的请求，最后去请求服务器执行相关的操作，从而能够得到相应的数据记录，之后根据情况对取得的数据记录进行处理返回到浏览器端显示相应的结果。
4.2 设计目标
本次设计的化妆品网站的目标为将日常管理的内容由计算机进行管理，实现为用户提供更加便捷的服务。在设计实现化妆品网站的过程当中，详细考虑了用户所需要的功能模块，所以系统在实现的时候需要由以下的目标：
（1）稳定性：化妆品网站在运行的过程当中，系统需要保持稳定，同时如果必要的时候可以更改电脑硬件且不会影响到化妆品网站的运行。如果化妆品网站的某个模块出现了问题那么不会影响到其它功能模块的运行。
（2）准确性：管理员调整化妆品网站的功能模块过后需要符合较佳的使用情况，如果系统出错了则会记录信息。
（3）可扩展性：如果需要添加新的服务类型的时候，在保持原有的化妆品网站功能模块可用的情况下，能够添加新的功能模块。
（4）可维护性：如果需要更改调整接口的时候，化妆品网站的框架不需要改变。
（5）独立性：化妆品网站每个功能模块需要独立存在，管理员可以根据实际需求减少或增加相应的功能模块。
4.3 功能需求
4.3.1 功能需求分析
（1）登录
用户在使用化妆品网站之前需要进行登录。用户需要在登录界面中输入用户名和密码才能够进行登录，选择好自己的角色，最后点击登录按钮才可以登录，之后开源框架会将用户输入的信息进行验证，如果用户输入的信息和JS代码编写的记录存在相同的时候，表示验证成功，此时会跳转到化妆品网站的主界面当中，则这时表示登录成功。用户如果想要退出登录的话则需要点击退出按钮。
图4.3 登录流程图
（2）结账
在结账之前用户需要选好化妆品放入到购物车当中，如果还有想要购买的化妆品，需要把化妆品加入到购物车当中，点击结账按钮的时候需要付款。
图4.4 结账流程图
（3）留言管理
用户登录完成之后可以对留言信息进行管理。
图4.5 用户管理流程图
4.3.2 功能结构
用户：查看化妆品、购买化妆品、购物车管理、个人资料修改、收货地址管理、我的留言、登录。
图4.6 功能结构图
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
