Mooc項目開發筆記（八）：配置nginx反向代理、上傳頭像前端實現

一、配置nginx反向代理

由於現在後端使用了8080和8081兩個端口提供服務，所以可以使用nginx實現請求轉發

1、下載nginx壓縮包並解壓

下載nginx壓縮包，並解壓。注意解壓後的路徑不能包含中文

2、修改配置文件

進入解壓後的文件夾，找到conf/nginx.conf，進行修改

• 把默認的80端口修改爲9090
• 將接口地址加入nginx配置

在http中添加如下內容：

    server {
        listen       9090;
        server_name  localhost;

        location ~ /eduservice/ {
            proxy_pass http://localhost:8080;
        }

        location ~ /eduoss/ {
            proxy_pass http://localhost:8081;
        }
    }

3、啓動nginx

在nginx文件夾中打開cmd，輸入命令nginx.exe運行：

之後nginx每次修改完成之後都要先關閉再啓動配置才能生效。nginx停止命令如下：

注意關閉cmd窗口不能關閉nginx

nginx.exe -s stop

4、修改前端配置

將前端項目中的dev.env.js中的端口號改爲9090。

5、測試

啓動後臺服務、nginx、前臺服務，打開頁面登錄登陸成功說明配置成功：

二、前臺實現頭像上傳

1、前端添加文件上傳組件

從vue-element-admin複製組件到前端項目的src/components中：

• vue-element-admin/src/components/ImageCropper
• vue-element-admin/src/components/PanThumb

接着再save.vue的html代碼中保存按鈕的上邊添加如下內容

<!-- 講師頭像 -->
<el-form-item label="講師頭像">

    <!-- 頭銜縮略圖 -->
    <pan-thumb :image="teacher.avatar"/>
    <!-- 文件上傳按鈕 -->
    <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更換頭像
    </el-button>

    <!--
v-show：是否顯示上傳組件
:key：類似於id，如果一個頁面多個圖片上傳控件，可以做區分
:url：後臺上傳的url地址
@close：關閉上傳組件
@crop-upload-success：上傳成功後的回調 -->
    <image-cropper
                   v-show="imagecropperShow"
                   :width="300"
                   :height="300"
                   :key="imagecropperKey"
                   :url="BASE_API+'/admin/oss/file/upload'"
                   field="file"
                   @close="close"
                   @crop-upload-success="cropSuccess"/>

</el-form-item>

在下邊的js腳本中添加如下內容：

import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

2、js腳本實現上傳和圖片回顯

export default {
  components: { ImageCropper, PanThumb }, //聲明組件
  data() {
    return {
      //其它數據模型
      ......,
        
      BASE_API: process.env.BASE_API, // 接口API地址
      imagecropperShow: false, // 是否顯示上傳組件
      imagecropperKey: 0 // 上傳組件id
    }
  },
    
  ......,
    
  methods: {
    //其他函數
    ......,

    // 上傳成功後的回調函數
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      //data相當於response.data的省略
      this.teacher.avatar = data.url
      // 上傳成功後，重新打開上傳組件時初始化組件，否則顯示上一次的上傳結果
      this.imagecropperKey = this.imagecropperKey + 1
    },

    // 關閉上傳組件
    close() {
      this.imagecropperShow = false
      // 上傳失敗後，重新打開上傳組件時初始化組件，否則顯示上一次的上傳結果
      this.imagecropperKey = this.imagecropperKey + 1
    }
  }
}

3、測試

上點擊更改頭像，並選擇圖片

點擊保存，保存成功。可以再去OSS控制檯和數據庫中查看數據和url是否存在且正確。