基于SpringBoot+Vue七匹狼商城系统的设计与实现

系统介绍

近年来随着社会科技的不断发展,人们的生活方方面面进入了信息化时代。计算机的普及,使得我们的生活更加丰富多彩,越来越多的人使用通过网络来购买各类的商品。早期商品的销售和购买都是通过实体店,这种购买方式需要耗费额外不少的选购时间,且不利于同类产品不同厂商的比较,而通过网上销售和购买则可以随时随地随心的发布和购买,“七匹狼皮带”商城系统的开发正是为此。系统是一款web项目,采用java进行编写,使用mysql进行数据库的管理,使用navicat作为图形界面操作数据库,采用B/S架构进行系统的开发。系统采用流行的Springboot框架结合前台vue-cli进行设计与开发,提高系统的系统可维护性和拓展性,并实现了相关功能,经过测试,系统能够完成预设的基本功能,实现线上商品交易的全过程。

系统主要技术 

开发语言:Java
 
使用框架:spring boot
 
前端技术:JavaScript、Vue 、css3
 
开发工具:IDEA/MyEclipse/Eclipse、Visual Studio Code
 
数据库:MySQL 5.7/8.0
 
数据库管理工具:phpstudy/Navicat
 
JDK版本:jdk1.8
 
Maven: apache-maven 3.8.1-bin

系统展示

5.2首页功能实现

用户进入本系统可查看网站信息,导航栏包括首页、商品信息页、购物车页等。在导航栏下方设置轮播图展示区,按10s进行切换,这样的好处可以把最好的图片放在轮播图中,增强系统的美观,同时吸引用户的眼球。轮播图下方是系统简介和商品介绍信息,系统首页界面如下图5-2所示。

图5-2系统主界面图

5.3用户登录功能模块

用户登录界面分为前台登录界面和后台登录界面,这里主要是是考虑到数据的安全性所做的一般性的设计。为了保证系统的安全性,系统前后台用户登录的页面不同,管理员和注册用户具体的登录界面如下图所示,需要输入正确的用户名和密码,点击登录即可,通过HTTP协议,将数据传递到后台。后台会查验数据库中的是否有该用户信息,有的话,登录成功,进行页面跳转,并通过浏览器的内置session对象类生保存生成的token字符串的值。这里说明一下,使用token是为了保证登录账户的安全性。

图5-3 注册用户与管理员登录界面图

5.4用户注册功能展示

用户注册实现界面展示如图5-4所示。注册的本质是后台拿到前台的数据,如图所示用户注册流程图,游客可以通过系统注册功能成功系统用户,成为用户后可以进行在线购买物品等操作。注册需要用户填写相关的注册资料,其中用户名是全站唯一,在注册用户信息时候需要先对用户名进行一个校验,如果用户出现相同的则提示用户已存在,请勿重复注册。如果用户名合法则提示进行账户信息保存操作。

图5-4用户注册界图面

5.5商品列表与详情功能实现

会员用户可以查看到具体的商品信息,商品信息会根据商品类别进行排列,根据自己的需要点击商品可以查看到商品详情信息。商品详情展示了商品介绍等信息,如图23所示。页面首先获取到商品类别list集合,然后展示出来,具体的商品列表数据则是根据商品类别id获取到了该类别id下的所有商品list集合,商品详情是通过该商品id获取的。

图5-5 商品列表与详情界面图

5.6在线购物功能实现

用户点击物品之后,会展示商品详情信息,商品详情信息中有一个操作列表,包括有加入购物车与提交订单,在跳转之前,系统会在后台获取到该物品的id信息,然后通过查询操作,然后展示到购物车页面。如果还需要购买物品,点击继续购物就可以,也可以选择下单结算,下单结算之后需要支付费用,完成之后则需要填写送货地址。如下图是购物车页面,当点击对应商品的选择框之后,总价才会进行相应的显示。

   图5-6购物车界面图

5.7商品管理功能实现

