基于SSM+Vue的电子商城的设计与实现

末尾获取源码
开发语言：Java
Java开发工具：JDK1.8
后端框架：SSM
前端：Vue
数据库：MySQL5.7和Navicat管理工具结合
服务器：Tomcat8.5
开发软件：IDEA / Eclipse
是否Maven项目：是

目录

一、项目简介

二、系统功能

三、系统项目截图

管理员功能实现

商品信息管理

用户管理

商品入库管理

商品出库管理

已支付订单

用户功能实现

商品信息

购物车

提交订单

已支付订单

联系客服

四、核心代码

登录相关

文件上传

封装

一、项目简介

网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。因此商城购物信息的管理计算机化，系统化是必要的。设计开发基于Vue的电子商城不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于商城购物信息的维护和检索也不需要花费很多时间，非常的便利。

基于Vue的电子商城是在MySQL中建立数据表保存信息，运用Vue框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。管理员登录进入本人后台之后，管理商品和用户，对商品进行出入库操作，管理不同状态的订单。用户查看商品资讯，收藏商品，评论商品，购买商品，查看不同状态的订单。

基于Vue的电子商城在让商城购物信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升基于Vue的电子商城提供的数据的可靠性，让系统数据的错误率降至最低。

关键词：基于Vue的电子商城；MySQL；Vue框架

二、系统功能

前面所做的功能分析，只是本系统的一个大概功能，这部分需要在此基础上进行各个模块的详细设计。

设计的管理员的详细功能见下图，管理员登录进入本人后台之后，管理商品和用户，对商品进行出入库操作，管理不同状态的订单。

设计的用户的详细功能见下图，用户查看商品资讯，收藏商品，评论商品，购买商品，查看不同状态的订单。

 


三、系统项目截图

管理员功能实现

商品信息管理

管理员权限中的商品信息管理，其运行效果见下图。管理员在当前页面增删改查商品信息，可以对商品进行入库或者出库操作，同时，管理员也能查看各个商品对应的评论信息。

 

用户管理

管理员权限中的用户管理，其运行效果见下图。管理员在后台负责对用户资料进行增删改查操作。

 

商品入库管理

管理员权限中的商品入库管理，其运行效果见下图。管理员对商品进行入库之后，其信息会显示在本页面，管理员就能修改，删除商品的入库信息。

 

商品出库管理

管理员权限中的商品出库管理，其运行效果见下图。管理员对商品的出库信息进行修改，删除，查询等操作。

 

已支付订单

管理员权限中的已支付订单管理，其运行效果见下图。用户购买并支付商品之后，管理员需要在当前页面对订单商品进行发货。

 

用户功能实现

商品信息

用户权限中的商品信息，其运行效果见下图。用户在本页面可以操作的功能比较多，可以收藏，评论本页面显示的商品，可以直接购买，也能暂时加入购物车保存商品。

 

购物车

用户权限中的购物车，其运行效果见下图。购物车帮助用户暂时保存购买的商品，方便用户一次性下单购买多种商品。

 

提交订单

用户权限中的提交订单，其运行效果见下图。用户下单支付前，收货地址和购买的商品需要再次核对清楚，最后支付订单。

 

已支付订单

用户权限中的已支付订单，其运行效果见下图。用户对订单明细进行查看，可以选择对某些误购买的商品进行退款。

 

联系客服

用户权限中的联系客服，其运行效果见下图。用户在操作基于Vue的电子商城过程中，遇到任何问题可以咨询客服，客服就负责回答用户咨询的问题。

 

四、核心代码

登录相关


package com.controller;


import java.util.Arrays;
import java.util.Calendar;
import java.util.Date;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
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.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.TokenEntity;
import com.entity.UserEntity;
import com.service.TokenService;
import com.service.UserService;
import com.utils.CommonUtil;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;

/**
 * 登录相关
 */
@RequestMapping("users")
@RestController
public class UserController{
	
	@Autowired
	private UserService userService;
	
	@Autowired
	private TokenService tokenService;

