基于Vue的电子商城的设计与实现
系统描述
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。因此商城购物信息的管理计算机化，系统化是必要的。设计开发基于Vue的电子商城不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于商城购物信息的维护和检索也不需要花费很多时间，非常的便利。
基于Vue的电子商城是在MySQL中建立数据表保存信息，运用Vue框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。管理员登录进入本人后台之后，管理商品和用户，对商品进行出入库操作，管理不同状态的订单。用户查看商品资讯，收藏商品，评论商品，购买商品，查看不同状态的订单。
基于Vue的电子商城在让商城购物信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升基于Vue的电子商城提供的数据的可靠性，让系统数据的错误率降至最低。
技术描述
文章末尾获取源码
开发语言：Java
技术框架：SSM
前端语言：VueHTML
持久层框架：Mybatis
服务器：Tomcat78910
数据库：MySQL5.7以上
项目管理工具：Maven
项目开发工具：IDEAEclipse
系统展示
管理员权限中的商品信息管理，其运行效果见下图。管理员在当前页面增删改查商品信息，可以对商品进行入库或者出库操作，同时，管理员也能查看各个商品对应的评论信息。
管理员权限中的用户管理，其运行效果见下图。管理员在后台负责对用户资料进行增删改查操作。
管理员权限中的商品入库管理，其运行效果见下图。管理员对商品进行入库之后，其信息会显示在本页面，管理员就能修改，删除商品的入库信息。
管理员权限中的商品出库管理，其运行效果见下图。管理员对商品的出库信息进行修改，删除，查询等操作。
管理员权限中的已支付订单管理，其运行效果见下图。用户购买并支付商品之后，管理员需要在当前页面对订单商品进行发货。
用户权限中的商品信息，其运行效果见下图。用户在本页面可以操作的功能比较多，可以收藏，评论本页面显示的商品，可以直接购买，也能暂时加入购物车保存商品。
用户权限中的购物车，其运行效果见下图。购物车帮助用户暂时保存购买的商品，方便用户一次性下单购买多种商品。
用户权限中的提交订单，其运行效果见下图。用户下单支付前，收货地址和购买的商品需要再次核对清楚，最后支付订单。
用户权限中的已支付订单，其运行效果见下图。用户对订单明细进行查看，可以选择对某些误购买的商品进行退款。
用户权限中的联系客服，其运行效果见下图。用户在操作基于Vue的电子商城过程中，遇到任何问题可以咨询客服，客服就负责回答用户咨询的问题。
代码实现：
跨域实现
package com.interceptor;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;
import com.annotation.IgnoreAuth;
import com.entity.EIException;
import com.entity.TokenEntity;
import com.service.TokenService;
import com.utils.R;
@Component
public class AuthorizationInterceptor implements HandlerInterceptor {
public static final String LOGIN_TOKEN_KEY = "Token";
@Autowired
private TokenService tokenService;
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,request-source,Token, Origin,imgType, Content-Type, cache-control,postman-token,Cookie, Accept,authorization");
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
IgnoreAuth annotation;
if (handler instanceof HandlerMethod) {
annotation = ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class);
} else {
return true;
}
String token = request.getHeader(LOGIN_TOKEN_KEY);
if(annotation!=null) {
return true;
}
TokenEntity tokenEntity = null;
if(StringUtils.isNotBlank(token)) {
tokenEntity = tokenService.getTokenEntity(token);
}
if(tokenEntity != null) {
request.getSession().setAttribute("userId", tokenEntity.getUserid());
request.getSession().setAttribute("role", tokenEntity.getRole());
request.getSession().setAttribute("tableName", tokenEntity.getTablename());
request.getSession().setAttribute("username", tokenEntity.getUsername());
return true;
}
PrintWriter writer = null;
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
try {
writer = response.getWriter();
writer.print(JSONObject.toJSONString(R.error(401, "请先登录")));
} finally {
if(writer != null){
writer.close();
}
}
return false;
}
}
登录实现
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){
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);
}
@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){
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){
UserEntity u = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername()));
if(u!=null && u.getId()!=user.getId() && u.getUsername().equals(user.getUsername())) {
return R.error("用户名已存在。");
}
userService.updateById(user);
return R.ok();
}
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
userService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
}
相关知识
基于java jsp ssm vue网上鲜花店网站设计实现vue
基于springboot玉米病虫害远程咨询系统的设计与实现
vue如何实现物流跟踪
基于JavaWeb的植物信息管理系统设计与实现开题报告
基于Java网上鲜花销售系统的设计与实现
node.js基于vue的化妆品销售管理系统的设计与实现 毕业设计
基于物联网的家庭园艺系统的设计与实现
基于node.js+vue基于Android的平台书架的设计与实现后（开题+程序+论文）计算机毕业设计
基于Vue的花店管理系统
Java 基于 SpringBoot +vue 的线上花店销售系统
网址: 基于Vue的电子商城的设计与实现 https://m.huajiangbk.com/newsview843527.html
| 上一篇: 1.9 电子商城测试分析 |
下一篇: 【推荐】Github上获star |
