乐优商城总结

这篇博客总结了乐优商城项目,包括电商系统架构、微服务搭建、前后端技术应用、JWT与ElasticSearch的整合。在架构部分,介绍了服务注册中心EurekaServer、服务网关Zuul以及商品微服务的创建。项目搭建涉及前端和后端多个模块,如leyou-registry、leyou-gateway、leyou-item等。文中还分享了库表设计的技巧,如SKU与SPU的存储策略,以及JWT和商品搜索的实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


收获一:明白了电商系统中的一些知识点,例如sku和spu的概念,另外,类目、品牌、商品、规格参数、规格参数组的设计以及它们关系也是相对复杂的,学完之后自己也能梳理清楚了。

收获二:之前以为在微服务中,所有的请求都会过网关,由网关进行路由,但是并不是这样。例如上传服务,如果上传文件也经Zuul网关,会造成不必要的网络负担,在高并发的情况下,有可能会造成整个系统的瘫痪,因此文件上传的请求是不经过网关来处理的。

收获三:库表设计的技巧。像spu和spuDetail会分在不同的表里,主要是spu和spuDetail读的频率不一样,并且spuDetail中商品详情属于大字段,分开存储会好一些,同样的,sku和库存也会分开存储,这是因为读写的频率不一样。另外,常规库表设计应该遵循三范式,但是有时候字段冗余可以减少不必要查询,这是值得的。

收获四:学习了JWT,包括JWT的概念、数据格式和交互流程,之前是听说过,这次是能亲自实战,感觉收获满满。

收获五:整合SpringBoot+ElasticSearch完成商品搜索,以后有需要用到搜索引擎相关的东西,可以直接拿过来进行优化。

一、架构

乐优商城架构介绍(一)

在这里插入图片描述
在这里插入图片描述

二、项目搭建

前端技术:
在这里插入图片描述
后端技术:
在这里插入图片描述

创建父工程

创建统一的父工程:leyou,用来管理依赖及其版本,注意是创建project,而不是module

<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
		<spring-cloud.version>Finchley.SR2</spring-cloud.version>
		<mybatis.starter.version>1.3.2</mybatis.starter.version>
		<mapper.starter.version>2.0.2</mapper.starter.version>
		<druid.starter.version>1.1.9</druid.starter.version>
		<mysql.version>5.1.32</mysql.version>
		<pageHelper.starter.version>1.2.3</pageHelper.starter.version>
		<leyou.latest.version>1.0.0-SNAPSHOT</leyou.latest.version>
		<fastDFS.client.version>1.26.1-RELEASE</fastDFS.client.version>
	</properties>

在这里插入图片描述

创建leyou-registry:服务的注册中心(EurekaServer)

我们的注册中心,起名为:leyou-registry
在这里插入图片描述
添加依赖
编写启动类

@SpringBootApplication
@EnableEurekaServer

配置文件

server:
  port: 10086
spring:
  application:
    name: leyou-registry
eureka:
  client:
    service-url:
      defaultZone: http://localhost:10086/eureka
    register-with-eureka: false # 把自己注册到eureka服务列表
    fetch-registry: false # 拉取eureka服务信息
  server:
    enable-self-preservation: false # 关闭自我保护
    eviction-interval-timer-in-ms: 5000 # 每隔5秒钟,进行一次服务列表的清理

创建leyou-gateway:服务网关(Zuul)

这里我们需要添加Zuul和EurekaClient的依赖:

@SpringBootApplication
@EnableDiscoveryClient
@EnableZuulProxy
server:
  port: 10010
spring:
  application:
    name: api-gateway
  datasource:
    url: jdbc:mysql://localhost:3306/leyou
    username: root
    password: 123
    hikari:
      maximum-pool-size: 30
      minimum-idle: 10
eureka:
  client:
    serviceUrl:
      defaultZone: http://127.0.0.1:10086/eureka
    registryFetchIntervalSeconds: 10
  instance:
    preferIpAddress: true
    ipAddress: 127.0.0.1
    instanceId: ${spring.application.name}:${server.port}
