day01乐优商城学习日记

关注

原创最新推荐文章于 2026-08-25 15:31:02 发布 399 阅读 AI 写同款· GEO 优化 ›

乐优商城各个模块话术我主要负责的是后台管理模块中商品的操作，我们后台管理系统是采用Vue+webpack+vue-cli+vue-route+Vuetify所构建的单页应用，所谓单页应用，就是我们一整个项目只有一个html页面，通过VueRoute根据路由规则来切换展示的页面，达到动态切换的效果，采用nginx反向代理，与前台项目共享一个微服务集群，使用axios来发起异步的ajax请求，达到前后端分离的结果，因为我们后台域名与后端域名不同，ajax请求默认不允许跨域，我们通过Cors来解决跨域问题，在商品的图片存储上，我们使阅读详情

1.乐优商城项目介绍

乐优商城是一个全品类的电商购物网站（B2C）。
用户可以在线购买商品、加入购物车、下单
可以评论已购买商品
管理员可以在后台管理商品的上下架、促销活动
管理员可以监控商品销售状况
客服可以在后台处理退款操作

1.1系统架构图

在这里插入图片描述

1.2系统架构解读

整个商城可分为：后台管理系统,前台管理系统

1.3后台管理

- 后台系统主要包含以下功能：
  - 商品管理，包括商品分类、品牌、商品规格等信息的管理
  - 销售管理，包括订单统计、订单退款处理、促销活动生成等
  - 用户管理，包括用户控制、冻结、解锁等
  - 权限管理，整个网站的权限控制，采用JWT鉴权方案，对用户及API进行权限控制
  - 统计，各种数据的统计分析展示
- 后台系统会采用前后端分离开发，而且整个后台管理系统会使用Vue.js框架搭建出单页应用（SPA）。
前台门户
- 前台门户面向的是客户，包含与客户交互的一切功能。例如：
  - 搜索商品
  - 加入购物车
  - 下单
  - 评价商品等等

1.4微服务集群

商品微服务：商品及商品分类、品牌、库存等的服务
搜索微服务：实现搜索功能
订单微服务：实现订单相关
购物车微服务：实现购物车相关功能
用户中心：用户的登录注册等功能
Eureka注册中心
Zuul网关服务

2.项目搭建

前端技术：

基础的HTML、CSS、JavaScript（基于ES6标准）
JQuery
Vue.js 2.0以及基于Vue的框架：Vuetify（UI框架）
前端构建工具：WebPack
前端安装包工具：NPM
Vue脚手架：Vue-cli
Vue路由：vue-router
ajax框架：axios
基于Vue的富文本框架：quill-editor

后端技术：

基础的SpringMVC、Spring 5.x和MyBatis3
Spring Boot 2.0.7版本
Spring Cloud 最新版 Finchley.SR2
Redis-4.0
RabbitMQ-3.4
Elasticsearch-6.3
nginx-1.14.2
FastDFS - 5.0.8
MyCat
Thymeleaf
mysql 5.6
##开发环境
- IDE：Idea 2019.3 版本
JDK：JDK1.8
项目构建：maven
版本控制工具：git

创建父工程 leyou

在这里插入图片描述
pom.xml文件如下所示

<?xml version="1.0" encoding="UTF-8"?>

4.0.0

<groupId>com.leyou.parent</groupId>
<artifactId>leyou</artifactId>
<version>1.0.0-SNAPSHOT</version>
<packaging>pom</packaging>

<name>leyou</name>
<description>Demo project for Spring Boot</description>

<parent>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-parent</artifactId>
	<version>2.0.7.RELEASE</version>
	<relativePath/> <!-- lookup parent from repository -->
</parent>

<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>

<dependencyManagement>
	<dependencies>
		<!-- springCloud -->
		<dependency>
			<groupId>org.springframework.cloud</groupId>
			<artifactId>spring-cloud-dependencies</artifactId>
			<version>${spring-cloud.version}</version>
			<type>pom</type>
			<scope>import</scope>
		</dependency>
		<!-- mybatis启动器 -->
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>${mybatis.starter.version}</version>
		</dependency>
		<!-- 通用Mapper启动器 -->
		<dependency>
			<groupId>tk.mybatis</groupId>
			<artifactId>mapper-spring-boot-starter</artifactId>
			<version>${mapper.starter.version}</version>
		</dependency>
		<!-- 分页助手启动器 -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-starter</artifactId>
			<version>${pageHelper.starter.version}</version>
		</dependency>
		<!-- mysql驱动 -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>${mysql.version}</version>
		</dependency>
		<!--FastDFS客户端-->
		<dependency>
			<groupId>com.github.tobato</groupId>
			<artifactId>fastdfs-client</artifactId>
			<version>${fastDFS.client.version}</version>
		</dependency>
      </dependencies>
