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>

    
    <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是否存在且正确。