摘要

科技进步的飞速发展引起人们日常生活的巨大变化，电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流，人类发展的历史正进入一个新时代。在现实运用中，应用软件的工作规则和开发步骤，采用Java技术建设创意商城。

本设计主要实现集人性化、高效率、便捷等优点于一身的创意商城，完成个人资料、公共管理、用户管理、信息管理、订单列表、分类列表、商城中心等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。创意商城使用Java语言，采用基于 MVVM模式的SSM技术进行开发，使用 Eclipse 2017 CI 10 编译器编写，数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介，配合前台HTML+CSS 技术完成系统的开发。

关键词：创意商城  ssm  Java  MySQL

Abstract

The rapid development of science and technology has caused great changes in people's daily life. The rapid development of electronic information technology has made the application level of electronic information technology in various fields popular and applied. The arrival of the information age has become an irresistible fashion trend, and the history of human development is entering a new era. In practical application, the working rules and development steps of application software use Java technology to build a creative mall.

This design mainly realizes a creative mall with the advantages of humanization, efficiency and convenience, and completes the functional modules of personal data, public management, user management, information management, order list, classification list, mall center, etc. The system communicates with the server through the browser to realize data interaction and change. The system improves work efficiency and reduces errors and omissions in data storage through scientific management and convenient services. Creative Mall uses Java language, SSM technology based on MVVM mode for development, and Eclipse 2017 CI 10 compiler for compilation. In terms of data, it mainly uses Microsoft's MySQL relational database as the data storage medium, and cooperates with the front-end HTML+CSS technology to complete the system development.

Keywords: Creative Mall ssm Java MySQL

目  录

1 引言

1.1 课题背景

1.2 目的和意义

1.3 系统开发技术的特色

1.4 论文结构安排

2 创意商城的需求分析

2.1 系统可行性分析

2.1.1技术可行性分析

2.1.2经济可行性分析

2.1.3操作可行性分析

2.2 系统需求分析

2.2.1功能需求分析

2.2.2非功能性需求分析

2.3 系统用例分析

3 创意商城总体设计

3.1系统功能模块设计

3.2数据库设计

3.2.1数据库概念结构设计

3.2.2数据库逻辑结构设计

4 关键模块的设计与实现

4.1用户功能模块

4.1.1前台首页界面

4.1.2注册界面

4.1.3登录界面

4.1.4关于我们界面

4.1.5商城资讯界面

4.1.6地址管理界面

4.1.7购物管理界面

4.1.8订单管理界面

4.1.9商品详情界面

4.2管理员功能角模块

4.2.1登录界面

4.2.2公共管理界面

4.2.3用户管理界面

4.2.4信息管理界面

4.2.4商城中心管理界面

5 系统测试

5.1 系统测试的目的

5.2系统测试用例

5.2系统测试结果

6  结论

参考文献

致谢

1 引言

1.1 课题背景

 随着国内产业环境和消费市场的成熟，商品销售尤其是以商品为代表的网络销售将在今年实现更大发展。

根据预测，2016年我国商品销售交易将同比增长125.1％，交易总量将达1263亿，形成了中国商品销售的快速增长浪潮。其中，消费人群成为推动此浪潮的一大主力。究其原因，除了该人群对网络销售等新兴的商业模式接受程度较高之外，相比其他细分行业，商品销售有着更加完备的产业链条和发展后劲，为其高速增长提供了保障。

网络新型的消费方式给人们生活带来了巨大的改变，更重要的是大大改变了传统的消费行为习惯，无论是否想在网上购买东西，上网查询各种商品的相关信息，已经成为人们生活不可缺少的一部分。

1.2 目的和意义

随着Internet网络的普及、电子商务的迅猛发展以及人们生活和消费观念的改变，网络购买商品以其内容丰富、方便、快捷、低成本等优势越来越被广泛使用。 对于一个商务型企业来说，电子商务系统是其生存的理由和基础，同时也是企业对外展示信息、从事商务活动的窗口和界面。

本题目拟实现整个购买模块，实现游客浏览商品，查看商品信息的功能，实现登录用户的购买功能，完成继续购买、结账和清空清单等功能。

1.3系统开发技术的特色

