vue中代理服务器使用

11次阅读
没有评论

vue中代理服务器的使用

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

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

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

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

vue中代理服务器使用

# 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

vue中代理服务器使用

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文件
vue中代理服务器使用

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文件
vue中代理服务器使用

import request from './request.js'

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

}

最后一步在页面上使用

vue中代理服务器使用

<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>

最后效果图

vue中代理服务器使用

神龙|纯净稳定代理IP免费测试>>>>>>>>天启|企业级代理IP免费测试>>>>>>>>IPIPGO|全球住宅代理IP免费测试

相关文章:

版权声明:代理IP2022-11-25发表,共计2155字。
新手QQ群:570568346,欢迎进群讨论 Python51学习