從零到壹搭建一個商城架構--使用人人提供的後臺管理系統

1、下載人人後臺管理系統

根據之前的博客從零到壹搭建一個商城架構–下載人人開源的後臺管理系統和前端vue腳手架介紹，我們下載好後，打開vscode，需要執行幾個命令

npm install
npm run dev

前面從零到壹搭建一個商城架構–下載人人開源的後臺管理系統和前端vue腳手架博客中我們進行了詳細介紹，這裏我們配置我們自己的規則

2、修改前端代碼跨域請求baseurl

在 static\config\index.js 文件中

 // api接口請求地址
  window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast'; 
// 改爲，每一個請求我們讓他帶一個api的前綴
  window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

3、修改網關配置

在hslmall-gateway工程的配置文件application.yml中增加如下配置

spring:
  application:
    name: hslmall-gateway
  cloud:
    nacos:
      # 配置註冊中心的地址和命名空間
      discovery:
        server-addr: 127.0.0.1:8848
        #一定要註釋掉這個，要不然請求會被命名空間進行隔離
#        namespace: 52a5124d-5f65-4b41-bdca-01caacb3f3c4
        # 配置網關路由信息
    gateway:
      routes:
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*), /renren-fast/$\{segment}

4、遇到的問題

• 執行 npm install報錯

在執行 npm install 的時候可能會報錯，我把package.json文件中有報錯的那個模塊名給刪除就可以了

• 在使用網關請求具體的服務的時候，遇到的跨域請求攔截的問題

那什麼是跨域呢？請看下圖

瞭解下跨域流程

說明：這個圖的大體意思是，我們發送了一個複雜請求，他會先發送options進行預檢，如果服務器允許我們跨域，那麼會返回響應，這個時候纔會真正的發送我們的請求，最後響應服務器拿到的數據

大體知道了是怎麼回事，那麼就看看怎麼解決這個問題吧，看下圖

使用nginx做反向代理，我們統一隻請求nginx，他會把所有請求代理成一個域名，訪問，但是我們使用的是gatewat做網關，使用下圖的配置解決

這樣把人人開源的後臺管理系統簡單的跑起來了，後續我們會在這個系統上做一些功能的開發，用來管理商城中各個模塊中的業務，後臺管理系統主要是管理員來使用，真正用戶使用的是PC端向用戶展示的頁面