基于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;
	}
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于SSMSpring+SpringMVC+Mybatis)和Vue.js开发的电子商城系统是一个综合性的电子商务平台,它的主要功能包括:商品管理、订单管理、用户管理、支付管理等。 系统采用前后端分离的架构模式,前端采用了目前非常流行的Vue.js框架,后端采用了Spring+SpringMVC+Mybatis框架,通过RESTful API实现了前后端的数据交互。系统还集成了很多插件和组件,如echarts、zTree、layer等,增强了系统的可用性和用户体验。 具体来说,系统的核心功能如下: 1、商品管理:支持商品分类、添加、修改、删除,可以进行多图上传、富文本编辑等操作,支持商品详情和商品属性的展示和管理。 2、订单管理:支持订单生成、修改、删除、发货等操作,包括订单状态的查询、导出、打印等功能,可以进行订单统计和分析。 3、用户管理:支持用户的注册、登录、修改、注销等操作,以及用户的基本信息、购物记录、收货地址等的管理。 4、支付管理:支持支付宝、微信等多种支付方式,快速安全实现订单支付,增强用户购物体验。 总之,基于SSM+Vue电子商城系统是一个高效、稳定、安全、易用的电子商务平台,它能帮助企业实现快速构建电商平台、提高销售效率、降低运营成本。部署该系统需要一定的技术功底和相关环境的支持,建议搭建在云服务器或私有服务器上,具体操作请参考部署说明。
SSMSpring+SpringMVC+MyBatis)是一种常用的Java后端开发框架,而Vue是一种流行的前端开发框架。将它们结合起来进行前后端分离开发可以提高开发效率和代码的可维护性。 在SSM Vue前后端分离项目中,后端使用SSM框架进行开发,前端使用Vue框架进行开发。前后端通过API接口进行数据交互。 下面是一个简单的SSM Vue前后端分离项目的示例: 1. 后端开发: - 使用Spring框架进行依赖注入和事务管理。 - 使用SpringMVC框架处理HTTP请求和响应。 - 使用MyBatis框架进行数据库操作。 - 设计实现RESTful API接口,提供数据的增删改查功能。 2. 前端开发: - 使用Vue框架进行组件化开发。 - 使用Vue Router进行路由管理,实现页面跳转和导航。 - 使用Vuex进行状态管理,实现数据共享和响应式更新。 - 使用Axios库发送HTTP请求,与后端API进行数据交互。 - 使用Element UI或其他UI库进行页面布局和样式设计。 3. 前后端交互: - 前端通过Axios库发送HTTP请求到后端API接口,获取数据或提交数据。 - 后端接收请求,处理业务逻辑,访问数据库进行数据操作。 - 后端将处理结果返回给前端前端根据结果进行相应的展示或处理。 这样的前后端分离项目可以提高开发效率和团队协作能力,前后端可以独立开发和测试,减少了耦合性,同时也方便进行项目的扩展和维护。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值