	/**
	 * 登录
	 */
	@IgnoreAuth
	@PostMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
		if(user==null || !user.getPassword().equals(password)) {
			return R.error("账号或密码不正确");
		}
		String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
		return R.ok().put("token", token);
	}
	
	/**
	 * 注册
	 */
	@IgnoreAuth
	@PostMapping(value = "/register")
	public R register(@RequestBody UserEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        userService.insert(user);
        return R.ok();
    }

	/**
	 * 退出
	 */
	@GetMapping(value = "logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("退出成功");
	}
	
	/**
     * 密码重置
     */
    @IgnoreAuth
	@RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request){
    	UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
    	if(user==null) {
    		return R.error("账号不存在");
    	}
    	user.setPassword("123456");
        userService.update(user,null);
        return R.ok("密码已重置为：123456");
    }
	
	/**
     * 列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,UserEntity user){
        EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
    	PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/list")
    public R list( UserEntity user){
       	EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
      	ew.allEq(MPUtil.allEQMapPre( user, "user")); 
        return R.ok().put("data", userService.selectListView(ew));
    }

    /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }
    
    /**
     * 获取用户的session用户信息
     */
    @RequestMapping("/session")
    public R getCurrUser(HttpServletRequest request){
    	Long id = (Long)request.getSession().getAttribute("userId");
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }

    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody UserEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        userService.insert(user);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody UserEntity user){
//        ValidatorUtils.validateEntity(user);
        userService.updateById(user);//全部更新
        return R.ok();
    }

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        userService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
}

文件上传

package com.controller;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import java.util.UUID;

import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
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 org.springframework.web.multipart.MultipartFile;

import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.entity.EIException;
import com.service.ConfigService;
import com.utils.R;

/**
 * 上传文件映射表
 */
@RestController
@RequestMapping("file")
@SuppressWarnings({"unchecked","rawtypes"})
public class FileController{
	@Autowired
    private ConfigService configService;
	/**
	 * 上传文件
	 */
	@RequestMapping("/upload")
	public R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {
		if (file.isEmpty()) {
			throw new EIException("上传文件不能为空");
		}
		String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
		File path = new File(ResourceUtils.getURL("classpath:static").getPath());
		if(!path.exists()) {
		    path = new File("");
		}
		File upload = new File(path.getAbsolutePath(),"/upload/");
		if(!upload.exists()) {
		    upload.mkdirs();
		}
		String fileName = new Date().getTime()+"."+fileExt;
		File dest = new File(upload.getAbsolutePath()+"/"+fileName);
		file.transferTo(dest);
		FileUtils.copyFile(dest, new File("C:\\Users\\Desktop\\jiadian\\springbootl7own\\src\\main\\resources\\static\\upload"+"/"+fileName));
		if(StringUtils.isNotBlank(type) && type.equals("1")) {
			ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
			if(configEntity==null) {
				configEntity = new ConfigEntity();
				configEntity.setName("faceFile");
				configEntity.setValue(fileName);
			} else {
				configEntity.setValue(fileName);
			}
			configService.insertOrUpdate(configEntity);
		}
		return R.ok().put("file", fileName);
	}
	
	/**
	 * 下载文件
	 */
	@IgnoreAuth
	@RequestMapping("/download")
	public ResponseEntity<byte[]> download(@RequestParam String fileName) {
		try {
			File path = new File(ResourceUtils.getURL("classpath:static").getPath());
			if(!path.exists()) {
			    path = new File("");
			}
			File upload = new File(path.getAbsolutePath(),"/upload/");
			if(!upload.exists()) {
			    upload.mkdirs();
			}
			File file = new File(upload.getAbsolutePath()+"/"+fileName);
			if(file.exists()){
				/*if(!fileService.canRead(file, SessionManager.getSessionUser())){
					getResponse().sendError(403);
				}*/
				HttpHeaders headers = new HttpHeaders();
			    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);    
			    headers.setContentDispositionFormData("attachment", fileName);    
			    return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers, HttpStatus.CREATED);
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
		return new ResponseEntity<byte[]>(HttpStatus.INTERNAL_SERVER_ERROR);
	}
	
}

封装

package com.utils;

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

/**
 * 返回数据
 */
public class R extends HashMap<String, Object> {
	private static final long serialVersionUID = 1L;
	
	public R() {
		put("code", 0);
	}
	
	public static R error() {
		return error(500, "未知异常，请联系管理员");
	}
	
	public static R error(String msg) {
		return error(500, msg);
	}
	
	public static R error(int code, String msg) {
		R r = new R();
		r.put("code", code);
		r.put("msg", msg);
		return r;
	}

	public static R ok(String msg) {
		R r = new R();
		r.put("msg", msg);
		return r;
	}
	
