Skip to main content

moregeek program

java基于hadoop及微服务架构的前后端分离购物系统(源码)_wx6237f50e82bc0的博客-多极客编程

一、项目介绍

基于Hadoop及微服务架构的前后端分离购物系统。前台购物页面 使用 Vue + ElementUi , 后台管理页面使用 html 和 Ajax。后端使用 Spring Boot + Spring Cloud+Nacos+OpenFeign+Spring Cloud GateWay+MyBatis进行开发,使用 Shiro 做登录验证和权限校验,使用支付宝的沙箱环境进行支付,使用 ElasticSearch 作为商品搜索服务,使用 Hadoop的HDSF作为图片存储服务器,使用 Spring Session+Redis实现Session共享,最后使用 Docker启动相关服务并实现项目一键式部署。


现在许多购物系统都是用SSH或者是SSM写的,想用Spring Boot + Spring Cloud的微服务架构进行项目的构建,里面许多技术主要是验证自己的学习成果,可能有一些不合理的地方,大家可以根据自己的需求启动相关服务。本项目是一个基于Spring Boot、Spring Cloud以及 Vue 技术的入门级项目,可以很好的学习相关技术。


二、项目特点

  • 后台管理系统:管理商品、订单、类目、商品规格属性、用户、权限、系统统计、系统日志以及前台内容等功能
  • 前台系统:用户可以在前台系统中进行注册、登录、浏览商品、首页、下单等操作
  • 会员系统:用户可以在该系统中查询已下的订单、管理订单、我的优惠券等信息
  • 订单系统:提供下单、查询订单、修改订单状态、定时处理订单
  • 搜索系统:搜索商品
  • 单点登录系统:为多个系统之间提供用户登录凭证以及查询登录用户的信息

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_hadoop

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_spring_02

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_spring_03

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_hadoop_04

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_spring_05

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_spring_06

三、相关技术

1、项目功能模块图

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_spring_07

2、前端所用技术

后台页面

  • 感谢 Exrick的开源 xmall项目提供的静态页面
  • Ztree:jQuery树插件
  • DataTables:jQuery表格插件
  • Layer:Web 弹出层组件
  • KindEditor:富文本编辑器
  • WebUploader:百度文件上传插件
  • HighCharts:图表库

前台页面

  • 感谢 Exrick 的开源 xmall-front 项目提供前端页面及框架支持
  • Vue.js:前端框架
  • Vue-router:路由框架
  • Vuex:全局状态管理框架
  • Element-UI:前端UI框架
  • Axios:前端HTTP框架

3、后端所用技术

各框架依赖版本皆使用目前最新版本,可在 pom.xml 查看

  • Spring Boot:MVC框架
  • Spring Cloud:微服务框架
  • Nacos:分布式协调服务
  • MyBatis:ORM框架
  • Shiro:认证和授权框架
  • Swagger-UI:文档生产工具
  • ElasticSearch:搜索引擎
  • Kibana :分析和可视化平台
  • RabbitMQ:消息队列
  • Redis:分布式缓存
  • MySQL:业务数据存储
  • Druid:数据库连接池
  • Hutool:Java工具包类库
  • Nginx:HTTP和反向代理web服务器
  • Docker:容器化部署
  • Docker Compose:Docker容器编排
  • Portainer:Docker可视化管理
  • HDFS:Hadoop分布式存储系统
  • HUE:Hadoop UI系统

四、前端部分

1、介绍

基于Vue + ElementUI开发的前台页面,通过调用后端的接口,实现前后端分离。

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_docker_08

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_spring_09

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_spring_10

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_docker_11

2、相关技术

  • Notejs:JavaScript运行环境
  • Vue.js:前端框架
  • Vue-router:路由框架
  • Vuex:全局状态管理框架
  • ElementUI:前端UI框架
  • Axios:前端HTTP框架

3、本地开发运行

启动后端项目后,在 config/index.js 中修改成自己的后端接口地址配置 在项目根文件夹下先后执行命令 npm install 、 npm run dev 商城前台端口默认8888, http://localhost:8888

4、部署

先后执行命令 npm install 、 npm run build 将打包生成的 dist 静态文件放置服务器中,使用Nginx等涉及跨域请配置路由代理


5、前端源码

链接: ​​https://pan.baidu.com/s/1aFrxsxtE3SAGtB4P46ifCw?pwd=w7py​

提取码: w7py

五、后端部分