（1）创意商城中的web后台管理中的后端不再使用古老的jsp+javabean+servlet技术，而是使用当前主流的ssm框架，它减少java配置代码，简化编程代码，目前ssm框架也是很多企业选择的框架之一。

（2）创意商城中的web后台管理中的前端使用的是JavaScript框架，它配合ajax和jquery可以美化页面设计。

（3）创意商城中数据库用的mysql5.7，它执行效率高。

1.4 论文结构安排

通过前期的资料查找以及对其他论文的内容借鉴，本创意商城论文主要分为以下几个章节：

第1章 交代项目的背景、目的。

第2章 对系统的需求展开分析。

第3章 阐述了网站的总体设计。

第4章 阐明了创意商城详细功能的实现，主要根据技术性的功能模块功能实现。

第5章 罗列了部分系统调试与测试的记录。

第6章 介绍了创意商城的结论。

2 创意商城的需求分析

2.1 系统可行性分析

2.1.1技术可行性分析

创意商城在数据的存储上使用的MYSQL数据库，在创意商城开发中使用了了JAVA、HTML、TOMCAT、SSM这些开发工具的使用，能够给我们的编写工作带来许多的便利。系统使用B/S模式进行开发，使系统的可扩展性和维护性更佳，减少系统配置代码，简化编程代码，目前B/S模式是目前最受欢迎的一种模式。

2.1.2经济可行性分析

在开发创意商城中所使用的开发软件像idea开发工具、tomcat服务器、SSM开发框架、MySQL5.7数据库、Photoshop图片处理软件等，这些环境从网上就能免费下载，而且网上都有安装的教程，根据教程一步一步的操作，就可以安装成功，不需要花任何费用，并且创意商城是自己设计并编码实现的，数据库是使用流行mysql进行数据的存储，开源的mysql等技术的使用，减少系统开发费用。

2.1.3操作可行性分析

此次项目设计的时候我参考了很多类似系统的成功案例，对它们的操作界面以及功能都进行了系统的分析，将众多案例结合在一起，突出以人为本简化操作，所以具有基本计算机知识的人都会操作本项目。因此操作可行性也没有问题。

2.2 系统需求分析

2.2.1功能需求分析

创意商城的设计与实现是为了让用户的使用者更加方便的进行管理商城交易相关联的一些信息，同时也有利于用户通过网页系统查看创意商城的信息，进行商品交易，查看订单信息，能够使得使用者查找某一信息时能节省大量的时间和精力，有效减少不必要的查找时间。

研究创意商城的设计与实现，是为了能够拥有界面简洁友好、操作简单以及运行稳定的智能化的一站式商品管理方式。系统的需求主要来自注册用户和管理员。

注册用户：

（1）首页信息：当用户进入本创意商城的前台的时候，首先展示在眼前的是导航栏、关于我们、商城资讯、商城中心、个人账户、个人收藏、地址管理、购物管理、订单管理、个人中心等信息，用户可以根据自己个人的需求进行查看；

（2）注册登录：在系统的右上角有登录+注册按钮，如果用户想要登录到系统当中，可以点击“登录”按钮，然后填写号用户名+密码，点击“登录”按钮，系统会对你的用户名密码进行核对，正确的话就会登录成功了，如果没有账号的话，可以点击右上角的“注册”按钮，然后根据提示输入好用户信息，就可以得到账号和密码了；

（3）关于我们：当用户点击“关于我们”这一菜单按钮，会显示管理员在后台发布的所有的网站公告，可以查看详情；

（4）商城资讯：当用户点击“商城资讯”这一菜单按钮，会显示管理员在后台发布的所有的商城资讯，可以查看详情，进行收藏、点赞、评论等；

（5）商城中心：在首页导航栏上我们会看到“商城中心”这一菜单，我们点击进入进去以后，会看到所有商品列表，我们选择想要了解商品点击，查看某一个商品信息；

（6）订单管理：用户在提交订单后，可以对提交的订单进行管理。

（7）个人账户：在首页导航栏上我们会看到“个人账户”这一菜单，我们点击进入进去以后可以对个人的资料、登录系统的密码以及自己收藏的信息进行设置管理；

（8）个人收藏：在首页导航栏上我们会看到“个人收藏”这一菜单，我们点击进入进去以后可以对商城资讯信息进行收藏、评论；

