vue2 请求数据渲染
在vue的项目中，一般使用：axios、fetch来发起这个请求
安装axios : cnpm install axios -S 或者使用yarn add axios
使用axios来请求接口
注意：在created中发起请求
发请求到的数据渲染到页面
<template>
<div id="app">
<ul>
<li v-for='item in list' :key='item.id'>
<img :src="item.imageUrl">
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
list:[]
}
},
created(){
axios({
url:'http://testapi.xuexiluxian.cn/api/slider/getSliders'
}).then(res=>{
this.list = res.data.data.list;
})
}
}
</script>
axiox基本写法
axios.get('url?act=1&id=2')
axios.post('url',{
act:1,
id:2
})
let res = await axios({
url:'',
method:'post'//默认是get请求
headers:{}//自定义请求头
data:{} //post请求，前端给后端传递的参数
params:{} //get请求，前端给后端传递的参数
timeout:0//请求超时
responseType:'json',//返回的数据类型
})
axios的二次封装
3.1 在src中新建一个目录utils/request.js
3.2 在request.js写入
import axios from 'axios'
//1. 创建axios对象
const instance = axios.create({
baseURL: 'http://testapi.xuexiluxian.cn/api',
timeout: 5000,
});
//2. 请求拦截器 ===> 前端给后端的参数 [还没到后端响应]
instance.interceptors.request.use(function (config) {
//登录的判断,如果用户是登录状态，会在headers中把用户的token传递给后端
console.log( 1 );
return config;
}, function (error) {
return Promise.reject(error);
});
//3. 响应拦截器 ===> 后端给前端的数据 [后端返回给前端]
instance.interceptors.response.use(function (response) {
//后端给前端数据的时候，会有code码
console.log( 2 );
return response;
}, function (error) {
return Promise.reject(error);
});
//最终返回的axios对象
export default instance;
请求跨域问题
如果测试出现跨域问题
-
cnpm install -g express
-
cnpm install -g express-generator
-
express server --view=ejs
-
server/routes/index.js 自己写一个接口
router.get('/list', function(req, res, next) { res.send({ a:'1' }) }); -
重启server
-
出现跨域的报错
Access to XMLHttpRequest at 'http://localhost:3000/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
设置代理解决
vue.config.js配置：https://cli.vuejs.org/zh/config/
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在“开发环境”下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
***注意：设置代理在开发环境生效，生产环境不生效！！！
在vue.config.js中配置代理来解决跨域的问题
devServer: {
proxy: 'http://localhost:3000'
}
***注意：设置完代理后，一定要重启一下
vue的环境变量
因为devServer.proxy仅在开发阶段生效,所以生产阶段其实是不生效的
项目打包 npm run build
创建环境变量文件
在vue项目根目录创建：
.env.development ==》开发环境
.env.production ==》生产环境
.env文件中属性名必须以 VUE_APP_开头
***调用要重启vue项目
调用.env文件中的变量
process.env.VUE_APP_XXX