1、基于微服务的前后端分离购物系统
  • 后台管理系统
  • 商品分类管理:子类
  • 商品管理:商品属性、商品下架、商品上架、所属分类
  • 用户管理,用户激活状态、用户到时未激活自动删除、权限管理
  • 订单管理,订单自动取消、到时自动收货、到时自动退款
  • 前台系统:用户可以进行商品浏览、注册、登录、下订单、订单支付、订单查询、订单修改、修改收货地址
  • 搜索系统:提供商品的搜索功能
  • 单点登录系统:为多个系统之间提供用户登录凭证以及查询登录用户的信息

2、 后端源码

链接: ​​https://pan.baidu.com/s/1S9xlU3SkThP799wywINsHQ?pwd=mpas​

提取码: mpas

六、项目部署

1、介绍

主要实现后端前端的负载均衡,一键式部署,并启动Hadoop、ZooKeeper、MySQL、Redis、Nginx图片服务器、ElasticSearch、Kibana、ActiveMQ、Redis、Portainer服务。

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_hadoop_12

Java基于Hadoop及微服务架构的前后端分离购物系统(源码)_docker_13

2、相关技术

Docker:容器化部署

Docker Compose:Docker容器编排

Dockerfile:构建镜像的文本文件

3、准备工作

将admin和front目录分别存储的两台主机上


每个主机安装好对应版本的Dokcker和Docker Compose


将后端项目使用Maven的Lifecycle中的package进行打包,将得到的hishop-*-0.0.1-SNAPSHOT-exec.jar复制到admin/Web和front/Web目录下对应的目录中


将前端项目使用npm run build 打包生成 dist,将dist目录复制到front/Web/nginx-front中


在admin/Web,front/Web,front/DataBaseAndHadoop目录下执行命令:chmod u+x ./exec.sh


在存储front目录的主机的hosts文件中添加:172.18.0.13 hadoop


在存储admin目录的主机的hosts文件中添加:存储front目录主机的ip地址 hadoop

4、运行

在front/DataBaseAndHadoop目录下执行:./exec.sh

在admin/WebTool目录下执行:docker-compose up -d

在admin/Web目录下执行:./exec.sh

在front/Web目录下执行:./exec.sh

输入存储admin目录主机的ip地址查看后台管理系统页面

输入存储front目录主机的ip地址查看前台页面

5、代码

链接: ​​https://pan.baidu.com/s/1xyXnierpkaaHFJRdlPy94w?pwd=tvru​

提取码: tvru

©著作权归作者所有:来自51CTO博客作者苦糖?的原创作品,请联系作者获取转载授权,否则将追究法律责任

eclipse编码格式该如何设置_是温度呀的博客-多极客编程

说到eclipse编码格式的设置其实一个非常非常小的事情,但是在eclipse的开发使用中却又是一个无法忽视的问题,它甚至会影响到我们的工作以及和团队成员之间的合作,所以,在开发前,动动自己的小手,先把编码格式给统一了吧。在eclipse的开发使用中,我们最常用的是UTF-8,所以这里就给大家简单的说明一下UTF-8的编码格式设置,我们在初次安装好eclipse、给eclipse指定一个新的工作空

【redis】 geo基本用法、实现查找附近商户功能_perceus.的博客-多极客编程

(目录) 附近商户 1、附近商户-GEO数据结构的基本用法 GEO就是Geolocation的简写形式,代表地理坐标。Redis在3.2版本中加入了对GEO的支持,允许存储地理坐标信息,帮助我们根据经纬度来检索数据。 常见的命令有: GEOADD:添加一个地理空间信息,包含:经度(longitude)、纬度(latitude)、值(member) GEODIST:计算指定的两个点之间的距离并

【redis】使用bitmap用户签到统计、bitmap解决缓存击穿方案 及 uv(hyperloglog) 统计页面访问量 与 独立访问量_perceus.的博客-多极客编程

(目录) 用户签到 1、用户签到-BitMap功能演示 我们针对签到功能完全可以通过mysql来完成,比如说以下这张表 用户一次签到,就是一条记录,假如有1000万用户,平均每人每年签到次数为10次,则这张表一年的数据量为 1亿条 每签到一次需要使用(8 + 8 + 1 + 1 + 3 + 1)共22 字节的内存,一个月则最多需要600多字节 所以使用MySQL实现对数据库压力很大 如何

用了那么久的vue,你了解vue的报错机制吗?_wx6237f50e82bc0的博客-多极客编程

