谷粒商城【商城系统】完整总结

文章目录

项目运行的步骤
项目源码地址
模块说明
商城项目基础篇总结
- 项目知识点总结
- 效果图展示
商城项目高级篇总结
- 项目知识点总结
- 效果图展示
项目中遇到的问题
- 1. node版本与sass版本不对应
- 2. 测试单元的 @Test 前面没有运行图标
- 3. 前端category-cascader.vue报如下错误
- 4. 后台启动程序报如下错误
- 5. win10系统升级导致VirtualBox启动报错
- 6. p100出现400页面找不到错误
- 7. 通过在首页点击分类名称，跳转到检索页面，路径错误
- 8. 引入seata依赖，启动项目报错
- 9. 下单操作模拟远程服务异常，使用seata
- 10. 控制台报seata的相关错误

项目相关学习笔记：

项目架构图：https://blog.csdn.net/weixin_45606067/article/details/110143227
虚拟机中软件环境：https://blog.csdn.net/weixin_45606067/article/details/109629397
高级篇笔记（1/2）：https://blog.csdn.net/weixin_45606067/article/details/123940860
高级篇笔记（2/2）：https://blog.csdn.net/weixin_45606067/article/details/124472496

项目运行的步骤

环境：

安装虚拟机VMware中安装Centos7 或者参考老师讲解的VirtualBox安装vagrant
虚拟机中安装docker，rabbitmq，nginx，kibana，elasticsearch，redis，mysql
本地安装idea（要有lombok插件），vscode，navicat，Redis Desktop Manager
本地 JDK（1.8），maven（3.6.3），nacos（1.4.1），natapp【解决内网穿透】环境
本地 node（12.19.0）、npm （6.14.8）环境

服务器：

项目静态资源放在nginx中，位置/mydata/nginx/html/static
配置nginx的配置文件

nginx.conf文件【位置：/mydata/nginx/conf】

gulimall.conf文件【位置：/mydata/nginx/conf/conf.d】

后端：

域名配置【host文件：C:\Windows\System32\drivers\etc】

# 谷粒商城域名访问
192.168.187.100 gulimall.com
192.168.187.100 search.gulimall.com
192.168.187.100 item.gulimall.com
192.168.187.100 auth.gulimall.com
192.168.187.100 cart.gulimall.com
192.168.187.100 order.gulimall.com
192.168.187.100 member.gulimall.com
192.168.187.100 seckill.gulimall.com
# 测试单点登录
127.0.0.1 sso.com
127.0.0.1 client1.com
127.0.0.1 client2.com

将数据导入navicat中，确保数据能连接上。
拉取 gulimall-parent 项目到本地，导入idea中【保证maven依赖不报错，字符集都是UTF-8】
修改各模块中mysql，nacos，redis，rabbitmq地址等配置
修改 gulimall-order 模块中支付宝相关的配置信息，主要是修改 alipay.notify_url地址为自己的natapp的【否则支付功能不好使】
修改 gulimall-third-party 模块中阿里云oss，sms线管配置信息
启动各个模块，并查看控制台有没有报错
浏览器访问：http://gulimall.com
测试某个模块的接口可使用swagger进行测试

前端：【管理端】

拉取 gulimall-vue 项目到本地，导入vscode
使用 npm install 安装依赖
使用 npm run dev启动项目
浏览器访问：http://localhost:8001/(账号密码：admin/admin)

项目源码地址

后端项目源码：https://gitee.com/StarSea007/gulimall-parent

前端项目源码：https://gitee.com/StarSea007/gulimall-vue

项目静态资源：https://github.com/StarSea99/gulimall-image

项目对应学习视频：https://www.bilibili.com/video/BV1np4y1C7Yf?p=1

后端接口文档：https://easydoc.net/s/78237135

主要包括如下：

项目中所需要的SQL文件；
学习项目中遇到的问题，及解决办法；
前面说到的知识点的详细步骤说明，及注意事项。
各个阶段的学习笔记。

觉得对你有帮助可以 Star，Fork一下！！！！

模块说明

