论文总字数：19133字

摘 要

改革开放以来，我们国家的经济在不断地发展，我们的生活条件也在不断地改善，电子商务技术也因此顺应人们生活便捷的需求日渐成熟。类似淘宝、京东等的电子商务网站如雨后春笋一般冒了出来。电商交易额持续突破,在各领域的应用不断拓展和深化。现时阶段，电子商务与实体经济正在尝试着相互融合,以达到规模性发展的要求。电子商务对经济社会生活的深远影响使得其正成为我国经济发展的新引擎，这是毋庸置疑的。

基于SSM的淘淘网上商城是一个顺应电子商务热潮的B2C网站，本文旨在根据现有的电子商务网站的设计特点，完成基于SSM的淘淘网上商城的UI设计。在对京东、淘宝等较为成熟的电子商务网站UI的研究的基础上，采用分层架构将系统按功能进行切分的方法，将前台系统分离出来，以方便UI设计的工作。本文介绍了UI的概念、意义及现状，解释了在设计过程中使用的CSS技术、EasyUI技术和设计需求，将前台系统拆分成门户、用户、订单等多个模块进行介绍，并且罗列了在设计过程中遇到的问题和解决措施。

关键词：电子商务 UI 分层架构 CSS EasyUI

UI design and implementation based on SSM online mall tao tao

Abstract

Since the reform and opening, Our country’s economy has been developing continuously, and our living conditions are also improving. Therefore, e-commerce technology has become increasingly mature to meet people’s demand for convenience. E-commerce sites like taobao and jd.com have sprung up. The transaction volume of e-commerce is even at a high record, and its application in various fields is constantly expanding and deepening.At present, e-commerce is trying to further integrate with the real economy to meet the requirements of large-scale development.The profound influence of e-commerce on economic and social life makes it a new engine of China's economic development, which is beyond doubt.

Taotao online mall based on SSM is a B2C website that conforms to the upsurge of e-commerce. This paper aims to complete the UI design of taotao online mall, according to the design features of existing e-commerce websites. On the basis of the research on the UI of jingdong, taobao and other mature e-commerce websites, the layered architecture is adopted to segment the system according to functions, and the foreground system is separated to facilitate the work of UI design. This paper introduces the concept, significance and status quo of UI, explains the CSS technology, EasyUI technology and design requirements used in the design process, divides the foreground system into portal, user, order and other modules for introduction, and lists the problems encountered in the design process and solutions.

Key Words: E-commerce; UI; Layered architecture; CSS; EasyUI

目 录

摘要 I

Abstract II

第一章 绪论 1

1.1 设计背景 1

1.2 社会需求 1

1.3 主要工作 1

1.4 论文架构 2

第二章 UI设计概述 3

2.1 UI设计的概念 3

2.2 UI设计的意义 3

2.3 UI设计的发展与现状 3

2.4 主要技术 4

2.4.1 CSS技术 4

2.4.2 EasyUI技术 4

第三章 需求分析与设计 6

3.1 企业的需求 6

3.1.1 便于广告宣传，提高销售量 6

3.1.2 便于调整方向，找准定位 6

3.2 消费者的需求 6

3.3 功能设计 7

3.3.1 门户模块 7

3.3.2 用户模块 7

3.3.3 后台管理模块 8

3.4 工作环境 8

3.5 系统架构 9

第四章 UI的实现 10

4.1 项目文件说明 10

4.2 客户端界面 10

4.2.1 后台管理模块 10

4.2.2 用户模块 14

4.2.3 门户模块 20

4.3 部分功能说明 24

4.3.1 后台管理系统商品描述的实现 24

4.3.2 后台管理系统选择类目栏的实现 27

4.3.3 后台管理系统商品列表的实现 28

4.3.4 前台门户页显示小图标的实现 29

4.3.5 前台门户页大广告展示的实现 31

4.3.6 SSO单点登录系统的实现 32

4.3.7 购物车系统的实现 34

第五章 遇到的问题与方法 35

5.1 浏览器缓存问题 35

5.2 端口被占用问题 35

5.3 引入文件的顺序问题 35

5.4 clean报错问题 36

第六章 总结与展望 37

6.1 总结 37

6.2 展望 37

参考文献 38

致谢 39

第一章 绪论

1.1 设计背景

近年来,互联网技术被不断普及，电子商务行业也顺应形势蓬勃发展，竞争激烈[1]。2009年，中国GDP达35万亿元，其中电子商务交易额接近4万亿元。到2017年，中国GDP突破80万亿元，其中电子商务交易额达到了29万亿元[2]。2009年至今，十年以来，“双十一”购物狂欢节交易额节节攀升，2018年“双十一”全网零售额达3143万亿元巨额，同比增长25.8%，创历史新纪录。根据这些数据，可以看得出，电子商务作为新时代的产物，引领着新时代的潮流，发挥着越来越关键的经济效益作用。

面对电子商务行业如此良好的前景，电商网站的UI设计在如此激烈的竞争中起着至关重要的作用。好的UI设计，能够帮助商城及时有效的获取信息，抓住消费者的心，使得消费者在商城中长时间停留，进而提高消费者满意度，拓宽受众范围，丰富商城价值，提高商城的竞争地位。

1.2 社会需求

二十一世纪以后，互联网技术高速发展，如今已然成为互联网的时代。然而，在这种环境下，UI技术还处于起步发展阶段，社会对UI设计的重视程度远不及其他设计。和国外相比，我国的UI设计总的而言发展较晚，UI的技术水平也远远不如国外的水平。教育领域中，也鲜少有与UI设计相关的课程内容。社会招聘中，更多的也是与美工和平面设计相关的岗位，较少有UI设计岗位。

请支付后下载全文，论文总字数：19133字