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

简介: 手办商城系统|Springboot+vue+ElementUI手办商城系统
 

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

文末获取源码

项目编号: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 {
    @Autowired
    private 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{
  @Autowired
  private CommonService commonService;
  @Autowired
  private 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以上浏览器平稳运行,可以在不同浏览器运行,对运行的环境要求较低。

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

相关文章
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
186 1
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
118 62
|
12天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
72 13
|
20天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
1月前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
237 1
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
92 2
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
2月前
|
存储 安全 Java
打造智能合同管理系统:SpringBoot与电子签章的完美融合
【10月更文挑战第7天】 在数字化转型的浪潮中,电子合同管理系统因其高效、环保和安全的特点,正逐渐成为企业合同管理的新宠。本文将分享如何利用SpringBoot框架实现一个集电子文件签字与合同管理于一体的智能系统,探索技术如何助力合同管理的现代化。
119 4
|
2月前
|
前端开发 Java Apache
SpringBoot实现电子文件签字+合同系统!
【10月更文挑战第15天】 在现代企业运营中,合同管理和电子文件签字成为了日常活动中不可或缺的一部分。随着技术的发展,电子合同系统因其高效性、安全性和环保性,逐渐取代了传统的纸质合同。本文将详细介绍如何使用SpringBoot框架实现一个电子文件签字和合同管理系统。
114 1
|
2月前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
259 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单

热门文章

最新文章