（9）地址管理：在首页导航栏上我们会看到“地址管理”这一菜单，我们点击进入进去以后可以对个人地址进行修改、添加的信息进行设置管理；

（10）购物管理：在首页导航栏上我们会看到“购物管理”这一菜单，我们点击进入进去以后可以对商城商品加入购物车；

（11）个人中心：当用户点击右上角“个人中心”这个按钮，就会进入到对应的后台进行信息的管理了；

管理员：

（1）登录：管理员在后台可以通过账号和密码进行登录，管理员的账号和密码是在数据库中直接设定的，如果忘记密码可以点击“忘记密码”进行密码找回；

（2）个人资料：管理在登录以后可以修改自己的个人资料以及对自己账号登录的密码进行修改；

（3）公共管理：管理员点击“公共管理”这一菜单会显示轮播图、关于我们这两个子菜单，管理员可以对前台展示的关于我们和轮播图进行设置；

（4）用户管理：管理员点击“用户管理”这一菜单会显示管理员和注册用户、这两个子菜单，管理员可以对这两个角色的信息进行增删改查操作；

（5）信息管理：管理员点击“信息管理”这一菜单会显示商城资讯、资讯分类这两个子菜单，管理员可以对商城资讯、资讯分类的功能进行更新维护，更好的服务于前台用户；

（6）商城中心：管理员对注册用户提交的商品订单进行管控。

2.2.2非功能性需求分析

创意商城的非功能性需求比如创意商城的安全性怎么样，可靠性怎么样，性能怎么样，可拓展性怎么样等。具体可以表示在如下2.1表格中：

表2.1 创意商城非功能需求表

安全性	主要指创意商城数据库的安装，数据库的使用和密码的设定必须合乎规范。
可靠性	可靠性是指创意商城能够安装用户的指示进行操作，经过测试，可靠性90%以上。
性能	性能是影响创意商城占据市场的必要条件，所以性能最好要佳才好。
可扩展性	比如数据库预留多个属性，比如接口的使用等确保了系统的非功能性需求。
易用性	用户只要跟着创意商城的页面展示内容进行操作，就可以了。
可维护性	创意商城开发的可维护性是非常重要的，经过测试，可维护性没有问题

2.3 系统用例分析

创意商城中注册用户角色用例图如图2.1所示：

 

图2.1 注册用户角色用例图

创意商城中管理员角色用例图如图2.2所示：

 

图2.2管理员角色用例图

3 创意商城总体设计

在上一章节中分析了创意商城的功能性需求、系统性能需求，并且根据需求分析了创意商城中的用例。那么接下来就要开始对创意商城架构、主要功能和数据库开始进行设计。

3.1系统功能模块设计

创意商城整体的功能模块包括管理员+注册用户两个模块，实现了对商城相关信息的查询管理，系统功能模块如图所示。

 

图3.1　创意商城功能模块图

3.2数据库设计

3.2.1数据库概念结构设计

创意商城的E-R图主要是根据注册用户以及管理员的实际需求设计的，用户注册以后可以查看商品信息，只有注册登录以后才可以进行购买；管理员对整个系统的公告、用户、商城中心、订单等进行综合管理。创意商城采用的是MYSQL的数据库进行存储的，数据库里面储存了很多的表信息，在此罗列出来一些主要的数据库E-R模型图。

 

图3.2 注册用户E-R关系图

 

 

图3.3 商品分类E-R关系图

 

图3.4 商城中心E-R关系图

 

图3.5 订单信息E-R关系图

 

图3.6 评论E-R关系图

 

图3.7 公告E-R关系图

 

图3.8 轮播图E-R关系图

创意商城的总E-R图如下：

 

图3.8 创意商城总E-R关系图

3.2.2数据库逻辑结构设计

（1）表registered_user实体用来存注册用户提交的注册信息；

表3.1 注册用户信息registered_user表

名称	类型	长度	不是null	主键	注释
registered_user_id	int	11	是	是	注册用户ID
full_name	varchar	64	否	否	姓名
gender	varchar	64	否	否	性别
examine_state	varchar	16	是	否	审核状态
recommend	int	11	是	否	智能推荐
user_id	int	11	是	否	用户ID
create_time	datetime	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

