基于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/NavicatJDK版本:jdk1.8Maven: 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 {@Autowiredprivate UsersService usersService;@Autowiredprivate 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多套项目欢迎咨询

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分析和比较深度学习框架 PyTorch 和 Tensorflow

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 深度学习作为人工智能的一个重要分支&#xff0c;在过去十年中取得了显著的进展。PyTorch 和 TensorFlow 是目前最受欢迎、最强大的两个深度学习框架&#xff0c;它们各自拥有独特的特点和优势。 1. Py…

网络编程学习——IO多路复用

目录 ​编辑 一&#xff0c;多路复用 1&#xff0c;IO的分类 2&#xff0c;IO的效率 二&#xff0c;Linux环境下实现通信的多路复用 1&#xff0c;select select的特点&#xff1a; 参数&#xff1a; 操作函数&#xff1a; 返回值&#xff1a; 使用select实现网络通信…

B树和B+树试题解析

一、单项选择题 01&#xff0e;下图所示是一棵&#xff08;A ). A.4阶B树 B.3阶B树 C.4阶B树 D.无法确定 02.下列关于m阶B树的说法中&#xff0c;错误的是( C ). A.根结点至多有m棵子树 B.所有叶结点都在同一层次上 C.非叶结点至…

JAVAEE——IP协议

文章目录 IP协议IP协议报头格式IP协议报头的各个区段四位版本四位首部长度八位服务类型16位总长度16位标识&#xff0c;3位标志&#xff0c;13位片偏移八位生存时间八位协议 地址管理IP地址解决提议1&#xff1a;动态分配Ip地址解决提议2&#xff1a;NAT机制 IP协议 IP协议报头…

超越GPT-4V,苹果多模态大模型上新,神经形态计算加速MLLM(二)

上文介绍基于MINOnets神经网络架构加速多模态大模型的策略&#xff0c;本文将以Spinnaker2多核神经网络芯片EGRU架构为起点&#xff0c;覆盖存内计算架构&#xff0c;介绍新型计算架构在加速大模型推理的作用。SpiNNaker 2是一个设计用于大规模异步处理的多核神经形态芯片&…

openGauss学习笔记-267 openGauss性能调优-TPCC性能调优测试指导-网络配置-网卡多中断队列设置

文章目录 openGauss学习笔记-267 openGauss性能调优-TPCC性能调优测试指导-网络配置-网卡多中断队列设置267.1 操作步骤 openGauss学习笔记-267 openGauss性能调优-TPCC性能调优测试指导-网络配置-网卡多中断队列设置 本章节主要介绍openGauss数据库内核基于鲲鹏服务器和openE…

T3BI T3BI RS-232通讯操作指南与培训PPT课件

T3BI T3BI RS-232通讯操作指南与培训PPT课件

Python连接Oracle数据库问题解决及Linux服务器操作知识

背景说明 最近在做一个视频分析的项目&#xff0c;然后需要将视频分析的数据写入到oracle数据库&#xff0c;直接在服务器上测试数据库连接的时候出现了这个bug提示&#xff0c;自己通过不断的研究探讨&#xff0c;最终把这个问题成功进行了解决&#xff0c;在这里进行一下记录…

701强连通分量(python)

看见题目知道时间复杂度不超过&#xff08;mlogm&#xff09;。 这题用强连通分量 Tarjan 算法&#xff0c;强联通&#xff1a;对于任意两个点u和v&#xff0c;u可以到达v&#xff0c;v也可以到达u。这题需要考虑有重边&#xff0c;自环&#xff0c;同样别忘记可能会有两个点u…

Linux 操作系统编译器、静态库、动态库

1、编辑器 1.1、vim的安装 指令&#xff1a;sudo apt-get install vim 1.2 vim的使用 格式&#xff1a;vim 文件名 如果文件存在&#xff0c;只打开&#xff0c;文件不存在&#xff0c;创建并打开 vim的4中模式&#xff1a; 命令模式&#xff0c;插入模式&#xff0c;底行模…

Excel数据处理:高级筛选、查找定位、查找函数(VLOOKUP)

高级筛选 先去选中筛选区域 如果筛选的条件在同一行那么就是且的关系 如果筛选的条件不在同一行那么就是或的关系 查找定位空值 使用VLOOKUP函数

渗透测试入门教程,从零基础入门到精通(非常详细)

目录 什么是渗透测试 渗透测试的重要性 渗透测试的前置技能 开始入门学习路线 什么是渗透测试 渗透测试&#xff0c;通常被视为模拟黑客的一种安全评估行为&#xff0c;其目的在于全面挖掘目标网站或主机的潜在安全漏洞。与真实的黑客攻击不同&#xff0c;渗透测试旨在发现…

Spring定时器 Cron表达式的用法

前言 Cron表达式是一种用于描述定时任务执行时间的字符串格式&#xff0c;这种表达式基于时间字段来定义任务应该在哪些时间点执行&#xff0c;通常包含六个或七个用空格隔开的字段&#xff0c;分别代表秒、分钟、小时、日期、月份和星期&#xff08;年份是可选的&#xff09;…

系统架构最佳实践 -- 相关JAVA架构

1. java 类加载器架构 2. JVM 架构 3. Java 技术体系 4. 线程运行架构 5. Java 体系&#xff08;编译与运行&#xff09;结构 6. JMS 技术架构 7. JMX 技术架构 8. Spring 架构 9. Hibernate 架构 10. ibatis 架构 11. Struts2 架构 12. Struts1 架构 13. JBPM 14. EJB 技术架构…

万字总结!Docker简介及底层关键技术剖析

本文首发在个人博客上&#xff1a;万字总结&#xff01;Docker简介及底层关键技术剖析 Docker 简介 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#x…

滚动条详解:跨平台iOS、Android、小程序滚动条隐藏及自定义样式综合指南

滚动条是用户界面中的图形化组件&#xff0c;用于指示和控制内容区域的可滚动范围。当元素内容超出其视窗边界时&#xff0c;滚动条提供可视化线索&#xff0c;并允许用户通过鼠标滚轮、触屏滑动或直接拖动滑块来浏览未显示部分&#xff0c;实现内容的上下或左右滚动。它在保持…

补档 -- 测试的分类(1)

最近有很多人私信我说: 灰灰你什么时候写测试分类阿, 本来我要开始肝性能测试的, 我一看, 奥, 之前摸鱼忘写了, 所以这里补档(叶问指着一边笑.jpg). 总览 标红的需要注意一下. 为什么要对软件测试进行分类? 软件测试是软件生命周期的一个重要环节, 具有较高的复杂性, 对于软…

排序 “叁” 之交换排序

目录 1. 基本思想 2.冒泡排序 2.1 基本思想 2.2 代码示例 2.3 冒泡排序的特性总结 3.快速排序 3.1 基本思想 &#x1f335;hoare版本 &#x1f335;挖坑法 ​编辑 &#x1f335;前后指针版本 ​编辑 3.2 快速排序优化 &#x1f33b;三数取中法选key 3.4 快速排序…

如何在群晖NAS部署office系统办公服务并实现无公网IP远程编辑文件

文章目录 本教程解决的问题是&#xff1a;1. 本地环境配置2. 制作本地分享链接3. 制作公网访问链接4. 公网ip地址访问您的分享相册5. 制作固定公网访问链接 本教程解决的问题是&#xff1a; 1.Word&#xff0c;PPT&#xff0c;Excel等重要文件存在本地环境&#xff0c;如何在编…

Umi.js:登录之后需要手动刷新权限菜单才能渲染

在使用Umi.js开发后台管理页面时&#xff0c;用户登录之后&#xff0c;总是需要手动刷新一次页面&#xff0c;才能够拿到全局状态/权限信息。 问题描述 结合使用umi/plugin-layout和umi/plugin-access&#xff0c;登录进入页面&#xff0c;配置的权限菜单未渲染&#xff0c;需…