Vue的5种处理Vue异常的方法相信大家对Vue的不陌生。在使用Vue的时候也会遇到报错,也会使用浏览器的F12 来查看报错信息。但是你知道Vue是如何进行异常抛出的吗?vue 是如何处理异常的呢?接下来和大家介绍介绍,Vue是如何处理者几种常见的报错的。先很大家说说常见的报错,再和大家介绍如何处理 Vue 中异常处理包含以下几个方面的技巧:errorHandlerwarnHandlerrende

#yyds干货盘点# leetcode 热题 hot 100:合并k个升序链表_灰太狼_cxh的博客-多极客编程

题目:给你一个链表数组,每个链表都已经按升序排列。请你将所有链表合并到一个升序链表中,返回合并后的链表。 示例 1:输入:lists = [[1,4,5],[1,3,4],[2,6]]输出:[1,1,2,3,4,4,5,6]解释:链表数组如下:[  1->4->5,  1->3->4,  2->6]将它们合并到一个有序链表中得到。1->1->2->3

#yyds干货盘点# 面试必刷top101:岛屿数量_风的博客-多极客编程

1.简述:描述给一个01矩阵,1代表是陆地,0代表海洋, 如果两个1相邻,那么这两个1属于同一个岛。我们只考虑上下左右为相邻。岛屿: 相邻陆地可以组成一个岛屿(相邻:上下左右) 判断岛屿个数。例如:输入[[1,1,0,0,0],[0,1,0,1,1],[0,0,0,1,1],[0,0,0,0,0],[0,0,1,1,1]]对应的输出为3(注:存储的01数据其实是字符'0','1')示例1输入:[[

qfiledialog文件对话框_五个板栗的博客-多极客编程

QFileDialog能遍历整个文件系统来选择一个或者多个文件或者目录函数原型(F1或者Fn+F1查看帮助文档,有更详细的解释)QString QFileDialog::getOpenFileName(QWidget *parent = nullptr, const QString &caption = QString()

openharmony - 基于arkui(js)实现移动粒子效果背景_鸿蒙社区的博客-多极客编程

作者:俞才彬 前言 在web端博客逛多了,偶然间发现了一种网页背景,线条能自发的运动,并且可以让这些线条向鼠标聚集,就觉得挺有意思的,让我们来试着用鸿蒙JS来实现这个炫酷的背景吧! 效果演示 实现步骤 1. 创建canvas标签 设置画布的大小,背景颜色,以及触摸事件。 <div class="container"> <canvas ref="canvas1" styl

eclipse编码格式该如何设置_是温度呀的博客-多极客编程

说到eclipse编码格式的设置其实一个非常非常小的事情,但是在eclipse的开发使用中却又是一个无法忽视的问题,它甚至会影响到我们的工作以及和团队成员之间的合作,所以,在开发前,动动自己的小手,先把编码格式给统一了吧。在eclipse的开发使用中,我们最常用的是UTF-8,所以这里就给大家简单的说明一下UTF-8的编码格式设置,我们在初次安装好eclipse、给eclipse指定一个新的工作空

腾讯云告警回调参数region与使用api相关region参数映射_oaixnah_的博客-多极客编程

注:不排除之后腾讯云后端同学将缩写修改为全称的可能alarm_region = { 'gz': 'ap-guangzhou', 'gzopen': 'ap-guangzhou-open', 'szjr': 'ap-shenzhen-fsi', 'sh': 'ap-shanghai', 'shjr': 'ap-shanghai-fsi', 'bj': 'ap-be

用了那么久的vue,你了解vue的报错机制吗?_wx6237f50e82bc0的博客-多极客编程

Vue的5种处理Vue异常的方法相信大家对Vue的不陌生。在使用Vue的时候也会遇到报错,也会使用浏览器的F12 来查看报错信息。但是你知道Vue是如何进行异常抛出的吗?vue 是如何处理异常的呢?接下来和大家介绍介绍,Vue是如何处理者几种常见的报错的。先很大家说说常见的报错,再和大家介绍如何处理 Vue 中异常处理包含以下几个方面的技巧:errorHandlerwarnHandlerrende

每日算法刷题day16-和为s的两个数字、数字排列、二进制中1的个数_wx62e40d60030b6的博客-多极客编程

⭐每日算法题解系列文章旨在精选重点与易错的算法题,总结常见的算法思路与可能出现的错误,与笔者另一系列文章有所区别,并不是以知识点的形式提升算法能力,而是以实战习题的形式理解算法,使用算法。🔥本文已收录于算法刷题系列专栏: 每日算法题解 欢迎订阅,持续更新。49.和为S的两个数字输入一个数组和一个数字 s,在数组中查找两个数,使得它们的和正好是 s。如果有多对数字的和等于 s,输出任意一对即可。你