gulimall
├── gulimall-auth -- 认证中心（社交登录、OAuth2.0、单点登录）
├── gulimall-cart -- 购物车服务
├── gulimall-common -- 工具类及通用代码
├── gulimall-coupon -- 优惠卷服务
├── gulimall-gateway -- 统一配置网关
├── gulimall-member -- 会员服务
├── gulimall-order -- 订单服务
├── gulimall-product -- 商品服务
├── gulimall-search -- 检索服务
├── gulimall-seckill -- 秒杀服务
├── gulimall-test-sso-client -- 测试单点登录客户端
├── gulimall-test-sso-server -- 测试单点登录服务端
├── gulimall-third-party -- 第三方服务
├── gulimall-ware -- 仓储服务
├── renren-fast -- 人人开源项目的管理端
└── renren-generator -- 人人开源项目的代码生成器

商城项目基础篇总结

项目知识点总结

1、分布式基础概念

微服务、注册中心、配置中心、远程调用、Feign、网关

2、基础开发

SpringBoot2.0、 SpringCloud、 Mybatis-Plus、 Vue组件化、阿里云对象存储OSS、Element UI

3、环境

Vagrant、 Linux、应用容器引擎Docker、 MySQL、 Redis、逆向工程&人人开源

4、开发规范

数据校验JSR303、全局异常处理、全局统一返回、全局跨域处理。
枚举状态、业务状态码、VO与TO与PO划分、逻辑删除。
Lombok：@Data、 @Slf4j

效果图展示

登录页面

用户名密码：admin/admin
分类维护
品牌管理
规格参数、属性分组、销售属性
发布商品
商品管理
商品库存、采购单

其余的页面可以运行项目自行查看。

商城项目高级篇总结

项目知识点总结

1、SpringCloud Alibaba组件

Nacos【配置中心，注册中心】、Sentinel、Seata

2、SpringCloud组件

OpenFegin、Gateway、Sleuth + Zipkin 服务链路追踪

3、技术点

搜索引擎ElasticSearch、消息队列RabbitMQ、分布式缓存Springsession

3、其他

分布式锁redisson、模板引擎thymeleaf
Reactive&WebFlux 响应式编程、本地事务&分布式事务
性能与压力测试、缓存与分布式锁
异步&线程池、单点登录与社交登录
商城业务（购物车，订单，秒杀）、支付宝支付
定时任务与分布式调度

高并发重要的三点：缓存、异步、队排好。

效果图展示

登录页
首页
搜索页
详情页
结算页
收银页
支付宝页
我的订单页

项目中遇到的问题

1. node版本与sass版本不对应

原因：前端项目安装依赖：Python27环境问题，node版本与sass版本不对应。
node环境与sass不兼容问题，详情查看：https://github.com/sass/node-sass

建议：node使用12.x 以下的版本，不支持14.x新版。

解决方法：卸载当前的node，重新去官网下载并安装即可。

我的环境如下：

C:\Users>node -v
v12.19.0C:\Users>npm -v
6.14.8

2. 测试单元的 @Test 前面没有运行图标

IDEA内：File - Setting - Plugins：搜到JUnitGenerator2.0，安装，重启IDEA
在类上写两个注解：@RunWith(SpringJUnit4ClassRunner.class) 和 @SpringBootTest
类名上必须用 public 修饰
在类中写的方法上加上 @Test 注解，运行标志出现，可以运行。

3. 前端category-cascader.vue报如下错误

关于pubsub、publish报错，无法发送查询品牌信息的请求：
1、npm install --save pubsub-js
2、在src下的main.js中引用：
① import PubSub from ‘pubsub-js’
② Vue.prototype.PubSub = PubSub

4. 后台启动程序报如下错误

com.alibaba.nacos.api.exception.NacosException: java.lang.reflect.InvocationTargetException Caused by: com.alibaba.nacos.api.exception.NacosException: endpoint is blank
报错原因：导入了nacos配置中心，而配置文件又没有配置。

<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
</dependency>

解决：

移除该依赖；
在application.yml中配置nacos配置中心

总结：此报错不影响项目的启动和正常运行，可以忽略。

5. win10系统升级导致VirtualBox启动报错

错误原因：win10系统升级导致的。
解决方法：在window系统中找到对应的虚拟网卡，禁用设备并重新启用即可。

6. p100出现400页面找不到错误