zuul:
  prefix: /api # 添加路由前缀
  retryable: true
  routes:
    item-service: /item/** # 将商品微服务映射到/item/**
    search-service: /search/**
    user-service: /user/**
    sms-service: /sms/**
    auth-service: /auth/**
    cart-service: /cart/**
    order-service: /order/**
    upload-service:
      path: /upload/**
      serviceId: upload-service
      strip-prefix: false
  host:
      socket-timeout-millis: 100000
      connect-timeout-millis: 100000
  add-host-header: true #携带请求本身的host头信息
  sensitive-headers: #禁止使用头的信息,设置为null,否则set-cookie无效
ribbon:
  ConnectTimeout: 100000 # 连接超时时间(ms)
  ReadTimeout: 100000 # 通信超时时间(ms)
  MaxAutoRetriesNextServer: 0 # 同一服务不同实例的重试次数
  MaxAutoRetries: 0 # 同一实例的重试次数
hystrix:
  command:
    default:
      execution:
        isolation:
          thread:
            timeoutInMillisecond: 100000 # 熔断超时时长:5000ms
ly:
  jwt:
    pubKeyPath: F:/IdeaProjects/HwjProjects/auth/rsa/rsa.pub # 公钥地址
    cookieName: LY_TOKEN
  filter:
    allowPaths:
      - /api/auth
      - /api/search
      - /api/user/register
      - /api/user/check
      - /api/user/code
      - /api/item #临时放行,因为需要用登录
      - /zuul/api/upload

创建leyou-item: 商品微服务

在这里插入图片描述
leyou-item是一个微服务,那么将来肯定会有其它系统需要来调用服务中提供的接口,获取的接口数据,也需要对应的实体类来封装,因此肯定也会使用到接口中关联的实体类。

因此这里我们需要使用聚合工程,将要提供的接口及相关实体类放到独立子工程中,以后别人引用的时候,只需要知道坐标即可。

  • leyou-item-interface:主要是对外暴露的接口及相关实体类
  • leyou-item-service:所有业务逻辑及内部使用接口

在这里插入图片描述
因为是聚合工程,所以把项目打包方式设置为pom

 <packaging>pom</packaging>

在这里插入图片描述

  • leyou-item-service中添加依赖:
    这些依赖,我们在顶级父工程:leyou中已经添加好了。所以直接引入即可:
- Eureka客户端
- web启动器
- mybatis启动器
- 通用mapper启动器
- 分页助手启动器
 <dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
 </dependency>
- 连接池,我们用默认的Hykira
- mysql驱动
- 千万不能忘了,我们自己也需要ly-item-interface中的实体类
- 工具类
<!-- springboot检测服务启动器 测试路由规则-->
<groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>

在整个leyou-item工程中,只有leyou-item-service是需要启动的。因此在其中编写启动类即可:
全局属性文件:

@SpringBootApplication
@EnableDiscoveryClient
server:
  port: 8081
spring:
  application:
    name: item-service
  datasource:
    url: jdbc:mysql:///leyou
    username: root
    password: 123
    hikari:
      max-lifetime: 28830000 # 一个连接的生命时长(毫秒),超时而且没被使用则被释放(retired),缺省:30分钟,建议设置比数据库超时时长少30秒,参考MySQL wait_timeout参数(show variables like '%timeout%';)
      maximum-pool-size: 9 # 连接池中允许的最大连接数。缺省值:10;推荐的公式:((core_count * 2) + effective_spindle_count)
eureka:
  client:
    service-url:
      defaultZone: http://localhost:10086/eureka
  instance:
    lease-renewal-interval-in-seconds: 5 # 5秒钟发送一次心跳
    lease-expiration-duration-in-seconds: 10 # 10秒不发送就过期
mybatis:
  type-aliases-package: com.leyou.item.pojo

创建leyou-common: 通用工具

后台管理系统搭建

在这里插入图片描述
安装依赖
我们只需要打开终端,进入项目目录,输入:npm install命令,即可安装这些依赖。

运行测试
F:\workspaces\IdeaProjects\leyou-manage-web>

npm run start

在这里插入图片描述
访问:http://localhost:9001

页面布局(Layout组件是整个页面的布局组件)

环境配置

使用域名访问本地项目

主域名是:www.leyou.com,
管理系统域名:manage.leyou.com
网关域名:api.leyou.com

  • 本地域名解析

Windows下的hosts文件地址:C:/Windows/System32/drivers/etc/hosts

Linux下的hosts文件所在路径: /etc/hosts

127.0.0.1 api.leyou.com
127.0.0.1 manage.leyou.com
192.168.31.128 image.leyou.com
127.0.0.1 www.leyou.com
  • 反向代理配置
启动:start nginx.exe

停止:nginx.exe -s stop

重新加载:nginx.exe -s reload

在这里插入图片描述

#ngnix.conf
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
    listen       80;
    server_name  www.leyou.com;

    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location /item {
        # 先找本地
        root html;
        if (!-f $request_filename) { #请求的文件不存在,就反向代理
            proxy_pass http://127.0.0.1:8084;
            break;
        }
    }
    location / {
        proxy_pass http://127.0.0.1:9002;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
    }
}
    server {
        listen       80;
        server_name  manage.leyou.com;

        proxy_set_header X-Forwarded-Host $host;
		proxy_set_header X-Forwarded-Server $host;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header Host $host;	
		location / {
			proxy_pass http://127.0.0.1:9001;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
		}
    }

    server {
        listen       80;
        server_name  api.leyou.com;

        proxy_set_header X-Forwarded-Host $host;
		proxy_set_header X-Forwarded-Server $host;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

		# 上传路径的映射
		location /api/upload {
			proxy_pass http://127.0.0.1:8082;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
			
			rewrite "^/api/(.*)$" /$1 break; 
		}
		location / {
			proxy_pass http://127.0.0.1:10010;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
		}
    }  
}

搭建前台系统

leyou-portal

leyou-portal 前台页面

start nginx 
live-server --port=9002

live-server

没有webpack,我们就无法使用webpack-dev-server运行这个项目,实现热部署。

所以,这里我们使用另外一种热部署方式:live-server
安装,使用npm命令即可,这里建议全局安装,以后任意位置可用

npm install -g live-server

运行时,直接输入命令:

live-server --port=9002

在这里插入图片描述

乐优商城笔记汇总

参考代码

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值