（2）表mall_center实体用来存管理员添加的商城中心供用户进行查看表包含了品牌、规格、标题、封面图、描述、原价、卖价、商品库存、商品分类等；

表3.2 商城中心mall_center表

名称	类型	长度	不是null	主键	注释
mall_center_id	int	11	是	是	商城中心ID
brand	varchar	64	否	否	品牌
specifications	varchar	64	否	否	规格
recommend	int	11	是	否	智能推荐
cart_title	varchar	125	否	否	标题
cart_img	text	0	否	否	封面图
cart_description	varchar	255	否	否	描述
cart_price_ago	double	8	是	否	原价
cart_price	double	8	是	否	卖价
cart_inventory	int	11	是	否	商品库存
cart_type	varchar	64	是	否	商品分类
cart_content	longtext	0	否	否	正文
cart_img_1	text	0	否	否	主图1
cart_img_2	text	0	否	否	主图2
cart_img_3	text	0	否	否	主图3
cart_img_4	text	0	否	否	主图4
cart_img_5	text	0	否	否	主图5
create_time	datetime	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

（3）表order实体用来存用户提交的订单信息，订单表包含了订单号、商品ID、商品标题、价格、原价、数量、商品分类、收货地址、联系人地址、联系人手机、邮政编号等信息；

表3.3订单信息order表

名称	类型	长度	不是null	主键	注释
order_id	int	11	是	是	订单ID
order_number	varchar	64	否	否	订单号
goods_id	mediumint	8	是	否	商品id
title	varchar	32	否	否	商品标题
img	varchar	255	否	否	商品图片
price	double	10	是	否	价格
price_ago	double	10	是	否	原价
num	int	8	是	否	数量
price_count	double	8	是	否	总价
norms	varchar	255	否	否	规格
type	varchar	64	是	否	商品分类
contact_name	varchar	32	否	否	联系人姓名
contact_email	varchar	125	否	否	联系人邮箱
contact_phone	varchar	11	否	否	联系人手机
contact_address	varchar	255	否	否	收件地址
postal_code	varchar	9	否	否	邮政编码
user_id	int	10	是	否	买家ID
merchant_id	mediumint	8	是	否	商家ID
create_time	timestamp	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间
description	varchar	255	否	否	描述
state	varchar	16	是	否	订单状态

（4）表type实体用来存放系统中管理员添加的商品分类，用户查看自己的商品分类信息，商品分类表包含了商品名称、描述、图标等信息；

表3.4商品分类type表

名称	类型	长度	不是null	主键	注释
type_id	int	11	是	是	商品分类ID
father_id	smallint	5	是	否	上级分类ID
name	varchar	255	否	否	商品名称
desc	varchar	255	否	否	描述
icon	varchar	255	否	否	图标
source_table	varchar	255	否	否	来源表
source_field	varchar	255	否	否	来源字段
create_time	timestamp	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

（5）表comment实体用来存放系统中用户提交的评论信息以及回复评论信息；

表3.5评论信息comment表

名称	类型	长度	不是null	主键	注释
comment_id	int	11	是	是	评论ID
user_id	int	11	是	否	评论人ID
reply_to_id	int	11	是	否	回复评论ID
content	longtext	0	否	否	内容
nickname	varchar	255	否	否	昵称
avatar	varchar	255	否	否	头像地址
create_time	timestamp	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间
source_table	varchar	255	否	否	来源表
source_field	varchar	255	否	否	来源字段
source_id	int	10	是	否	来源ID

（6）表notice实体用来存放系统中用户提交的评论信息以及回复评论信息；

表3.6公告信息notice表

名称	类型	长度	不是null	主键	注释
notice_id	mediumint	8	是	是	公告id
title	varchar	125	是	否	标题
content	longtext	0	否	否	正文
create_time	timestamp	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

（7）表slides实体用来存放系统中管理员添加的轮播图在首页展示，供用户查看；

表3.7轮播图信息slides表

名称	类型	长度	不是null	主键	注释
slides_id	int	10	是	是	轮播图ID
title	varchar	64	否	否	标题
content	varchar	255	否	否	内容
url	varchar	255	否	否	链接
img	varchar	255	否	否	轮播图
hits	int	10	是	否	点击量
create_time	timestamp	0	是	否	创建时间
update_time	timestamp	0	是	否	更新时间