管理员用户点击商品信息管理然后点击新增之后,页面会跳转到新增商品界面,需要填写商品的名称、选择商品类别等。这些信息填写正确之后,提交转到后台进行创建商品实例。注册用户查看网页中商品信息的时候,通过调取数据库的商品数据进行查看。在添加物品图片信息的时候,由于图片一般所占的内存较大,所以不放在数据库中,而是把图片的存放地址(也就是图片名)放到数据库中,使用的时候直接引用图片的url地址就可以了。

图5-7商品管理界面图

5.8注册用户管理功能实现

管理员可以对系统所有的用户信息进行查看和管理,管理员中的注册用户信息是通过遍历所有的会员用户list集合得到的。管理员可以根据注册用户账号进行模糊查询,或者对注册用户信息进行修改或者删除操作等操作。

图5-8注册用户管理界面图

部分核心代码

/**
 * 登录相关
 */
@RequestMapping("users")
@RestController
public class UsersController {
	
	@Autowired
	private UsersService usersService;
	
	@Autowired
	private TokenService tokenService;
 
	/**
	 * 登录
	 */
	@IgnoreAuth
	@PostMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
		if(user==null || !user.getPassword().equals(password)) {
			return R.error("账号或密码不正确");
		}
		String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
		R r = R.ok();
		r.put("token", token);
		r.put("role",user.getRole());
		r.put("userId",user.getId());
		return r;
	}
	
	/**
	 * 注册
	 */
	@IgnoreAuth
	@PostMapping(value = "/register")
	public R register(@RequestBody UsersEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        usersService.insert(user);
        return R.ok();
    }
 
	/**
	 * 退出
	 */
	@GetMapping(value = "logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("退出成功");
	}
 
	/**
	 * 修改密码
	 */
	@GetMapping(value = "/updatePassword")
	public R updatePassword(String  oldPassword, String  newPassword, HttpServletRequest request) {
		UsersEntity users = usersService.selectById((Integer)request.getSession().getAttribute("userId"));
		if(newPassword == null){
			return R.error("新密码不能为空") ;
		}
		if(!oldPassword.equals(users.getPassword())){
			return R.error("原密码输入错误");
		}
		if(newPassword.equals(users.getPassword())){
			return R.error("新密码不能和原密码一致") ;
		}
		users.setPassword(newPassword);
		usersService.updateById(users);
		return R.ok();
	}
	
	/**
     * 密码重置
     */
    @IgnoreAuth
	@RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request){
    	UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
    	if(user==null) {
    		return R.error("账号不存在");
    	}
    	user.setPassword("123456");
        usersService.update(user,null);
        return R.ok("密码已重置为:123456");
    }
	
	/**
     * 列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,UsersEntity user){
        EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
    	PageUtils page = usersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
        return R.ok().put("data", page);
    }
 
	/**
     * 列表
     */
    @RequestMapping("/list")
    public R list( UsersEntity user){
       	EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
      	ew.allEq(MPUtil.allEQMapPre( user, "user")); 
        return R.ok().put("data", usersService.selectListView(ew));
    }
 
    /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        UsersEntity user = usersService.selectById(id);
        return R.ok().put("data", user);
    }
    
    /**
     * 获取用户的session用户信息
     */
    @RequestMapping("/session")
    public R getCurrUser(HttpServletRequest request){
    	Integer id = (Integer)request.getSession().getAttribute("userId");
        UsersEntity user = usersService.selectById(id);
        return R.ok().put("data", user);
    }
 
    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody UsersEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        usersService.insert(user);
        return R.ok();
    }
 
    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody UsersEntity user){
//        ValidatorUtils.validateEntity(user);
        usersService.updateById(user);//全部更新
        return R.ok();
    }
 
    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
		List<UsersEntity> user = usersService.selectList(null);
		if(user.size() > 1){
			usersService.deleteBatchIds(Arrays.asList(ids));
		}else{
			return R.error("管理员最少保留一个");
		}
        return R.ok();
    }
}

 

  此源码非开源,若需要此源码可扫码添加微信或者qq:2214904953进行咨询!

