vue项目笔记(14)-axios实现数据(模拟数据)请求
axios实现数据(模拟数据)请求1、在终端运行以下命令,安装axiosnpm install axios --save2、进行需求分析,在本例中首页Home组件中有Header、Swiper、Icons、Recommend、Weekend等5个子组件需要进行数据绑定。换言之,我们需要发起5次ajax请求,但是频繁发起ajax请求,网站的性能必定是很低的。所以,我们需要尽量减少网络请...
axios实现数据(模拟数据)请求
1、在终端运行以下命令,安装axios
npm install axios --save
2、进行需求分析,在本例中首页Home组件中有Header、Swiper、Icons、Recommend、Weekend等5个子组件需要进行数据绑定。换言之,我们需要发起5次ajax请求,但是频繁发起ajax请求,网站的性能必定是很低的。所以,我们需要尽量减少网络请求的次数,我们可以通过父组件Home发起数据请求,然后把数据传给子组件就可以了。
3、利用axios发起网络请求的步骤
(1)首先,在父组件Home中引入,在mounted钩子中发起请求
import axios from "axios"
import axios from "axios"
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper"
import HomeIcons from "./components/Icons"
import HomeRecommend from "./components/Recommend"
import HomeWeekend from "./components/Weekend"
export default {
name: "Home",
data() {
return {
city: '',
iconList:[],
recommendList:[],
swiperList:[],
weekendList:[]
};
},
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend,
HomeWeekend
},
mounted(){
this.getHomeInfo();
},
methods: {
getHomeInfo(){
// axios返回的结果是一个promise对象
axios.get('/api/index.json').then(
// 注意:这里绝对不可以写成this.getHomeInfoSucc(),否则请求的结果会是undefined
this.getHomeInfoSucc
)
},
getHomeInfoSucc(res){
console.log(res);
res = res.data;
if (res.ret && res.data) {
this.city = res.data.city;
this.swiperList = res.data.swiperList;
this.iconList = res.data.iconList;
this.recommendList = res.data.recommendList;
this.weekendList = res.data.weekendList;
}
}
}
};
(2)在没有后端支持的时候,我们可以通过json文件进行数据模拟。但是,对应的json文件应该放在什么位置呢?在vue项目目录中,static文件夹是存放的静态文件,只有该文件夹下的文件可以被外界访问到(验证方法:地址栏输入对应static文件夹下面json文件的正确路径如:http://localhost:8080/static/mock/index.json)。发现,对应的模拟数据index.json文件的内容,可以看到,如下:
(3)此外,对于模拟数据,我们不希望把它们上传至线上,应该怎么处理呢?其实,很简单,我们只要忽略上传它们即可。具体做法是:打开.gitignore文件,在忽略的文件中,我们添加上模拟数据所在的文件路径(static、mock)即可。如图:
(4)网络请求的地址应该怎么写呢?上线之前修改代码是很忌讳的。我们设想一下,如果可以实现转发,那就再好不过了。在开发环境中,把api下面json文件的请求转化到本地的文件夹下。很幸运,vue中webpack-dev-server提供了代理功能,具体做法如下:打开config-index.js文件,做以下修改。需要注意的是:在修改了配置文件之后,我们需要重启项目npm run dev。
proxyTable: {
'/api': {
target: 'http://localhost:8080', //设置转化的域
pathRewrite:{
'^/api': '/static/mock' // 路径替换
}
}
更多推荐
所有评论(0)