摘 要

从互联网诞生以来，网络技术飞速发展，与之相关的电子商务逐渐登上时代的舞台。在如此繁荣的网络世界环境下，本文研究的武汉理工大学纪念品官方网站定位于Business-to-Customer模式的商品导购网站，积极迎合时代发展潮流。

本文遵循软件开发过程，首先对武汉理工大学纪念品官网进行需求分析，设计出需要完成的前台搜索、后台登录、后台信息增删管理、图片上传、数据打标分类、富文本编辑六个功能。然后依照需求分析的结果，先使用Photoshop设计前台展示的六个页面UI效果，再采取HTML5 CSS3 JQuery Bootstrap模式完成前后台的页面内容。最后基于已经完成的页面，使用NodeJS Express MySQL新兴架构搭建后台应用，并进行系统功能完整性、网络安全性、操作稳健性等方面的优化和测试。

作为武汉理工大学纪念品购买主要途径之一的纪念品官网，采用最新的Web开发技术，在高校校园网站中具有一定的代表性，并具有传播、型塑校园文化的意义。

关键词：纪念品网站；NodeJS；Express；Bootstrap

Abstract

Since the birth of the Internet, E-commerce is hotter and hotter with the rapid development of network technology. In such a prosperous internet era, the souvenirs official website of Wuhan University of Science and Technology, which belongs to Business-to-Customer pattern, actively caters to the trend of the times.

This thesis follows the software development procedure to describe the process of the souvenirs official website of WHUT. First of all, it analyzes the needs of the website, and divides all requirements into six parts which are search functions, login functions, information-modify functions, picture uploading , data classification and rich text editor. Then, it tells how to adopt HTML5 CSS3 JQuery Bootstrap mode to complete user interface based on Photoshop UI designing. In addition, the rising structure NodeJS Express MySQL is shown to achieve the website backend. At last, there are varieties of tests made for the project to insure its functional integrity, network security and robustness.

As one of the main ways to buy souvenirs of WHUT, the souvenirs official website, which adopts the lastest web development technologies, is representative for campus websites of the college and university. In addition, it guides people to buy souvenirs and spreads, shapes the campus culture of Wuhan University of Science and Technology.

Keywords：official website of souvenirs; NodeJS; Express; Bootstrap

目 录

摘 要

Abstract

第1章 绪论 1

1.1 课题背景及意义 1

1.2 本文的研究内容和结构组织 1

1.3 本章小结 2

第2章 需求分析与前台UI设计 3

2.1网站需求分析 3

2.2 武汉理工大学纪念品官网的前台UI设计 3

2.2.1 Photoshop平面设计 3

2.2.2 设计需求 4

2.2.3 设计实现 4

2.3 本章小结 11

第3章 基于HTML5 CSS3 JQuery的前台页面开发 12

3.1 HTML5 CSS3 Jquery简介 12

3.1.1 HTML5简介 12

3.1.2 CSS3简介 12

3.1.3 JQuery简介 12

3.2 首页的前端实现 12

3.3 蜂窝问题及解决方案 14

3.3.1 蜂窝问题 14

3.3.2 不完美的尝试 14

3.3.3 完美的CSS3解决方案 16

3.4 本章小结 18

第4章 基于Bootstrap及其插件的后台页面开发 19

4.1 Bootstrap简介 19

4.2 使用Bootstrap完成后台页面开发 19

4.2.1 使用Bootstrap完成注册、登录、登出页面 19

4.2.2 使用Bootstrap完成后台管理页面 20

4.3 本章小结 21

第5章 基于NodeJS Express MySQL的后台逻辑开发 22

5.1 NodeJS Express MySQL简介 22

5.1.1 NodeJS简介 22

5.1.2 Express简介 22

5.1.3 MySQL简介 22

5.2 前期准备 22

5.2.1 MySQL表的设计 22

5.2.2 代码运行环境的搭建 24

5.2.3 使用Grunt压缩混淆代码 25

5.3 后台开发逻辑 25

5.3.1 编写路由表 26

5.3.2 与数据库的交互 26

5.3.3 前后端的交互 28

5.4 本章小结 28

第6章 系统优化与测试 29

6.1 系统优化 29

6.1.1 日期数据存储与输入 29

6.1.2 图片上传 29

6.1.3 富文本编辑器的选择 31

6.1.4 系统安全 32

6.2 用户界面的测试 33

6.3 本章小结 35

第7章 总结和展望 36

7.1 总结 36

7.2 展望 36

参考文献 37

致谢 38

绪论

• 1. 课题背景及意义

从1989年万维网诞生以来，互联网技术飞速发展。据第34次中国互联网络发展状况统计报告显示，截至2014年6月，我国网民规模达6.32亿，互联网普及率为46.9%，网站总数为273万个^[1]。

随着互联网的发展，新网络技术的不断兴起，物联网、云计算和移动终端的时代正在到来，与之相伴的是电子商务的快速崛起。电子商务在互联网的基础上，实现了交易虚拟化、交易低成本、交易透明化，大大提高了物流、资金流和信息流的有效传输和处理^[2]。据中国日报显示，2013年，我国的电子商务交易总额已超过10万元，5年翻了两番；网络零售超过1.85万亿元，5年来年均增长率超过80%，市场规模已超过美国，成为全球最大的网络零售市场。

在这样的网络大潮环境下，通过互联网为消费者提供网上商店的新型B2C（Business-to-Customer）购物环境应运而生。在B2C网站上，顾客可以很轻松地根据导购找到自己满意的商品，在中间平台担保的情况下通过便捷的支付完成交易而不用担心仓储物流等问题。本课题所研发的武汉理工大学纪念品官方网站就是一个典型的B2C网站，立足于服务校友及游客，一方面以网上商店的形式出售具有承载纪念意义的商品，另一方面通过纪念品的扩散来传播、型塑校园文化，引起人们对武汉理工大学的美好情感。

• 1. 本文的研究内容和结构组织

本文全文共分七章。本章主要讨论了武汉理工大学纪念品官网的互联网时代背景及其传播校园文化的意义。在接下来的章节中，将会按照功能介绍纪念品官网的设计和代码开发工作：