2600多套项目欢迎咨询

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

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

相关文章

《苍穹外卖》Day03部分知识点记录

一、公共字段自动填充 业务表中的公共字段&#xff1a; 序号字段名含义数据类型操作类型1create_time创建时间datetimeinsert2create_user创建人idbigint3update_time修改时间datetimeinsert、update4update_user修改人idbigint 问题&#xff1a;代码冗余&#xff0c;不便于…

const成员函数 以及 取地址及const取地址操作符重载

目录 const成员函数 结论&#xff1a; 取地址及const取地址操作符重载 const成员函数 将const 修饰的 “ 成员函数 ” 称之为 const成员函数 &#xff0c; const 修饰类成员函数&#xff0c;实际修饰该成员函数的&#xff08;*this&#xff09; &#xff0c;表明在该成员函数…

ROS2 王牌升级:Fast-DDS 性能直接碾压 zeroMQ 「下」

以下内容为本人的学习笔记&#xff0c;如需要转载&#xff0c;请声明原文链接 微信公众号「ENG八戒」https://mp.weixin.qq.com/s/aU1l3HV3a9YnwNtC1mTiOA 性能比较 下面就以官网的测试数据为准&#xff0c;让我们一起来看看它们的性能差别到底怎样。 本次比较仅针对 Fast RT…

AI安全之问:我们的智能助手真的安全吗?

在我们日益依赖人工智能来撰写文档、编写程序代码、甚至创作艺术作品的今天&#xff0c;我们是否曾经想过这些智能系统可能面临的被恶意操纵的风险&#xff1f; 分享几个网站 GPT-3.5研究测试&#xff1a; https://hujiaoai.cn GPT-4研究测试&#xff1a; https://higpt4.cn…

2024数学建模时间汇总与竞赛攻略

目录 2024数学建模汇总&#xff08;时间、报名费、获奖率、竞赛级别、是否可跨校&#xff09; 中国高校大数据挑战赛 “华数杯”国际大学生数学建模竞赛 美国大学生数学建模竞赛&#xff08;美赛&#xff09; 数学中国&#xff08;认证杯&#xff09;数学建模网络挑战赛 …

Python基础04-操作系统中的文件与目录操作

在与操作系统交互时&#xff0c;我们经常需要执行文件和目录的操作。Python提供了丰富的库来帮助我们完成这些任务。以下是一些常见的操作&#xff0c;以及如何使用Python代码来实现它们。 1. 导航文件路径 在不同的操作系统中&#xff0c;文件路径的格式可能不同。Python的o…

OpenUI在windows下部署使用

OpenUI OpenUI是一个基于Python的AI对话平台&#xff0c;支持接入多种AI模型。 通过聊天的方式来进行UI设计&#xff0c;你可以通过文字来描述你想要的UI界面&#xff0c;OpenUI可以帮你实时进行渲染出效果 安装OpenUI 这里预设你的电脑上已安装git、Python和pip&#xff0…

2023年美国西岸行 - Day 1

本来旅行回来就像记录的&#xff0c;结果一拖就是快1年。当然中间原先记录的博客平台关闭也有部分原因&#xff0c;但不是主要原因。趁着今天复活20年前的CSDN博客&#xff0c;赶紧记录一下。 疫情之后第一次全家长途旅行。这次美国之行&#xff0c;在3-4月份订机票的时候跟临…

Pages by User Role for WordPress:强化内容访问控制的必备插件

在数字化时代&#xff0c;WordPress已成为众多网站开发者和设计师的首选平台。然而&#xff0c;如何根据用户角色精确控制内容的访问权限&#xff0c;一直是困扰他们的难题。Pages by User Role for WordPress插件应运而生&#xff0c;为这一难题提供了完美的解决方案。 Pages …

Python高效的符号计算库之aesara使用详解

