手办商城系统|Springboot+vue+ElementUI手办商城系统

作者主页：编程指南针

作者简介：Java领域优质创作者、CSDN博客专家、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师

主要内容：Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助

收藏点赞不迷路关注作者有好处

文末获取源码

项目编号：BS-SC-040

一，项目简介

基于SpringBoot手办周边系统功能结构图如图3-1所示：

图1-1 功能结构图

本项目基于Spring Boot+Vue搭建的前后端分离手办周边商城系统主要有用户管理功能、商品管理功能、购物车管理功能、订单管理功能、角色管理功能等，一共分为七个大的核心模块：

前台管理系统：

（1）用户功能模块：用户可以进行登录注册与注销操作，并且可以对个人信息进行响应的修改。

（2）手办功能模块：用户可以搜索查看自己想要的手办，也可以点击手办进行查看手办的详细信息。

（3）购物车管理模块：用户可以把自己感兴趣的商品加入购物车，点击购物车查看购物车信息，可以的对购物车内的商品进行修改，用账号余额对购物车进行结算。

（4）订单功能模块：用户点击订单查看自己的所有订单信息，看到当前订单状态，对已完成的订单进行评价。

后台管理系统：

（5）用户管理模块：管理员可以对普通用户信息进行相应的增删改查操作。

（6）手办资讯管理：管理员可以对商品资讯进行相应的增删改查操作，向用户进行商品推荐。

（7）商品管理模块：管理员可以对商品的信息进行修改，增加新的商品，删除掉不用的商品。

（8）轮播图管理模块：管理员可以对轮播图的信息进行修改，增加新的轮播图，根据优惠在首页显示推荐商品轮播图，实时修改轮播图信息。

本系统采用B/S架构进行设计，主要针对PC端用户使用的，不需要专门的客户端，只需要浏览器就能使用，所以对于其他架构来说方便就是它的优势。它是跨平台的，是基于网页语言的、操作系统对其没有太大的影响。系统架构设计图如下图4-1所示：

图2-1 系统架构设计图

二，环境介绍

语言环境：Java: jdk1.8

数据库：Mysql: mysql5.7

应用服务器：Tomcat: tomcat8.5.31

开发工具：IDEA或eclipse

后台开发技术：Springboot+Mybatis

前台开发技术：Vue+nodejs+ElementUI

特色：支付宝沙箱支付、前后端分离开发

三，系统展示

3.1 前端功能实现

商城首页

商品信息

商品资讯

商品详情

购物车

下单

我的订单

个人中心

支付宝沙箱在线充值

个人后台管理

3.2 后端功能实现

管理员登陆

用户管理

商品分类管理

商品信息管理

订单评价管理

轮播图管理

商品资讯管理

订单管理

四，核心代码展示

