一、系统介绍

近年来,随着微信在我国互联网中的广泛使用,基于微信的小程序应用也如雨后春笋,2020年全网小程序已超600万,其中,微信小程序数量超380万。本论文所研究的正是基于微信小程序的电子商城的设计与开发。当前国内,已经是电子商务高速蓬勃发展的时代,人们通过移动互联网消费已是大势所趋。而微信,作为当前社交网络APP中的佼佼者,它不仅仅是一个单纯的手机应用程序,而是一套完整的社交网络生态系统。2017年,微信小程序正式上线,它是一种不用下载就能使用的应用,基于微信平台开发出来的小程序具有用户体验好、流量获取易、开发成本低、微信生态强的优势。它是一项真正的创新,经过几年的发展,已经构造了全新的微信小程序开发环境和开发者生态。本文所研究的"微信小程序电子商城",是根据实际用户的需求,基于微信小程序的开发模式,运用分层式的软件架构,完成了系统的功能设计、数据库设计,并在设计中充分考虑了系统的安全性。通过实际开发并运行,证明该系统稳定、易于操作,且能够满足实际商业活动的需要。 

 二、系统功能

   1.微信小程序端:首页、分类、购物车、我的、在线下单、订单列表等。
   2.后台管理端:用户管理、商品大类管理、商品小类管理、商品管理、订单管理等。

三、功能截图:

1.微信小程序端:

springboot 微信小程序支付 回调 springboot微信小程序商城_System

springboot 微信小程序支付 回调 springboot微信小程序商城_System_02

 

springboot 微信小程序支付 回调 springboot微信小程序商城_mybatis_03

springboot 微信小程序支付 回调 springboot微信小程序商城_System_04

 

springboot 微信小程序支付 回调 springboot微信小程序商城_mybatis_05

springboot 微信小程序支付 回调 springboot微信小程序商城_小程序_06

springboot 微信小程序支付 回调 springboot微信小程序商城_spring_07

 

springboot 微信小程序支付 回调 springboot微信小程序商城_System_08

 2.后台管理端:

springboot 微信小程序支付 回调 springboot微信小程序商城_spring_09

springboot 微信小程序支付 回调 springboot微信小程序商城_System_10

springboot 微信小程序支付 回调 springboot微信小程序商城_spring_11

 

springboot 微信小程序支付 回调 springboot微信小程序商城_System_12

 

springboot 微信小程序支付 回调 springboot微信小程序商城_System_13

 

springboot 微信小程序支付 回调 springboot微信小程序商城_spring_14

 

springboot 微信小程序支付 回调 springboot微信小程序商城_微信小程序_15

 四、代码实现: 

// 导入request请求工具方法
import {getBaseUrl, requestUtil} from "../../utils/requestUtil.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
 data:{
   // 轮播图数组
   swiperList: [],
   baseUrl:'',
   bigTypeList:[],
   bigTypeList_row1:[],
   bigTypeList_row2:[],
   hotProductList:[]
 },
 onLoad:function(){
  this.getSwiperList();
  this.getBigTypeList();
  this.getHotProductList();
 },
 // 获取轮播图数据
 async getSwiperList(){
  // requestUtil({ url: "/home/swiperdata" })
  //   .then(result => {
  //     this.setData({
  //       swiperList: result
  //     })
  //   })

    const result=await requestUtil({url: "/product/findSwiper"});
    
    const baseUrl=getBaseUrl();
    console.log(baseUrl);
    console.log(result)
    this.setData({
      swiperList: result.message,
      baseUrl:baseUrl
    })
  },

  // 获取商品大类数据
  async getBigTypeList(){
    const result=await requestUtil({url: "/bigType/findAll"});
    console.log(result)
    const bigTypeList_row1=result.message.filter((item,index)=>{
      return index<5;
    })
    const bigTypeList_row2=result.message.filter((item,index)=>{
      return index>=5;
    })
    this.setData({
      bigTypeList: result,
      bigTypeList_row1,
      bigTypeList_row2
    })
  },

  // 获取热卖商品
  async getHotProductList(){
    const result=await requestUtil({url: "/product/findHot"});
    console.log(result);
    this.setData({
      hotProductList:result.message
    })
  },

  // 大类点击事件处理 存储商品类别到全局数据
  handleTypeJump(event){
    var index=event.currentTarget.dataset.index;
    console.log("index:"+index)
    const app=getApp();
    app.globalData.index=index;
  
    wx.switchTab({
      url: '/pages/category/index'
    })
  }

  

})
package com.mall.controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.mall.constant.SystemConstant;
import com.mall.entity.R;
import com.mall.entity.WxUserInfo;
import com.mall.properties.WeixinProperties;
import com.mall.service.IWxUserInfoService;
import com.mall.util.HttpClientUtil;
import com.mall.util.JwtUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;


@RestController
@RequestMapping("/users")
public class UsersController {

    @Autowired
    private WeixinProperties weixinProperties;

    @Autowired
    private HttpClientUtil httpClientUtil;

    @Autowired
    private IWxUserInfoService wxUserInfoService;

    /**
     * 微信登录
     * @return
     */
    @RequestMapping("/wxlogin")
    public R wxLogin(@RequestBody WxUserInfo wxUserInfo){
        System.out.println(weixinProperties);
        System.out.println("code="+wxUserInfo.getCode());
        String jscode2sessionUrl=weixinProperties.getJscode2sessionUrl()+"?appid="+weixinProperties.getAppid()+"&secret="+weixinProperties.getSecret()+"&js_code="+wxUserInfo.getCode()+"&grant_type=authorization_code";
        System.out.println(jscode2sessionUrl);
        String result = httpClientUtil.sendHttpGet(jscode2sessionUrl); // 带code请求获取openId
        System.out.println(result);
        JSONObject jsonObject = JSON.parseObject(result);
        String openid = jsonObject.get("openid").toString(); // 获取openId
        WxUserInfo resultUserInfo = wxUserInfoService.getOne(new QueryWrapper<WxUserInfo>().eq("openid", openid));
        if(resultUserInfo==null){ // 不存在 插入用户
            wxUserInfo.setOpenid(openid);
            wxUserInfo.setRegisterDate(new Date());
            wxUserInfo.setLastLoginDate(new Date());
            wxUserInfoService.save(wxUserInfo);
            System.out.println(wxUserInfo.getId());
        }else{  // 存在 更新用户信息
            System.out.println("存在");
            resultUserInfo.setNickName(wxUserInfo.getNickName());
            resultUserInfo.setAvatarUrl(wxUserInfo.getAvatarUrl());
            resultUserInfo.setLastLoginDate(new Date());
            wxUserInfoService.updateById(resultUserInfo);
            wxUserInfo.setId(resultUserInfo.getId());
        }
        //把token返回给客户端
        String token = JwtUtils.createJWT(openid, wxUserInfo.getNickName(), SystemConstant.JWT_TTL);
        Map<String,Object> resultMap=new HashMap<String,Object>();
        resultMap.put("token",token);
        return R.ok(resultMap);

    }

}