概要 Aesara是一个高效的符号计算库,用于深度学习和数值计算,它允许开发者以数学表达式的形式定义函数,并自动转换成高效的代码执行。Aesara不仅提高了计算效率,还简化了梯度计算过程,是深度学习研究和实验的强大工具。 安装 通过pip可以轻松安装Aesara: pip install…

【JavaWeb】Day51.Mybatis动态SQL

什么是动态SQL 在页面原型中&#xff0c;列表上方的条件是动态的&#xff0c;是可以不传递的&#xff0c;也可以只传递其中的1个或者2个或者全部。 而在我们刚才编写的SQL语句中&#xff0c;我们会看到&#xff0c;我们将三个条件直接写死了。 如果页面只传递了参数姓名name 字…

网吧电脑可以用来渲染吗?渲染100邀请码1a12

对于设计行业的小伙伴来说&#xff0c;日常的渲染工作是个难题&#xff0c;电脑不行会导致很多问题&#xff0c;比如卡顿崩溃&#xff0c;甚至死机&#xff0c;这时候你可能想到去网吧渲染&#xff0c;毕竟网吧电脑看起来很强&#xff0c;那么真是这样的吗&#xff1f;这篇文章…

Android Studio实现页面跳转

建立文件 temp.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"…

MySql对于时间段交集的处理和通用实现方式(MyBatis-Plus)

问题&#xff1a;一般传统时间筛选是在[ 开始时间 → 结束时间 ]这个区间内的子集&#xff0c;也就是全包含查询方式&#xff0c;这种只会筛选一种情况。如果场景需要是开展一个活动&#xff0c;需要活动时间检索应该但凡包含就返回&#xff0c;也就是需要查询这个时间段有涉及…

大sql mysql执行

先把sql 拆分 太大的执行失败 使用 SQLDumpSplitter3 拆分sql 执行拆分的sql 拆分的sql 打开发现很多 ; 开头的空行 替换掉 正则 ^; 修改数据库 my.cnf my,ini 执行可能会提示 [ERR] 2006 - Server has gone away 错误 在 [mysqld] 添加以下几行 wait_timeout2880000 inter…

【机器学习】《ChatGPT速通手册》笔记

文章目录 第0章 前言第1章 ChatGPT的由来&#xff08;一&#xff09;自然语言处理任务&#xff08;二&#xff09;ChatGPT所用数据数据大小&#xff08;三&#xff09;ChatGPT的神经网络模型有175亿个参数&#xff08;四&#xff09;模型压缩 方案 第2章 ChatGPT页面功能介绍&a…

Flutter MQTT通信(实现聊天功能)

MQTT协议简介&#xff1a; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的、开放的、基于发布/订阅模式的消息传输协议&#xff0c;最初由IBM开发。它专门设计用于在低带宽、不稳定的网络环境下进行高效的消息传输。 学习完本篇文章&#x…

探索通过GPT和云平台搭建网安实战培训环境

项目背景 网络安全是一个不断演变的领域&#xff0c;面临着日益复杂的挑战和不断扩大的威胁。数字化时代&#xff0c;随着勒索攻击、数据窃取、网络钓鱼等频频出现&#xff0c;网络攻击的威胁指数和影响范围进一步增加&#xff0c;如何防范网络攻击&#xff0c;确保数据安全&a…

网络初识

网络 局域网 一个区域的网 广域网 相对概念&#xff0c;没有绝对的界限&#xff0c;全世界现在最大的广域网&#xff0c;就教做TheInternet&#xff0c;万维网 路由器 交换机和路由器&#xff0c;都是用来组建网络的重要设备 交换机 上网的设备&#xff08;电脑/手…

Jupyter Notebook更改默认打开的浏览器和工作目录

Jupyter Notebook更改工作目录 打开cmd&#xff0c;输入&#xff1a;jupyter notebook --generate-config&#xff0c;可以得到Jupyter Notebook配置文件的路径&#xff0c;找到路径下的jupyter_notebook_config.py文件&#xff0c;用记事本或者Sublime打开文件 找到&#xff…