package com.controller;import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;import com.entity.CartEntity;
import com.entity.view.CartView;import com.service.CartService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.CommonUtil;/*** 购物车表* 后端接口* @author * @email * @date 2021-03-13 12:49:52*/
@RestController
@RequestMapping("/cart")
public class CartController {@Autowiredprivate CartService cartService;/*** 后端列表*/@RequestMapping("/page")public R page(@RequestParam Map<String, Object> params,CartEntity cart,HttpServletRequest request){if(!request.getSession().getAttribute("role").toString().equals("管理员")) {cart.setUserid((Long)request.getSession().getAttribute("userId"));}EntityWrapper<CartEntity> ew = new EntityWrapper<CartEntity>();PageUtils page = cartService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, cart), params), params));return R.ok().put("data", page);}/*** 前端列表*/@RequestMapping("/list")public R list(@RequestParam Map<String, Object> params,CartEntity cart, HttpServletRequest request){EntityWrapper<CartEntity> ew = new EntityWrapper<CartEntity>();PageUtils page = cartService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, cart), params), params));return R.ok().put("data", page);}/*** 列表*/@RequestMapping("/lists")public R list( CartEntity cart){EntityWrapper<CartEntity> ew = new EntityWrapper<CartEntity>();ew.allEq(MPUtil.allEQMapPre( cart, "cart")); return R.ok().put("data", cartService.selectListView(ew));}/*** 查询*/@RequestMapping("/query")public R query(CartEntity cart){EntityWrapper< CartEntity> ew = new EntityWrapper< CartEntity>();ew.allEq(MPUtil.allEQMapPre( cart, "cart")); CartView cartView =  cartService.selectView(ew);return R.ok("查询购物车表成功").put("data", cartView);}/*** 后端详情*/@RequestMapping("/info/{id}")public R info(@PathVariable("id") Long id){CartEntity cart = cartService.selectById(id);return R.ok().put("data", cart);}/*** 前端详情*/@RequestMapping("/detail/{id}")public R detail(@PathVariable("id") Long id){CartEntity cart = cartService.selectById(id);return R.ok().put("data", cart);}/*** 后端保存*/@RequestMapping("/save")public R save(@RequestBody CartEntity cart, HttpServletRequest request){cart.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());//ValidatorUtils.validateEntity(cart);cart.setUserid((Long)request.getSession().getAttribute("userId"));cartService.insert(cart);return R.ok();}/*** 前端保存*/@RequestMapping("/add")public R add(@RequestBody CartEntity cart, HttpServletRequest request){cart.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());//ValidatorUtils.validateEntity(cart);cartService.insert(cart);return R.ok();}/*** 修改*/@RequestMapping("/update")public R update(@RequestBody CartEntity cart, HttpServletRequest request){//ValidatorUtils.validateEntity(cart);cartService.updateById(cart);//全部更新return R.ok();}/*** 删除*/@RequestMapping("/delete")public R delete(@RequestBody Long[] ids){cartService.deleteBatchIds(Arrays.asList(ids));return R.ok();}/*** 提醒接口*/@RequestMapping("/remind/{columnName}/{type}")public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, @PathVariable("type") String type,@RequestParam Map<String, Object> map) {map.put("column", columnName);map.put("type", type);if(type.equals("2")) {SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");Calendar c = Calendar.getInstance();Date remindStartDate = null;Date remindEndDate = null;if(map.get("remindstart")!=null) {Integer remindStart = Integer.parseInt(map.get("remindstart").toString());c.setTime(new Date()); c.add(Calendar.DAY_OF_MONTH,remindStart);remindStartDate = c.getTime();map.put("remindstart", sdf.format(remindStartDate));}if(map.get("remindend")!=null) {Integer remindEnd = Integer.parseInt(map.get("remindend").toString());c.setTime(new Date());c.add(Calendar.DAY_OF_MONTH,remindEnd);remindEndDate = c.getTime();map.put("remindend", sdf.format(remindEndDate));}}Wrapper<CartEntity> wrapper = new EntityWrapper<CartEntity>();if(map.get("remindstart")!=null) {wrapper.ge(columnName, map.get("remindstart"));}if(map.get("remindend")!=null) {wrapper.le(columnName, map.get("remindend"));}if(!request.getSession().getAttribute("role").toString().equals("管理员")) {wrapper.eq("userid", (Long)request.getSession().getAttribute("userId"));}int count = cartService.selectCount(wrapper);return R.ok().put("count", count);}}

