海峡导报官方微信商城是一个基于微信，对微信公众号进行二次开发的应用， 采用了 ECLIPSE J2EE 开发环境和 MYSQL 数据库，配合 TOMCAT 服务器，运用

HTML5、CSS3、JAVASCRIPT、AJAX、SpringMVC、FREEMARKER  等软件开

发技术，设计并实现的跨平台、免安装的系统。系统的功能是围绕着商品购物流程设计实现的，消费者可以登录、注册、商品浏览、商品搜索、商品购买、商品收藏、地址管理、添加到购物车、立即购买、订单确认、订单删除、查看订单、取消订单、发起退单、取消退单等。

本系统旨在拓宽海峡导报实体店的销售渠道，提高实体店的经济效益和竞争力，改善消费者的购物体验，让消费者足不出户就能买到舒心的商品，为消费者提供便捷、满意的服务。

本文从研究背景开始讲述，在需求分析中讲明了可行性分析，使用的主要工具及技术，分析了系统的功能。此外，还介绍了系统设计思想，在详细设计中， 展示了系统各界面的功能实现，系统测试时所用到的测试用例。最后一章总结了全文的主要结论和不足之处，并对未来更深入的研究进行了展望。

在微信商城前端采用 HTML5、CSS3、AMAZE UI、JAVASCRIPT、JQUERY、

FREEMARKER 等技术实现的。HTML5 是时下最流行的超文本标记语言。AMAZE UI 是依托于 GitHub 及其他技术社区上的优秀资源诞生的，HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 页面更快速载入。JAVASCRIPT 是一类大量被运用于前端页面研发的脚本语言，旨在为用户提供更流畅美观的浏览效果。JQUERY 是辅助 JAVASCRIPT 研发的 JAVASCRIPT 库，JQUERY 可以让研发人员更快速地构建出页面中的动态效果等。在不同的技术配合下，为用户创造一个最佳的浏览体验。

本系统的用户主要是在移动端上进行商品购买，相对于电脑，屏幕比较小，为了让用户拥有更好的用户体验，是以前端页面采用了流布局，页面的中的元素少而精， 主色调选择了朝气的红色，辅以灰色、白色。通过页面合理的布局，加上和谐的文字图形空间组合，使页面之间有机的联系起来，使页面内的秩序和内容的关系更和谐， 让用户得到美好的视觉体验。

本系统是海峡导报官方商城销售渠道的一个扩充，实现线上线下消费的无缝衔接，提升海峡导报的官方形象，增加用户的粘度。让海峡导报销售变得规范化、智能化。推进海峡导报商城的信息化。

论文组织结构

以下为本论文的论文组织结构介绍。

1)第一章 系统简介：主要包含引言，简单的系统背景和相关技术介绍。

2)第二章 系统分析：主要包含可行性分析，介绍了主要工具及技术，需求的分析，用例图及流程图分析。

3)第三章 系统设计：主要包含系统的设计思想，以及系统框架图。

4)第四章 系统实现：主要包含系统编码，展示各个页面的实现效果。

5)第五章 系统测试：主要包含对系统部分功能的测试用例和测试结论。

6)第六章 总结与展望：主要包含对系统的总结，以及进一步工作方向。

功能性需求分析

随着科技技术的提高，人们的生活越发离不开手机、平板、电脑等电子设备，随时随地都能通过网络购物消费、跟朋友联系等，从网络中获取自己想要的信息，生活变得非常的便捷，如果没有网上销售渠道的商家，极大程度上会流失一定的用户。基于这样的背景需求，受海峡导报委托设计并实现了一个微信商城。微信商城是依托于微信公众号二次开发的产物，面向广大微信用户，他们可以通过关注公众号进入微信商城，也可以通过别人分享的链接中进入微信商城。进入商城中的会员就能跟线下实体店一样选购商品，与线下实体店的区别在于他们是通过移动端设备浏览到商品详情，从选购到付款都是线上完成，再由商家通过快递或者买家自提的方式拿到所选购的商品。

本系统的用户分为游客和会员，他们可以围绕着商品进行一系列的操作，操作罗列如下。

1)注册：游客可以注册一个商城的帐号，登录后方便后续购买等操作。

2)登录：会员登录，可以查看自己的购物车、会员中心，并进行相应增、删、改操作。

3)商品浏览：游客、会员都可以浏览商品，点击购买时提示登录，然后对商品数量进行增、减。

4)商品搜索：包含对商品的全文搜索。

5)商品购买：包括商品详情页中的立即购买和从购物车中的购买操作。

6)地址管理：会员可以对地址进行增、删、改操作。

7)订单管理：根据订单状态的不同，会员可以进行不同的操作。

① 待付款状态：取消订单、付款、显示订单信息。

② 待发货状态：申请退单、显示订单信息。

③ 已发货状态：申请退单、显示订单信息。

④ 交易关闭状态：删除订单、显示订单信息。

⑤ 收货确认状态：确认收货、申请退单、删除订单、显示订单信息。

⑥ 交易完成状态：删除订单、显示订单信息 退单状态。

⑦ 未退款状态：显示退单信息、取消退单。

⑧ 退款中状态：显示退单信息。

⑨ 完成退款状态：显示退单信息、删除退单。

⑩ 拒绝退款状态：显示退单信息。