基于微信小程序的购物系统小程序

文末联系获取源码

开发语言：Java

框架：ssm

JDK版本：JDK1.8

服务器：tomcat7

数据库：mysql 5.7/8.0

数据库工具：Navicat11

开发软件：eclipse/myeclipse/idea

Maven包：Maven3.3.9

浏览器：谷歌浏览器

小程序框架：uniapp

小程序开发软件：HBuilder X

小程序运行软件：微信开发者

一、前言介绍 

随着互联网络的发展，网上购物越来越为人们所关注。网上购物给用户提供方便的购买途径，只要简单的网络操作，足不出户，即可送货上门，种类齐全，并具有完善的售后服务。我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，购物系统设计被用户普遍使用，为方便用户能够可以随时进行购物系统设计的数据信息管理，特开发了基于购物系统设计的管理系统。

购物系统设计的设计主要是对系统所要实现的功能进行详细考虑，确定所要实现的功能后进行界面的设计，在这中间还要考虑如何可以更好的将功能及页面进行很好的结合，方便用户可以很容易明了的找到自己所需要的信息，还有系统平台后期的可操作性，通过对信息内容的详细了解进行技术的开发。

购物系统设计的开发利用现有的成熟技术参考，以源代码为模板，分析功能调整与购物系统设计管理的实际需求相结合，讨论了基于购物系统设计管理的使用。 

二、系统功能

这些功能可以充分满足购物系统设计的需求。此系统功能较为全面如下图系统功能结构如图所示。

三、系统实现

用户前台功能实现

注册用户通过注册窗口，进行在线填写自己的用户名、密码、姓名、手机、电子邮箱等等，信息编辑完成后核对信息无误后进行选择注册，系统核对用户所输入的账号信息是否准确，核对信息准确无误后系统进入到操作界面。

用户通过登录进入到系统操作界面后，可以根据需求对首页、商品信息、特价商品、我的等模块进行管理维护操作。

用户登录通过用户名、密码行页面，进入到购物系统设计主界面，进入到操作界面，进行相对应操作，如图所示。 

用户首页页面可以查看首页、商品信息、特价商品、我的等信息，进行提交操作，如图所示。 

用户进入特价商品页面可以填写商品名称、倒计时、分类、图片、规格、品牌、生产日期、保质期、价格等信息，进行加入购物车、立即购买操作，如图所示。 

用户进入用户信息页面可以填写用户名、密码、姓名、性别、头像、手机、邮箱等信息，进行保存、退出登录操作，如图所示。 

用户进入用户充值页面可以填写金额等信息，进行提交操作，如图所示。 

用户进入我的订单页面可以填写商品名称、价格、地址等信息，进行提交操作，如图所示。 

用户进入商品信息页面可以填写商品名称、分类、图片、规格、品牌、生产日期、保质期、价格等信息，进行加入购物车、立即购买操作，如图所示。

管理员后台功能实现 

管理员通过购物系统设计进行确认，管理员进入到购物系统设计主界面，管理员进入到操作界面，通过登录窗口进行在线填写自己的用户名和密码、角色进行登录，登录成功后进入到系统操作界面进行相应信息的获取，如图所示。

管理员进入到界面，通过界面的任务大厅，登录成功后进入到系统可以进行查看首页、个人中心、商品分类管理、商品信息管理、特价商品管理、用户管理、留言板管理、系统管理、订单管理等功能模块，进行相对应操作，如图所示。

管理员点击商品信息进入页面可以填写商品名称、分类、图片、规格、品牌、生产日期、保质期、价格等信息，进行详情、修改、删除操作，如图示。 

管理员进入特价商品管理界面，通过界面的任务大厅，登录成功后进入到系统可以进行查看商品名称、分类、图片、规格、品牌、生产日期、保质期、价格等信息，进行相对应操作，如图所示。

管理员进入到用户管理界面，通过界面的任务大厅，登录成功后进入到系统可以查看用户名、密码、姓名、性别、头像、手机、邮箱等信息，进行相对应操作，如图所示。 

管理员进入到留言板管理界面，通过界面的任务大厅，登录成功后进入到系统可以查看用户名、留言内容、回复内容等信息，进行相对应操作，如图所示。 

轮播图；该页面为轮播图管理界面。管理员可以在此页面进行首页轮播图的管理，通过新建操作可在轮播图中加入新的图片，还可以对以上传的图片进行修改操作，以及图片的删除，进行相对应操作，进行相对应操作，如图所示。 

管理员进入到订单管理界面，通过界面的任务大厅，登录成功后进入到系统可以查看订单编号、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等信息，进行相对应操作，如图所示。 

四、部分核心代码

form.on('submit(login)', function(data) {
                data = data.field;
                if (vue.roles.length!=1) {
                	if (!data.role) {
			    layer.msg('请选择登录用户类型', {
				time: 2000,
				icon: 5
			    });
			    return false;
			}
                } else {
                        data.role = vue.roles[0].tableName;
                }
                http.request(data.role + '/login', 'get', data, function(res) {
                    layer.msg('登录成功', {
                        time: 2000,
                        icon: 6
                    });
                    // 登录凭证
                    localStorage.setItem('Token', res.token);
                    var roleName = "";
                    if(typeof(jquery('#role:checked').attr('title')) == "undefined") {
                    	roleName = vue.roles[0].roleName;
                    } else {
                    	roleName = jquery('#role:checked').attr('title');
                    }
                    localStorage.setItem('role', roleName);
                    // 当前登录用户角色
                    localStorage.setItem('userTable', data.role);
                    localStorage.setItem('sessionTable', data.role);
                    // 用户名称
                    localStorage.setItem('adminName', data.username);
                    http.request(data.role + '/session', 'get', {}, function(res) {
                        // 用户id
                        localStorage.setItem('userid', res.data.id);
		    	if(res.data.vip) {
				localStorage.setItem('vip', res.data.vip);
		    	}
                        // 路径访问设置
                        window.location.href = '../../index.html';
                    })
                    
                });
                return false
            });

        });

        /**
         * 跳转登录
         * @param {Object} tablename
         */
        function registerClick(tablename) {
            window.location.href = '../' + tablename + '/register.html?tablename=' + tablename;
        }