<template>
<div id="home">
<nav-bar class="home-nav"><div slot="center">小蘑菇</div></nav-bar>
</div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import { getHomeDate1, getHomeDate2 } from 'network/home'
export default {
name: 'Home',
data () {
return {
msg: String
}
},
components: {
NavBar
},
created () {
getHomeDate1().then(res => {
console.log(res.data)
})
getHomeDate2().then(res => {
console.log(res.data)
})
方式一:
axios.get('https://m.jiuxian.com/m_v1/promote/qgajax.do?t=1614091975366&pagenum=1&tabnum=1').then(res => {
console.log(res.data)
})
方式二,需要设置请求头的时候使用
axios({
method: ''
url: 'https://m.jiuxian.com/m_v1/statics/getzx.htm?topicId=1165&pageNum=1',
headers: {
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1614085036108310485270529","bc":"210300"}',
'X-Host': 'mall.film-ticket.film.list'
}
}).then(res => {
console.log(res.data)
})
方式三,把真正发送请求的动作写到对应的文件中如:在src下新建network文件夹,此文件夹内再新建home文件夹,
里面专门放home页需要请求的数据,还可以新建一个公共的请求配置文件夹,里面放请求工具的初始化配置这样
防止使用的请求工具后期万一不再更新 就可以直接到这个初始化的配置文件里去更改新的请求配置,更加简化了
.vue文件里的代码块,数据多了难免会出现耦合问题,这样给他加了一个中间模块统一处理后对应的.vue只需面向我
这个模块发开就会贼清晰
getHomeDate1().then(res => {
console.log(res.data)
})
getHomeDate2().then(res => {
console.log(res.data)
})
}
}
</script>
**配置的专门的请求文件如下:**
1.第一步
<script>
import axios from 'axios'
export function request (config) {
const instance = axios.create({
baseURL: 'https://m.jiuxian.com/m_v1',
timeout: 10000
})
return instance(config)
}
</script>
2.第二步
<script>
import { request } from './request'
export function getHomeDate1 () {
return request({
url: '/statics/getzx.htm?topicId=1165&pageNum=1'
})
}
export function getHomeDate2 () {
return request({
url: '/promote/qgajax.do?t=1614091975366&pagenum=1&tabnum=1'
})
}
</script>
<style lang="scss" scoped>
.home-nav{
background-color: rgba(167, 76, 252, 0.6);
}
</style>
反向代理的配置
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
devServer: {
proxy: {
'/ajax': {
target: 'https://m.maijiuwang.com',
changeOrigin: true
}
}
},
lintOnSave: false,
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('./src'))
.set('components', resolve('./src/components'))
.set('assets', resolve('./src/assets'))
.set('views', resolve('./src/views'))
.set('network', resolve('./src/network'))
}
}