package com.controller;import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import org.apache.commons.lang3.StringUtils;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import com.annotation.IgnoreAuth;
import com.baidu.aip.face.AipFace;
import com.baidu.aip.face.MatchRequest;
import com.baidu.aip.util.Base64Util;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.ConfigEntity;
import com.service.CommonService;
import com.service.ConfigService;
import com.utils.BaiduUtil;
import com.utils.FileUtil;
import com.utils.R;/*** 通用接口*/
@RestController
public class CommonController{@Autowiredprivate CommonService commonService;@Autowiredprivate ConfigService configService;private static AipFace client = null;private static String BAIDU_DITU_AK = null;@RequestMapping("/location")public R location(String lng,String lat) {if(BAIDU_DITU_AK==null) {BAIDU_DITU_AK = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "baidu_ditu_ak")).getValue();if(BAIDU_DITU_AK==null) {return R.error("请在配置管理中正确配置baidu_ditu_ak");}}Map<String, String> map = BaiduUtil.getCityByLonLat(BAIDU_DITU_AK, lng, lat);return R.ok().put("data", map);}/*** 人脸比对* * @param face1 人脸1* @param face2 人脸2* @return*/@RequestMapping("/matchFace")public R matchFace(String face1, String face2) {if(client==null) {/*String AppID = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "AppID")).getValue();*/String APIKey = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "APIKey")).getValue();String SecretKey = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "SecretKey")).getValue();String token = BaiduUtil.getAuth(APIKey, SecretKey);if(token==null) {return R.error("请在配置管理中正确配置APIKey和SecretKey");}client = new AipFace(null, APIKey, SecretKey);client.setConnectionTimeoutInMillis(2000);client.setSocketTimeoutInMillis(60000);}JSONObject res = null;try {File file1 = new File(ResourceUtils.getFile("classpath:static/upload").getAbsolutePath()+"/"+face1);File file2 = new File(ResourceUtils.getFile("classpath:static/upload").getAbsolutePath()+"/"+face2);String img1 = Base64Util.encode(FileUtil.FileToByte(file1));String img2 = Base64Util.encode(FileUtil.FileToByte(file2));MatchRequest req1 = new MatchRequest(img1, "BASE64");MatchRequest req2 = new MatchRequest(img2, "BASE64");ArrayList<MatchRequest> requests = new ArrayList<MatchRequest>();requests.add(req1);requests.add(req2);res = client.match(requests);System.out.println(res.get("result"));} catch (FileNotFoundException e) {e.printStackTrace();return R.error("文件不存在");} catch (IOException e) {e.printStackTrace();} return R.ok().put("data", com.alibaba.fastjson.JSONObject.parse(res.get("result").toString()));}/*** 获取table表中的column列表(联动接口)* @param table* @param column* @return*/@IgnoreAuth@RequestMapping("/option/{tableName}/{columnName}")public R getOption(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName,String level,String parent) {Map<String, Object> params = new HashMap<String, Object>();params.put("table", tableName);params.put("column", columnName);if(StringUtils.isNotBlank(level)) {params.put("level", level);}if(StringUtils.isNotBlank(parent)) {params.put("parent", parent);}List<String> data = commonService.getOption(params);return R.ok().put("data", data);}/*** 根据table中的column获取单条记录* @param table* @param column* @return*/@IgnoreAuth@RequestMapping("/follow/{tableName}/{columnName}")public R getFollowByOption(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName, @RequestParam String columnValue) {Map<String, Object> params = new HashMap<String, Object>();params.put("table", tableName);params.put("column", columnName);params.put("columnValue", columnValue);Map<String, Object> result = commonService.getFollowByOption(params);return R.ok().put("data", result);}/*** 修改table表的sfsh状态* @param table* @param map* @return*/@RequestMapping("/sh/{tableName}")public R sh(@PathVariable("tableName") String tableName, @RequestBody Map<String, Object> map) {map.put("table", tableName);commonService.sh(map);return R.ok();}/*** 获取需要提醒的记录数* @param tableName* @param columnName* @param type 1:数字 2:日期* @param map* @return*/@IgnoreAuth@RequestMapping("/remind/{tableName}/{columnName}/{type}")public R remindCount(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName, @PathVariable("type") String type,@RequestParam Map<String, Object> map) {map.put("table", tableName);map.put("column", columnName);map.put("type", type);if(type.equals("2")) {SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");Calendar c = Calendar.getInstance();Date remindStartDate = null;Date remindEndDate = null;if(map.get("remindstart")!=null) {Integer remindStart = Integer.parseInt(map.get("remindstart").toString());c.setTime(new Date()); c.add(Calendar.DAY_OF_MONTH,remindStart);remindStartDate = c.getTime();map.put("remindstart", sdf.format(remindStartDate));}if(map.get("remindend")!=null) {Integer remindEnd = Integer.parseInt(map.get("remindend").toString());c.setTime(new Date());c.add(Calendar.DAY_OF_MONTH,remindEnd);remindEndDate = c.getTime();map.put("remindend", sdf.format(remindEndDate));}}int count = commonService.remindCount(map);return R.ok().put("count", count);}/*** 单列求和*/@IgnoreAuth@RequestMapping("/cal/{tableName}/{columnName}")public R cal(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName) {Map<String, Object> params = new HashMap<String, Object>();params.put("table", tableName);params.put("column", columnName);Map<String, Object> result = commonService.selectCal(params);return R.ok().put("data", result);}/*** 分组统计*/@IgnoreAuth@RequestMapping("/group/{tableName}/{columnName}")public R group(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName) {Map<String, Object> params = new HashMap<String, Object>();params.put("table", tableName);params.put("column", columnName);List<Map<String, Object>> result = commonService.selectGroup(params);return R.ok().put("data", result);}/*** （按值统计）*/@IgnoreAuth@RequestMapping("/value/{tableName}/{xColumnName}/{yColumnName}")public R value(@PathVariable("tableName") String tableName, @PathVariable("yColumnName") String yColumnName, @PathVariable("xColumnName") String xColumnName) {Map<String, Object> params = new HashMap<String, Object>();params.put("table", tableName);params.put("xColumn", xColumnName);params.put("yColumn", yColumnName);List<Map<String, Object>> result = commonService.selectValue(params);SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");for(Map<String, Object> m : result) {for(String k : m.keySet()) {if(m.get(k) instanceof Date) {m.put(k, sdf.format((Date)m.get(k)));}}}return R.ok().put("data", result);}}

五，项目总结

本系统的主要使用对象为手办系统管理员以及消费者，由于消费者主要为年轻人群体，所以对时间的要求不高，没有限制使用的时间。本系统在浏览器运行，需要保证隐私性要强。

时间性：新品手办上架时，可能登录系统的用户较多，需要保证用户操作时服务器反应时间在5秒以内。

运行环境约束：系统可以在IE8以上浏览器平稳运行，可以在不同浏览器运行，对运行的环境要求较低。

易用性需求：本系统页面简介明了易操作，对于众多用户来说可用性较强，不需要进行培训等流程都可以操作。