文章目錄

• 一、架構(gòu)
• 二、項目搭建
• • 創(chuàng)建父工程
  • 創(chuàng)建leyou-registry：服務(wù)的注冊中心（EurekaServer）
  • 創(chuàng)建leyou-gateway：服務(wù)網(wǎng)關(guān)（Zuul）
  • 創(chuàng)建leyou-item: 商品微服務(wù)
  • 創(chuàng)建leyou-common: 通用工具
• 后臺管理系統(tǒng)搭建
• • 環(huán)境配置
  • • 使用域名訪問本地項目
• 搭建前臺系統(tǒng)
• • leyou-portal
  • live-server

收獲一：明白了電商系統(tǒng)中的一些知識點，例如sku和spu的概念，另外，類目、品牌、商品、規(guī)格參數(shù)、規(guī)格參數(shù)組的設(shè)計以及它們關(guān)系也是相對復(fù)雜的，學(xué)完之后自己也能梳理清楚了。

收獲二：之前以為在微服務(wù)中，所有的請求都會過網(wǎng)關(guān)，由網(wǎng)關(guān)進行路由，但是并不是這樣。例如上傳服務(wù)，如果上傳文件也經(jīng)Zuul網(wǎng)關(guān)，會造成不必要的網(wǎng)絡(luò)負擔(dān)，在高并發(fā)的情況下，有可能會造成整個系統(tǒng)的癱瘓，因此文件上傳的請求是不經(jīng)過網(wǎng)關(guān)來處理的。

收獲三：庫表設(shè)計的技巧。像spu和spuDetail會分在不同的表里，主要是spu和spuDetail讀的頻率不一樣，并且spuDetail中商品詳情屬于大字段，分開存儲會好一些，同樣的，sku和庫存也會分開存儲，這是因為讀寫的頻率不一樣。另外，常規(guī)庫表設(shè)計應(yīng)該遵循三范式，但是有時候字段冗余可以減少不必要查詢，這是值得的。

收獲四：學(xué)習(xí)了JWT，包括JWT的概念、數(shù)據(jù)格式和交互流程，之前是聽說過，這次是能親自實戰(zhàn)，感覺收獲滿滿。

收獲五：整合SpringBoot+ElasticSearch完成商品搜索，以后有需要用到搜索引擎相關(guān)的東西，可以直接拿過來進行優(yōu)化。

一、架構(gòu)

樂優(yōu)商城架構(gòu)介紹(一)

二、項目搭建

前端技術(shù)：

后端技術(shù)：

創(chuàng)建父工程

創(chuàng)建統(tǒng)一的父工程：leyou，用來管理依賴及其版本，注意是創(chuàng)建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>

創(chuàng)建leyou-registry：服務(wù)的注冊中心（EurekaServer）

我們的注冊中心，起名為：leyou-registry

添加依賴
編寫啟動類

@SpringBootApplication @EnableEurekaServer

配置文件

server:port: 10086 spring:application:name: leyou-registry eureka:client:service-url:defaultZone: http://localhost:10086/eurekaregister-with-eureka: false # 把自己注冊到eureka服務(wù)列表fetch-registry: false # 拉取eureka服務(wù)信息server:enable-self-preservation: false # 關(guān)閉自我保護eviction-interval-timer-in-ms: 5000 # 每隔5秒鐘，進行一次服務(wù)列表的清理

創(chuàng)建leyou-gateway：服務(wù)網(wǎng)關(guān)（Zuul）

這里我們需要添加Zuul和EurekaClient的依賴：

@SpringBootApplication @EnableDiscoveryClient @EnableZuulProxy server:port: 10010 spring:application:name: api-gatewaydatasource:url: jdbc:mysql://localhost:3306/leyouusername: rootpassword: 123hikari:maximum-pool-size: 30minimum-idle: 10 eureka:client:serviceUrl:defaultZone: http://127.0.0.1:10086/eurekaregistryFetchIntervalSeconds: 10instance:preferIpAddress: trueipAddress: 127.0.0.1instanceId: ${spring.application.name}:${server.port} zuul:prefix: /api # 添加路由前綴retryable: trueroutes:item-service: /item/** # 將商品微服務(wù)映射到/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-servicestrip-prefix: falsehost:socket-timeout-millis: 100000connect-timeout-millis: 100000add-host-header: true #攜帶請求本身的host頭信息sensitive-headers: #禁止使用頭的信息，設(shè)置為null，否則set-cookie無效 ribbon:ConnectTimeout: 100000 # 連接超時時間(ms)ReadTimeout: 100000 # 通信超時時間(ms)MaxAutoRetriesNextServer: 0 # 同一服務(wù)不同實例的重試次數(shù)MaxAutoRetries: 0 # 同一實例的重試次數(shù) hystrix:command:default:execution:isolation:thread:timeoutInMillisecond: 100000 # 熔斷超時時長：5000ms ly:jwt:pubKeyPath: F:/IdeaProjects/HwjProjects/auth/rsa/rsa.pub # 公鑰地址cookieName: LY_TOKENfilter:allowPaths:- /api/auth- /api/search- /api/user/register- /api/user/check- /api/user/code- /api/item #臨時放行，因為需要用登錄- /zuul/api/upload