4 关键模块的设计与实

创意商城的详细设计与实现主要是根据前面的创意商城的需求分析和创意商城的总体设计来设计页面并实现业务逻辑。主要从创意商城界面实现、业务逻辑实现这两部分进行介绍。

4.1用户功能模块

4.1.1前台首页界面

当进入创意商城的时候，首先映入眼帘的是系统的导航栏、轮播图以及公告信息、物流资讯，同时可以输入关键词对创意商城的内容进行检索，右上角是用户登录以及注册按钮，其主界面展示如下图4.1所示。

                   

 

图4.1　首页界面图

4.1.2注册界面

不是创意商城中用户的是可以在线进行注册的，当用户点击右上角“注册”按钮的时候，当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号等信息后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可注册成功。其用户注册界面展示如下图4.2所示。

 

图4.2 注册界面图

注册关键代码如下所示。

/**

     * 注册

     * @return

     */

    @PostMapping("register")

    public Map<String, Object> signUp(HttpServletRequest request) throws IOException {

        // 查询用户

        Map<String, String> query = new HashMap<>();

        Map<String,Object> map = service.readBody(request.getReader());

        query.put("username",String.valueOf(map.get("username")));

        List list = service.selectBaseList(service.select(query, new HashMap<>()));

        if (list.size()>0){

            return error(30000, "用户已存在");

        }

        map.put("password",service.encryption(String.valueOf(map.get("password"))));

        service.insert(map);

        return success(1);

}

    public Map<String,Object> readBody(BufferedReader reader){

        BufferedReader br = null;

        StringBuilder sb = new StringBuilder("");

        try{

            br = reader;

            String str;

            while ((str = br.readLine()) != null){

                sb.append(str);

            }

            br.close();

            String json = sb.toString();

            return JSONObject.parseObject(json, Map.class);

        }catch (IOException e){

            e.printStackTrace();

        }finally{

            if (null != br){

                try{

                    br.close();

                }catch (IOException e){

                    e.printStackTrace();

                }

            }

        }

        return null;

    }

    public void insert(Map<String,Object> body){

        E entity = JSON.parseObject(JSON.toJSONString(body),eClass);

        baseMapper.insert(entity);

        log.info("[{}] - 插入操作：{}",entity);

}

4.1.3登录界面

创意商城中的前台上注册后的用户是可以通过自己的username和password进行登录的，当会员输入完整的自己的username和password信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的username和password在数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到创意商城的首页中；否则将会提示相应错误信息，登录界面如下图4.3所示。

 

图4.3登录界面图