</dependencyManagement>

<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
		</plugin>
	</plugins>
</build>

## 创建注册中心leyou-registry pom.xml如下所示 <?xml version="1.0" encoding="UTF-8"?>

leyou
com.leyou.parent
1.0.0-SNAPSHOT

4.0.0

<groupId>com.leyou.common</groupId>
<artifactId>leyou-registry</artifactId>
<version>1.0.0-SNAPSHOT</version>

<dependencies>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-server</artifactId>
    </dependency>

</dependencies>

## 编写启动类 @SpringBootApplication @EnableEurekaServer public class LeyouRegistryApplication {

public static void main(String[] args) {
    SpringApplication.run(LeyouRegistryApplication.class, args);
}

}

applicaiton.yml配置文件

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

创建Zuul网关leyou-gateway

pom.xml下所示

<?xml version="1.0" encoding="UTF-8"?>

leyou
com.leyou.parent
1.0.0-SNAPSHOT

4.0.0

<groupId>com.leyou.common</groupId>
<artifactId>leyou-gateway</artifactId>
<version>1.0.0-SNAPSHOT</version>

<dependencies>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-zuul</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
    </dependency>
    <!-- springboot提供微服务检测接口，默认对外提供几个接口 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-actuator</artifactId>
    </dependency>
</dependencies>

编写启动类

@SpringBootApplication
@EnableDiscoveryClient
@EnableZuulProxy
public class LeyouGatewayApplication {
public static void main(String[] args) {
SpringApplication.run(LeyouGatewayApplication.class, args);
}
}

application.yml

server:
port: 10010
spring:
application:
name: leyou-gateway
eureka:
client:
registry-fetch-interval-seconds: 5
service-url:
defaultZone: http://127.0.0.1:10086/eureka
zuul:
prefix: /api # 路由路径前缀

创建商品微服务leyou-item

我们会在leyou-item中创建两个子工程
leyou-item-interface：主要是对外暴露的接口及相关实体类
leyou-item-service：所有业务逻辑及内部使用接口
结构如下：
在这里插入图片描述

leyou-item-interface

在这里插入图片描述

leyou-item-service

在这里插入图片描述

整个微服务结构如下

在这里插入图片描述

添加ly-item-interface的pom.xml

<?xml version="1.0" encoding="UTF-8"?>

leyou-item
com.leyou.item
1.0.0-SNAPSHOT

4.0.0

<groupId>com.leyou.item</groupId>
<artifactId>leyou-item-service</artifactId>
<version>1.0.0-SNAPSHOT</version>

<dependencies>
    <!-- web启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- eureka客户端 -->
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
    </dependency>
    <!-- mybatis的启动器 -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
    </dependency>
    <!-- 通用mapper启动器 -->
    <dependency>
        <groupId>tk.mybatis</groupId>
        <artifactId>mapper-spring-boot-starter</artifactId>
    </dependency>
    <!-- 分页助手启动器 -->
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
    </dependency>
    <!-- jdbc启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>
    <!-- mysql驱动 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <dependency>
        <groupId>com.leyou.item</groupId>
        <artifactId>leyou-item-interface</artifactId>
        <version>1.0.0-SNAPSHOT</version>
    </dependency>
    <!-- springboot检测服务启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-actuator</artifactId>
    </dependency>
</dependencies>

编写启动类

@SpringBootApplication
@EnableDiscoveryClient
public class LeyouItemServiceApplication {

public static void main(String[] args) {
    SpringApplication.run(LeyouItemServiceApplication.class, args);
}

}

编写application

server:
port: 8081
spring:
application:
name: item-service
datasource:
url: jdbc:mysql://localhost:3306/leyou
username: root
password: root
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://127.0.0.1:10086/eureka
instance:
lease-renewal-interval-in-seconds: 5 # 5秒钟发送一次心跳
lease-expiration-duration-in-seconds: 10 # 10秒不发送就过期