原因：就是当初我们执行了一个sys_menus.sql文件，作用就是创建了很多菜单。就像我们第一次创建商品前端时，在菜单管理里面新建了商品管理的菜单，sys_menus.sql文件就是帮我们创建其余菜单。问题时sys_menus.sql少创建了‘规格维护’这个菜单，路由是product/attrupdate。由于没有创建菜单，前端路由自然就找不到页面，就报400错误。

解决方法1：和之前一样，在系统管理下的菜单管理新建‘规格维护’菜单即可，解决方法其实就是直接sql新建菜单：（不推荐）

INSERT INTO sys_menu (menu_id, parent_id, name, url, perms, type, icon, order_num) VALUES (76, 37, '规格维护', 'product/attrupdate', '', 2, 'log', 0);

解决方法2：在前端代码 src/router/index.js 文件中，定义 mainRoutes 时在 children 中定义一行路由（40 行）：（推荐使用）

{ path: '/product-attrupdate', component: _import('modules/product/attrupdate'), name: 'attr-update', meta: { title: '规格维护', isTab: true } }

这样做可以避免左侧菜单栏出现一个多余的菜单。
原理是前端的路由是由 vue-router 负责的，在路由初始化时会从数据库查询定义的菜单并注册成路由，如果直接在前端注册成路由就不用先定义成菜单了。

7. 通过在首页点击分类名称，跳转到检索页面，路径错误

1）通过在首页点击分类名称，跳转到检索页面，并根据分类名称进行检索

在首页点击手机，页面却跳转到了 http://search.gmall.com/list.html?catalog3Id=225，路径错误

经过排查，发现是 catalogLoader.js 文件中的路径错了，进入linux的 /mydata/nginx/html/static/index/js文件夹下的catalogLoader.js文件，将文件中的请求路径改正确。

重启nginx服务在其访问就正常了。

2）通过在首页输入检索关键字，点击搜索跳转到检索页面，并根据检索关键字进行检索

在首页gulimall.com页面输入dada点击搜索，发现跳转的页面不正确

修改index.html 文件下 search() 方法的加载地址：

<script type="text/javascript">function search() {var keyword=$("#searchText").val()window.location.href = "http://search.gulimall.com/list.html?keyword=" + keyword;}
</script>

刷新项目在次访问就正常了。

8. 引入seata依赖，启动项目报错

如果我们将依赖放在gulimall-common服务中，那么再启动其他服务时就会报错：

org.springframework.beans.factory.BeanDefinitionStoreException: Failed to process import candidates for configuration class [com.siro.gulimall.gateway.GulimallGatewayApplication]; nested exception is java.io.FileNotFoundException: class path resource [org/springframework/web/servlet/config/annotation/WebMvcConfigurer.class] cannot be opened because it does not exist

原因：是需要将两个配置文件依次放在这各个服务中，所以我们可将用到分布式事务的seata依赖放在该服务中，在gulimall-order和gulimall-ware服务中导入依赖：

<!--整合seata分布式事务-->
<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-seata</artifactId><exclusions><exclusion><groupId>io.seata</groupId><artifactId>seata-all</artifactId></exclusion></exclusions>
</dependency>
<dependency><groupId>io.seata</groupId><artifactId>seata-all</artifactId><version>0.7.1</version>
</dependency>

如果seata依赖不识别，需要再pom文件中加入：

<dependencyManagement><dependencies><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>2.1.0.RELEASE</version><type>pom</type><scope>import</scope></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>${spring-cloud.version}</version><type>pom</type><scope>import</scope></dependency></dependencies>
</dependencyManagement>

重新创新maven依赖，重启项目就好了。

9. 下单操作模拟远程服务异常，使用seata

使用 seata来解决分布式事务问题，下单操作的方法加上 @GlobalTransactional 注解，业务代码使用 int i = 10/0;模拟远程服务出问题。

原因：seata 0.7.1 不支持批量保存。需要改成循环遍历插入数据。

这是我找的对问题的详细说明：https://wenku.baidu.com/view/3b89e53dfc00bed5b9f3f90f76c66137ee064f28.html

如果想更新项目的依赖版本可以参照：https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E

10. 控制台报seata的相关错误

可以在报错的模块中，在主启动类上排除 GlobalTransactionAutoConfiguration自动配置类
删除掉项目中seata相关的代码【因为目前项目中没有用到，视频学习中用到了】

如果有收获！希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客