登录关键代码如下所示。

 /**

     * 登录

     * @param data

     * @param httpServletRequest

     * @return

     */

    @PostMapping("login")

    public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {

        log.info("[执行登录接口]");

        String username = data.get("username");

        String email = data.get("email");

        String phone = data.get("phone");

        String password = data.get("password");

        List resultList = null;

        QueryWrapper wrapper = new QueryWrapper<User>();

        Map<String, String> map = new HashMap<>();

        if(username != null && "".equals(username) == false){

            map.put("username", username);

            resultList = service.selectBaseList(service.select(map, new HashMap<>()));

        }

        else if(email != null && "".equals(email) == false){

            map.put("email", email);

            resultList = service.selectBaseList(service.select(map, new HashMap<>()));

        }

        else if(phone != null && "".equals(phone) == false){

            map.put("phone", phone);

            resultList = service.selectBaseList(service.select(map, new HashMap<>()));

        }else{

            return error(30000, "账号或密码不能为空");

        }

        if (resultList == null || password == null) {

            return error(30000, "账号或密码不能为空");

        }

        //判断是否有这个用户

        if (resultList.size()<=0){

            return error(30000,"用户不存在");

        }

        User byUsername = (User) resultList.get(0);

        Map<String, String> groupMap = new HashMap<>();

        groupMap.put("name",byUsername.getUserGroup());

        List groupList = userGroupService.selectBaseList(userGroupService.select(groupMap, new HashMap<>()));

        if (groupList.size()<1){

            return error(30000,"用户组不存在");

        }

        UserGroup userGroup = (UserGroup) groupList.get(0);

        //查询用户审核状态

        if (!StringUtils.isEmpty(userGroup.getSourceTable())){

            String res = service.selectExamineState(userGroup.getSourceTable(),byUsername.getUserId());

            if (res==null){

                return error(30000,"用户不存在");

            }

            if (!res.equals("已通过")){

                return error(30000,"该用户审核未通过");

            }

        }

        //查询用户状态

        if (byUsername.getState()!=1){

            return error(30000,"用户非可用状态，不能登录");

        }

        String md5password = service.encryption(password);

        if (byUsername.getPassword().equals(md5password)) {

            // 存储Token到数据库

            AccessToken accessToken = new AccessToken();

            accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));

            accessToken.setUser_id(byUsername.getUserId());

            tokenService.save(accessToken);

            // 返回用户信息

            JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));

            user.put("token", accessToken.getToken());

            JSONObject ret = new JSONObject();

            ret.put("obj",user);

            return success(ret);

        } else {

            return error(30000, "账号或密码不正确");

        }

}

    public String select(Map<String,String> query,Map<String,String> config){

        StringBuffer sql = new StringBuffer("select ");

        sql.append(config.get(FindConfig.FIELD) == null || "".equals(config.get(FindConfig.FIELD)) ? "*" : config.get(FindConfig.FIELD)).append(" ");

        sql.append("from ").append("`").append(table).append("`").append(toWhereSql(query, "0".equals(config.get(FindConfig.LIKE))));

        if (config.get(FindConfig.GROUP_BY) != null && !"".equals(config.get(FindConfig.GROUP_BY))){

            sql.append("group by ").append(config.get(FindConfig.GROUP_BY)).append(" ");

        }

        if (config.get(FindConfig.ORDER_BY) != null && !"".equals(config.get(FindConfig.ORDER_BY))){

            sql.append("order by ").append(config.get(FindConfig.ORDER_BY)).append(" ");

        }

        if (config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE))){

            int page = config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE)) ? Integer.parseInt(config.get(FindConfig.PAGE)) : 1;

            int limit = config.get(FindConfig.SIZE) != null && !"".equals(config.get(FindConfig.SIZE)) ? Integer.parseInt(config.get(FindConfig.SIZE)) : 10;

            sql.append(" limit ").append( (page-1)*limit ).append(" , ").append(limit);

        }

        log.info("[{}] - 查询操作，sql: {}",table,sql);

        return sql.toString();

}

    public List selectBaseList(String select) {

        List<Map<String,Object>> mapList = baseMapper.selectBaseList(select);

        List<E> list = new ArrayList<>();

        for (Map<String,Object> map:mapList) {

            list.add(JSON.parseObject(JSON.toJSONString(map),eClass));

        }

        return list;

}

4.1.4关于我们界面

用户在点击导航栏上面的关于我们后，就可以搜索查看网站公告信息，用户根据自己的喜好可以进行交流，关于我们界面如下图4.4所示。

 

图4.4关于我们界面图

4.1.5商城资讯界面

当访客点击创意商城中导航栏上的“商城资讯”后将会进入到该“商城资讯”列表的界面，然后选择想要看的商城资讯，点击进入到详细界面，在详细界面可以收藏+点赞+评论等操作，商城资讯界面如下图4.5所示。

 

图4.5商城资讯界面图

4.1.6地址管理界面

当用户点击“地址管理”右后，就回去显示出目前现有的地址，也可以添加新的地址，界面如下图4.6所示。

 

图4.6地址管理界面图

4.1.7购物管理界面

当用户点击“购物管理”链接后就进入自己加入购物车的商品的界面展示，界面如下图4.7所示。

 

图4.7购物管理界面图

4.1.8订单管理界面

当用户点击“订单管理”链接后就进入自己购买的订单的界面展示，界面如下图4.8所示。

 

图4.8订单管理界面图

4.1.9商品详情界面

当访客点击了任意商品后将会进入该款商品的详情界面，可以了解到该商品的图片信息、商品信息、价钱信息等，同时可以对该商品进行加购+立即购买+收藏+点赞+评论，商品详情展示页面如图4-9所示。

 

图4.9商品详情界面图

4.2管理员功能角模块

创意商城的理员拥有最高的权限，可以对用户信息、系统信息以及创意商城相关信息进行管控。

4.2.1登录界面

