vue中代理服务器使用

vue中代理服务器的使用

代理服务器简单点说，就是把代理人去获取用户数据，就不用每次都去请求地址，
##### 注意下面写的地址都是乱写的，你写的是自己的地址

如果报错，第一看代理的是不是自己写的地址，还有修改过.env文件一定要重新启动

现在我们开始写说代理服务器吧

1.第一步，先创建一个.env.development

# just a flag
ENV = 'development'
//解释一下
//.env 全局默认配置文件，不论什么环境都会加载合并
//.env.development 开发环境下的配置文件，就是开始环境的时候会引用这个文件里面的配置
//.env.production 生产环境下的配置文件，

# base api
VUE_APP_BASE_API = 'http://127.0.0.0/'   

//VUE_APP_BASE_API = 'http://127.0.0.0:9528/api'   ，这是我的业务需要类型，
//这是去axios要使用的地址
//注意：这个地址是你自己的地址，这个地址是我乱写的，看你业务需求，还有不要把注释复制进去，我怕有什么影响，
//修改这个文件一定要重启服务，而不是刷新，

第二步创建一个vue.config.js

module.exports = {
    devServer:{
        //自动打开页面
        open: true,
        //代理
        proxy:{
              // 对象中键是本地请求地址,值是代理服务器配置对象
             // 注意: vue/cli已经安装并配置了代理模块,可以直接用
            "/dev-api":{
                target:'http://127.0.0.0:9528',// 要跨域的域名
                //是否开启跨域
                changeOrigin: true,
                // 其实，用代理的话, 首先你得有一个标识, 告诉他你这个连接要用代理. 不然的话, 可能你的 html, css, js这些静态资源都跑去代理. 所以我们只要接口用代理, 静态文件用本地.
                pathRewrite:{
                    // "^/dev-api"：{}表示接口^/dev-api以开头的要用代理，^/dev-api就是上面的地址
                  '^/dev-api':'/api',//
                //   '^/dev-api': ''表示把/dev-api替换为‘’(空字符串)，这样既能使用代理，又能在请求接口api时去掉/dev-api，获得正确的短信api路径
                }
            }
        }
    }
}

第三步需要去请我用的axios请求

我们要使用axios请求就需要安装这个插件
这个是安装命令

npm install axios --save

1.创建一个request.js文件

import axios from 'axios --save'

const service = axios.create({
 // baseURL   // 设置url的基础结构，发送请求配置时只需要设置url即可，axios会自动将两者进行拼接
  baseURL: process.env.VUE_APP_BASE_API,  //这就是获取.env文件里面写的地址
  //timeout    // 超时请求时间，单位是ms 超过请求时间，请求就会被取消
  timeout: 5000 
})

//请求拦截器
service.interceptors.request.use(
   config => {
    return config
  },
  error => {
    return error
  }
)
//相应拦截器
service.interceptors.response.use(
  response => {
    return response 
  },
  error => {
    return error
  }
)

export default service

第四步请求参数

在创建一个js文件

import request from './request.js'

//获取商品列表
//options={}//这样写可以在里面传参
 export  function getShopList(options={}){
    return  request({
        url:'/goodList',//我要请求的参数
        method:'get',
        params:options,
    })
   
}

最后一步在页面上使用

<template>
  <div id="app"></div>
</template>

<script>
import { getShopList } from "./shop.js";
export default {
  name: "App",
  methods: {
    //这是为了不用再页面.then，这种写必须写在异步里面，
    async getShopList_init() {
    //可以向里面传参
      let result = await getShopList({
        //这个是我请求我服务器里面的数据的页数，这里面就可以写你要请求的数据，根据你自己的需求
        page:1,
      });
      console.log(result.data);
    },
  },
  created() {
    // console.log(getShopList());
    this.getShopList_init();
  },
};
</script>

<style>
</style>

最后效果图