	public static R ok(Map<String, Object> map) {
		R r = new R();
		r.putAll(map);
		return r;
	}
	
	public static R ok() {
		return new R();
	}

	public R put(String key, Object value) {
		super.put(key, value);
		return this;
	}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/134436.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

记录--vue3 setup 中国省市区三级联动options最简洁写法，无需任何库

记录--vue3 setup 中国省市区三级联动options最简洁写法，无需任何库

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 在写页面的时候&#xff0c;发现表单里面有一个省市区的 options 组件要写&#xff0c;因为表单很多地方都会用到这个地址选择&#xff0c;我便以为很简单嘛。 虽然很简单的一个功能&#xff0c;但是网…
阅读更多...
C#中的扩展方法---Extension

C#中的扩展方法---Extension

C#中扩展方法是C# 3.0/.NET 3.x 新增特性&#xff0c;能够实现向现有类型中“添加”方法&#xff0c;以下主要介绍C#中扩展方法的声明及使用。 1、扩展方法的声明 扩展方法使能够向现有类型“添加”方法&#xff0c;而无需创建新的派生类型、重新编译或以其他方式修改原始类型…
阅读更多...
安全通信网络（设备和技术注解）

安全通信网络（设备和技术注解）

网络安全等级保护相关标准参考《GB/T 22239-2019 网络安全等级保护基本要求》和《GB/T 28448-2019 网络安全等级保护测评要求》 密码应用安全性相关标准参考《GB/T 39786-2021 信息系统密码应用基本要求》和《GM/T 0115-2021 信息系统密码应用测评要求》 1网络架构 1.1保证网络…
阅读更多...
开发知识点-Python

开发知识点-Python

Python从小白到入土 python渗透测试安全工具开发锦集Python安全工具编程基础第一章 Python在网络安全中的应用第一节 Python黑客领域的现状第二节 我们可以用Python做什么第三节 第一章课程内容总结 第二章 python安全应用编程入门第一节 Python正则表达式第二节 Python Web编程…
阅读更多...
虚幻引擎:如何进行关卡切换?无缝切换?

虚幻引擎:如何进行关卡切换?无缝切换?

一丶非无缝切换 在切换的时候会先断开连接,等创建好后才会链接,造成体验差 蓝图中用到的节点是 Execute Console Command 二丶无缝切换 链接的时候不会断开连接,中间不会出现卡顿,携带数据转换地图 1.需要在gamemode里面开启无缝漫游,开启之后使用上面的切换方式就可以做到无缝…
阅读更多...
VueRequest——管理请求状态库

VueRequest——管理请求状态库

文章目录 前言一、为什么选择 VueRequest&#xff1f;二、使用步骤1.安装2.用例 前言 VueRequest——开发文档 VueReques——GitHub地址 在以往的业务项目中&#xff0c;我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开…
阅读更多...
选购Ipad以及投入学习生产(玩耍)

选购Ipad以及投入学习生产(玩耍)

图片 from Pinterest Ipad Air 5 趁着2023年暑期教育优惠购入&#xff0c;Ipad Air 5 64G版本&#xff0c;附送Apple pencil 2&#xff0c;加上Apple Care服务&#xff08;2年&#xff09;&#xff0c;花费&#xffe5;4899&#xff1b; 因为我知道苹果的电池几年下来就不行了…
阅读更多...
动态规划（4）---Leetcode.746使用最小花费爬楼梯

动态规划（4）---Leetcode.746使用最小花费爬楼梯

题目 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 思路 建…
阅读更多...
Python之文件与文件夹操作及 pytest 测试习题

Python之文件与文件夹操作及 pytest 测试习题

目录 1、文本文件读写基础。编写程序&#xff0c;在 当前目录下创建一个文本文件 test.txt&#xff0c;并向其中写入字符串 hello world。2、编写一个程序 demo.py&#xff0c;要求运行该程序后&#xff0c;生成 demo_new.py 文件&#xff0c;其中内容与demo.py 一样&#xff0…
阅读更多...
C语言——求 n 以内（不包括 n）同时能被 3 和 7 整除的所有自然数之和的平方根 s，n 从键盘输入。

C语言——求 n 以内（不包括 n）同时能被 3 和 7 整除的所有自然数之和的平方根 s，n 从键盘输入。

#define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> #include<math.h> int main() {int i,n;double s0.0;printf("输入任意一个自然数&#xff1a; ");scanf("%d",&n);for(i1;i<n;i) {if(i%30&&i%70){si;}}ssqrt(s);printf(…
阅读更多...
Linux C 目录编程

Linux C 目录编程

目录编程 前言目录编程函数mkdir  创建目录rmdir  删除目录opendir  打开目录readdir  读取目录stat  获取文件信息chdir  跳转目录closedir  关闭目录 判断文件类型的宏遍历指定目录及子目录下所有.c文件示例 前言 相较于文件编程&#xff0c;目录编程也有一套自…
阅读更多...
druid连接池异常GetConnectionTimeoutException（原创）

druid连接池异常GetConnectionTimeoutException（原创）

问题描述 有天&#xff0c;测试同学突然反馈系统页面查询缓慢&#xff0c;影响使用&#xff0c;我查了日志报&#xff1a; druid 连接池异常 GetConnectionTimeoutException wait millis 9120, active 20, maxActive 20 creating 0 结论先行 经一系列排查&#xff0c;得出数…
阅读更多...
在线生成二维码--支持彩色二维码和包含Logo

在线生成二维码--支持彩色二维码和包含Logo

具体请前往&#xff1a;在线二维码生成工具--可将网址等内容生成为指定大小&#xff0c;指定颜色的彩色二维码,同时支持添加Logo
阅读更多...
立冬特辑-----链表OJ题优选合集～～

立冬特辑-----链表OJ题优选合集～～

目录 ​​​​​​​前言&#x1f333; 1.链表中倒数第k个结点&#x1f338; 1.1 思路 1.2 代码 2. 链表的回文结构&#x1fab8; 2.1 思路 2.2 代码 3.相交链表&#x1f32a;️ 3.1 思路 3.2 代码 4.环形链表I&#x1f30a;&#x1f6f3;️ 4.1 思路 4.2 代码 4…
阅读更多...
21.合并两个有序链表（LeetCode）

21.合并两个有序链表（LeetCode）

合并两个有序链表&#xff0c;是链表的经典题之一 &#xff0c;这里给出一种经典解法 想法一 创建head和tail两个指针&#xff0c;从头比较两个链表&#xff0c;取小的尾插&#xff0c;注意一开始指针的初始化&#xff0c;接着就是不断利用tail指针&#xff0c;链接比较之中较…
阅读更多...
ChatGPT+Roblox，元宇宙的AI叙事逻辑#Leveling Up

ChatGPT+Roblox，元宇宙的AI叙事逻辑#Leveling Up

MixCopilot 嗨&#xff0c;亲爱的听众朋友们&#xff01;欢迎收听我们的播客节目&#xff01;我是你们的主播&#xff1a;MixCopilot 混合副驾。今天我们要为大家带来的是我们的AI革命系列节目之一。这个系列节目聚焦于AI领域的一些最有影响力的建设者&#xff0c;他们将会讨论…
阅读更多...
2023.11.11 关于 Spring 中 Bean 的作用域

2023.11.11 关于 Spring 中 Bean 的作用域

目录 Bean 的作用域 作用域的定义 Singleton&#xff08;单例作用域&#xff09; Prototype&#xff08;原型作用域&#xff09; Request&#xff08;请求作用域&#xff09; Session&#xff08;会话请求&#xff09; Application&#xff08;全局作用域&#xff09; …
阅读更多...
unreal engine oculus 在vr场景中fade in ， fade out

unreal engine oculus 在vr场景中fade in ， fade out

https://www.youtube.com/watch?vxRA7hRiXwuA
阅读更多...
第一百六十八回 NavigationBar组件

第一百六十八回 NavigationBar组件

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"如何修改按钮的形状"相关的内容&#xff0c;本章回中将 介绍NavigationBar组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…
阅读更多...
YOLOv8-Seg推理详解及部署实现

YOLOv8-Seg推理详解及部署实现

目录 前言一、YOLOv8-Seg推理(Python)1. YOLOv8-Seg预测2. YOLOv8-Seg预处理3. YOLOv8-Seg后处理4. YOLOv8-Seg推理 二、YOLOv8-Seg推理(C)1. ONNX导出2. YOLOv8-Seg预处理3. YOLOv8-Seg后处理4. YOLOv8推理 三、YOLOv8-Seg部署1. 源码下载2. 环境配置2.1 配置CMakeLists.txt2.…
阅读更多...
最新文章

Copyright @ 2022~2023