管理员在后台可以通过账号和密码进行登录，管理员的账号和密码是在数据库中直接设定的，如果忘记密码可以点击“忘记密码”进行密码找回。界面展示如下图4.10所示。

            

 

图4.10登录界面图       

关键代码如下：

/**

 * 用户组：用于用户前端身份和鉴权(UserGroup)表实体类

 *

 * @author xxx

 *@since 202X-XX-XX

 */

@TableName("user_group")

@Data

@EqualsAndHashCode(callSuper = false)

public class UserGroup implements Serializable {

    private static final long serialVersionUID = 968356951391304707L;

    /**

     * 用户组ID：[0,8388607]

     */

    @TableId(value = "group_id", type = IdType.AUTO)

    private Integer groupId;

    /**

     * 显示顺序：[0,1000]

     */

    @TableField(value = "display")

    private Integer display;

    /**

     * 名称：[0,16]

     */

    @TableField(value = "name")

    private String name;

    /**

     * 描述：[0,255]描述该用户组的特点或权限范围

     */

    @TableField(value = "description")

    private String description;

    /**

     * 来源表：

     */

    @TableField(value = "source_table")

    private String sourceTable;

    /**

     * 来源字段：

     */

    @TableField(value = "source_field")

    private String sourceField;

    /**

     * 注册位置:

     */

    @TableField(value = "register")

    private String register;

    /**

     * 创建时间:

     */

    @TableField(value = "create_time")

    private Timestamp createTime;

    /**

     * 更新时间:

     */

    @TableField(value = "update_time")

    private Timestamp updateTime;

}

    /**

     * 所在用户组：[0,32767]决定用户身份和权限

     */

    @TableField(value = "user_group")

private String userGroup;

/**

 * 用户组：用于用户前端身份和鉴权(UserGroup)表控制层

 *

 */

@RestController

@RequestMapping("user_group")

public class UserGroupController extends BaseController<UserGroup, UserGroupService> {

    /**

     * 服务对象

     */

    @Autowired

    public UserGroupController(UserGroupService service) {

        setService(service);

    }

}

4.2.2公共管理界面

管理员点击“公共管理”这一菜单会显示轮播图、关于我们这两个子菜单，管理员可以对前台展示的关于我们和轮播图进行设置，界面如下图4.11所示。

 

图4.11 公共管理界面图

  公共管理关键代码如下：

@RequestMapping(value = "/del")

    @Transactional

    public Map<String, Object> del(HttpServletRequest request) {

        service.delete(service.readQuery(request), service.readConfig(request));

        return success(1);

}

4.2.3用户管理界面

管理员点击“用户管理”这一菜单会显示管理员和注册用户这两个子菜单，管理员可以对这两个角色的信息进行增删改查操作。界面如下图4.12所示。

              

 

图4.12　用户管理界面图

4.2.4信息管理界面

 创意商城中的管理人员在“信息管理”这一菜单中是可以对创意商城内的商城资讯、资讯分类信息进行维护和管理的，界面如下图4.13所示。

 

图4.13　信息管理界面图

信息管理关键代码如下所示。

 @RequestMapping("/get_obj")

    public Map<String, Object> obj(HttpServletRequest request) {

        List resultList = service.selectBaseList(service.select(service.readQuery(request), service.readConfig(request)));

        if (resultList.size() > 0) {

            JSONObject jsonObject = new JSONObject();

            jsonObject.put("obj",resultList.get(0));

            return success(jsonObject);

        } else {

            return success(null);

        }

}

4.2.4商城中心管理界面

管理员点击“商城中心”会显示出所有的商城中心信息，支持输入注册用户名称对商城信息进行查询，如果想要添加新的商城信息，点击“添加”按钮，输入封面图、卖价、原价、商品库存、商品分类、品牌、规格等信息，点击“提交”按钮就可以添加了，同时可以选择某一条商城信息，点击“删除”进行删除。界面如下图4.14所示。

                 

图4.14 商城中心界面图

 

 商城中心关键代码如下：

@PostMapping("/add")

    @Transactional

    public Map<String, Object> add(HttpServletRequest request) throws IOException {

        service.insert(service.readBody(request.getReader()));

        return success(1);

    }

    @Transactional

    public Map<String, Object> addMap(Map<String,Object> map){

        service.insert(map);

        return success(1);

}