創(chuàng)建leyou-item: 商品微服務(wù)

leyou-item是一個微服務(wù)，那么將來肯定會有其它系統(tǒng)需要來調(diào)用服務(wù)中提供的接口，獲取的接口數(shù)據(jù)，也需要對應(yīng)的實體類來封裝，因此肯定也會使用到接口中關(guān)聯(lián)的實體類。

因此這里我們需要使用聚合工程，將要提供的接口及相關(guān)實體類放到獨立子工程中，以后別人引用的時候，只需要知道坐標(biāo)即可。

• leyou-item-interface：主要是對外暴露的接口及相關(guān)實體類
• leyou-item-service：所有業(yè)務(wù)邏輯及內(nèi)部使用接口

因為是聚合工程，所以把項目打包方式設(shè)置為pom

<packaging>pom</packaging>

• leyou-item-service中添加依賴：
  這些依賴，我們在頂級父工程：leyou中已經(jīng)添加好了。所以直接引入即可：

- Eureka客戶端 - web啟動器 - mybatis啟動器 - 通用mapper啟動器 - 分頁助手啟動器<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId></dependency> - 連接池，我們用默認的Hykira - mysql驅(qū)動 - 千萬不能忘了，我們自己也需要ly-item-interface中的實體類 - 工具類 <!-- springboot檢測服務(wù)啟動器 測試路由規(guī)則--> <groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId>

在整個leyou-item工程中，只有l(wèi)eyou-item-service是需要啟動的。因此在其中編寫啟動類即可：
全局屬性文件：

@SpringBootApplication @EnableDiscoveryClient server:port: 8081 spring:application:name: item-servicedatasource:url: jdbc:mysql:///leyouusername: rootpassword: 123hikari:max-lifetime: 28830000 # 一個連接的生命時長（毫秒），超時而且沒被使用則被釋放（retired），缺省:30分鐘，建議設(shè)置比數(shù)據(jù)庫超時時長少30秒，參考MySQL wait_timeout參數(shù)（show variables like '%timeout%';）maximum-pool-size: 9 # 連接池中允許的最大連接數(shù)。缺省值：10；推薦的公式：((core_count * 2) + effective_spindle_count) eureka:client:service-url:defaultZone: http://localhost:10086/eurekainstance:lease-renewal-interval-in-seconds: 5 # 5秒鐘發(fā)送一次心跳lease-expiration-duration-in-seconds: 10 # 10秒不發(fā)送就過期 mybatis:type-aliases-package: com.leyou.item.pojo

創(chuàng)建leyou-common: 通用工具

后臺管理系統(tǒng)搭建

安裝依賴
我們只需要打開終端，進入項目目錄，輸入：npm install命令，即可安裝這些依賴。

運行測試
F:\workspaces\IdeaProjects\leyou-manage-web>

npm run start

訪問：http://localhost:9001

頁面布局(Layout組件是整個頁面的布局組件)

環(huán)境配置

使用域名訪問本地項目

主域名是：www.leyou.com，
管理系統(tǒng)域名：manage.leyou.com
網(wǎng)關(guān)域名：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;}} }

搭建前臺系統(tǒng)

leyou-portal

leyou-portal 前臺頁面

start nginx live-server --port=9002

live-server

沒有webpack，我們就無法使用webpack-dev-server運行這個項目，實現(xiàn)熱部署。

所以，這里我們使用另外一種熱部署方式：live-server
安裝，使用npm命令即可，這里建議全局安裝，以后任意位置可用

npm install -g live-server

運行時，直接輸入命令：

live-server --port=9002

樂優(yōu)商城筆記匯總

參考代碼

總結(jié)

以上是生活随笔為你收集整理的乐优商城总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。