摘 要

过去，我们的社会实行物物交换，这是最原始的贸易形势。到后来人们开始集中交易，于是有了市场、超市等集体贸易的场所。然而随着信息化时代的到来,人们开始利用科学技术为自己不断制造便利，足不出户就能购物成为了人们的理想。在这样一种追求便利的过程中，电子商务随之产生，即买家和卖家通过互联网进行商品贸易。随着人们消费观念和生活方式的逐渐改变，电子商务这种新型的商业模式逐渐融入了人们的生活，这同样也可以拓展到我们的大学校园中。

本文主要介绍了校园市场交易商城网页的UI设计与实现时的界面规划、运用到的关键技术，以及功能实现的代码设计。本系统是一个基于JavaWeb的校园市场交易商城。本系统使用了bootstrap框架，用MyEclipse作为开发工具，以JavaScript脚本语言进行代码编写，以JSP和CSS技术进行页面的布局和美化，基本实现了校园市场交易商城应有的基本功能和主要模块,该系统界面简单、操作方便，容易维护。

关键词：JSP CSS 交易商城 UI设计 bootstrap

UI design and implementation of Web page of Campus market trading mall based on JavaWeb

Abstract

In the past, our society practiced barter, the most primitive form of trade. Later, people began to centralize trade, and then there were markets, supermarkets and other places for collective trade. However, with the arrival of the information age, people began to make use of science and technology for their own convenience, without leaving home to shopping has become people's ideal. In such a process of pursuing convenience, e-commerce comes into being, that is, buyers and sellers trade goods through the Internet. With the gradual change of people's consumption concept and lifestyle, e-commerce, a new business model, has gradually integrated into people's life, which can also be extended to our university campus.

This paper mainly introduces the campus market transaction mall website UI design and implementation of the interface planning, the use of key technologies, as well as the function of the code design.This system is a campus market transaction mall based on JavaWeb. This system uses bootstrap framework. MyEclipse is used as a development tool. JavaScript is used to write the code.

Key words: JSP;CSS;transaction mall;UI design;bootstrap

目录

摘要 I

Abstract II

第一章 绪论 1

1.1 校园市场交易商城的课题背景 1

1.2 校园市场交易商城的研究意义 1

1.3 校园市场交易商城的主要工作 2

1.4 UI设计的现状 2

第二章 校园市场交易商城的相关准备 4

2.1 开发平台 4

2.2 UI设计的准备工作和原则 4

2.2.1 网页UI设计的前期准备工作 4

2.2.2 网页UI设计的原则 4

2.3校园市场交易商城界面规划 5

2.3.1 登陆界面的规划 5

2.3.2 应用界面的规划 6

第三章 主要技术介绍 8

3.1 CSS技术 8

3.2 JSP技术框架 8

3.3 B/S架构介绍 9

3.4 JavaScript技术介绍 9

3.5 PS技术介绍 10

3.6 bootstrap4技术介绍 10

第四章 系统设计 11

4.1 系统的可行性分析 11

4.2 系统的设计要求和原则 11

4.2.1 系统的要求 12

4.2.2 满足的原则 12

4.3 系统的主要功能 12

第五章 校园市场交易商城各模块的UI设计与功能实现 14

5.1 校园市场交易商城 UI设计简介 14

5.2 校园市场交易商城 LOGO设计 14

5.3 前台首页 14

5.3.1 前台首页具体设计 14

5.3.2效果图 15

5.3.3关键代码 15

5.4 登陆模块 16

5.4.1 登陆模块具体设计 16

5.4.2效果图 17

5.4.3关键代码 17

5.5 信息查询界面 17

5.5.1 信息查询模块具体设计 17

5.5.2效果图 18

5.5.3关键代码 19

5.6商品详情页面 19

5.6.1商品详情模块具体设计 19

5.6.2效果图 19

5.6.3关键代码 20

5.7购物车界面 20

5.7.1购物车的具体设计 20

5.7.2效果图 20

5.7.3关键代码 22

5.8余额充值界面 22

5.8.1余额充值模块具体设计 22

5.8.2效果图 22

5.8.3主要代码 23

5.9账户信息界面 23

5.9.1账户信息界面具体设计 23

5.9.2效果图 23

5.9.3关键代码 23

5.10账户信息修改界面 24

5.10.1账户信息修改界面具体设计 24

5.10.2效果图 24

5.10.3关键代码 25

总 结 26

参考文献 27

致谢 28

第一章 绪论

1.1 校园市场交易商城的课题背景

大学是一个流动频繁的人口集聚区。一方面，大学生的消费水平相对较高，消费欲望也很强，由此产生的闲置物品也会有许多。由于这些东西占地方或者想换取一些收入，大学生们大部分会选择出售这些闲置，这是最环保也是经济效益最高的做法。另一方面，对很多同学来说，有些二手的东西质量也不差，价格还实惠，所以非常热衷于买二手的商品。同时，在急需一些物品的时候，在校园里交易就显得尤为方便。

目前社会上已经有了各式各样的网上商城。基于JavaWeb的校园市场交易商城是一个面向校园师生的在线商城。该商城设计的目的是满足学校师生出售闲置和购买二手的需求，紧密贴合大学生的生活，是一个较为便利和完善的在线商城。它通过运用相对应的核心技术，可以实现网页的基本功能。

1.2 校园市场交易商城的研究意义

随着信息时代的到来，我们不难发现信息容量在逐步增大，信息类型也在逐步变多，日渐成熟的科学技术带动了计算机科学的发展，计算机强大的功能性正在各行各业展露出来。利用计算机网络来交易，已经成为了一种趋势。

相关图片展示：