5 系统测试与结果分析

5.1系统测试的目的

系统开发到了最后一个阶段那就是系统测试，系统测试对软件的开发其实是非常有必要的。因为没什么系统一经开发出来就可能会尽善尽美，再厉害的系统开发工程师也会在系统开发的时候出现纰漏，系统测试能够较好的改正一些bug，为后期系统的维护性提供很好的支持。通过系统测试，开发人员也可以建立自己对系统的信心，为后期的系统版本的跟新提供支持。

5.2 系统测试用例

系统测试包括：用户登录功能测试、商品展示功能测试、商品添加、商品搜索、密码修改功能测试，如表5-1、5-2、5-3、5-4、5-5所示：

用户登录功能测试：

表5-1 用户登录功能测试表

用例名称	用户登录系统
目的	测试用户通过正确的用户名和密码可否登录功能
前提	未登录的情况下
测试流程	1) 进入登录页面 2) 输入正确的用户名和密码
预期结果	用户名和密码正确的时候，跳转到登录成功界面，反之则显示错误信息，提示重新输入
实际结果	实际结果与预期结果一致

商品查看功能测试：

表5-2 商品查看功能测试表

用例名称	商品查看
目的	测试商品查看功能
前提	用户登录
测试流程	点击商品列表
预期结果	可以查看到所有商品信息
实际结果	实际结果与预期结果一致

管理员添加校园论坛界面测试：

表5-3 管理员添加商品界面测试表

用例名称	商品发布测试用例
目的	测试商品发布功能
前提	用户正常登录情况下
测试流程	1）点击商品信息管理就，然后点击添加后并填写信息。 2）点击进行提交。
预期结果	提交以后，页面首页会显示新的商品信息
实际结果	实际结果与预期结果一致

商品搜索功能测试：

表5-4商品搜索功能测试表

用例名称	商品搜索测试
目的	测试商品搜索功能
前提	无
测试流程	1）在搜索框填入搜索关键字。 2）点击搜索按钮。
预期结果	页面显示包含有搜索关键字的商品
实际结果	实际结果与预期结果一致

密码修改功能测试：

表5-5 密码修改功能测试表

用例名称	密码修改测试用例
目的	测试管理员密码修改功能
前提	管理员用户正常登录情况下
测试流程	1）管理员密码修改并完成填写。 2）点击进行提交。
预期结果	使用新的密码可以登录
实际结果	实际结果与预期结果一致

5.3 系统测试结果

通过编写创意商城的测试用例，已经检测完毕用户登录模块、商品查看模块、商品添加模块、商品搜索模块、密码修改功能测试，通过这5大模块为创意商城的后期推广运营提供了强力的技术支撑。

6  结论

在开发本创意商城之前我胸有成竹，觉得很简单，但在实际的开发中我发现了自身的很多问题，许多编程思想和方法都还没有掌握牢靠，比如Bootsatrp、Jquery、AJAX 、Spring、SpringMVC、mybeatis等许多Java Web开发技术，通过开发这个创意商城我成长了很多，懂得了做什么事情都要脚踏实地，不能眼高手低，在本次创意商城的开发中我逐渐掌握逐渐熟悉的技术。

本次创意商城的开发中我还学会了很多，例如良好的编程思想和完善的规划思想。在着手编程之前需要罗列出程序框架的大概，脑海中构建出程序的主题框架。做好这一步我们才能胸有成竹的经行开发项目。当设计框架了熟于心之后，需要思考本次编程所需的主要知识点和技术点，并充分学习。如此一来项目的开发才能循序渐进、如丝般顺滑，长久以往就能养成良好的开发习惯。一个程序好不好还要看出的bug多不多，如果在项目完成前做好bug的查验与预防可能发生的事故才能保证程序的稳定长久性运行。如果项目在完工后出现各种问题自己，那么在进入社会后，不仅会给公司团队带来麻烦和增加不必要的工作，还会导致客户流失，公司对自己的评价下降。

在本次项目中我也暴露了诸多问题。对于Java的编程知识有所欠缺，环境配置和算法上出现诸多问题，时常导致项目运行出错，或者目标的实现有问题。或者实现想法时算法未优化，使得代码冗长，程序运行不顺畅。