创建分支:index-axios
拉取到本地并切换分支:
git pull
git checkout index-axios
安装axios:
npm install axios --save
在Home.vue文件中添加代码:
<script> 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' import axios from 'axios' export default { name: 'Home', components: { HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend }, data () { return { } }, mounted () { this.getHomeInfo() }, methods: { getHomeInfo () { axios.get('/static/mock/index.json').then(this.getHomeInfoSucc) }, getHomeInfoSucc (res) { console.log(res) } } } </script>
然后在static目录下,新建mock文件夹,存储测试用的模拟数据,并创建index.json文件。先随便写个内容
因为是模拟数据,所以我们不希望这个mock文件夹的内容提交到线上,所以要进行设置,打开.gitignore文件,添加:
static/mock
因为static/mock目录里存放的是本地模拟数据,上线的时候肯定不是这个地址。但是也不能上线前现修改代码,所以我们需要直接写线上的地方,然后在本地写个转发机制,把线上地址转到本地模拟数据地址。
Home.vue的请求地址写成:
axios.get('/api/index.json').then(this.getHomeInfoSucc)
然后打开config下的index.js文件:
在dev开发环境里的proxyTable,修改为:
proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api': '/static/mock' } } },
修改配置项后,要重启启动服务,然后就可以看到控制台打印的结果了。
然后把模拟数据复制粘贴到index.json文件中,就可以获取数据了。