永兴做网站_开发公司产品部课件_做什么推广最赚钱_怎么seo网站排名

4 Vue中的ajax

4.1 解决开发环境Ajax跨域问题

vue脚手架配置代理

配置参考 | Vue CLI
方法一：在vue.config.js中添加如下配置:

module.exports = {devServer: {proxy: 'http://localhost:4000'}
}

说明:
1.优点:配置简单，请求资源时直接发给前端(8080)即可。
2.缺点:不能配置多个代理，不能灵活的控制请求是否走代理。
3.工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)

方法二编写vue.config.js配置具体代理规则:

module.exports = {devServer:{prqxy:'/api1':{// 匹配所有以'/api1'开头的请求路径target:'http://localhost:5000'，//代理目标的基础路径changeOrigin:true,pathRewrite:{'^/api1':・'}},'/api2':{// 匹配所有以'/api2'开头的请求路径target:'http://localhost:5001',//代理目标的基础路径changeOrigin:true,pathRewrite:{'^/api2':''}}}}
}
/*  change0rigin设置为true时，服务器收到的请求头中的host为:1ocalhost:5000-撒谎change0rigin设置为false时，服务器收到的请求头中的host为:1ocalhost:8080-诚实change0rigin默认值为true
*/

4.2 github用户搜索案例-axios

新建项目文件夹

components文件：

MySearch.vue:

<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyword"/><button @click="searchUsers">Search</button></div></section>
</template><script>import axios from 'axios'export default {name:'MySearch',data(){return{keyword:''}},methods:{searchUsers(){/* 请求前更新List的数据 */this.$bus.$emit('updateListObj',{isFirst:false,isloading:true,errMsg:'',users:[]})axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(response=>{/* 请求成功了后更新List数据 */this.$bus.$emit('updateListObj',{isloading:false,errMsg:'',users:response.data.items})},error=>{/* 请求失败了后更新List数据 */this.$bus.$emit('updateListObj',{isloading:false,errMsg:error.message,users:[]})})}}
}
</script>

MyList.vue:

<template><div class="row"><!-- 展示用户列表 --><div v-show="info.sers.length" class="card" v-for="user in info.users" :key="user.login"> <a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><p class="card-text">{{user.login}}</p></div><!-- 展示欢迎词 --><h1 v-show="info.isFirst">欢迎使用</h1><!-- 展示加载中 --><h1 v-show="info.isloading">Loading......</h1><!-- 展示错误信息 --><h1 v-show="info.errMsg">{{info.errMsg}}</h1></div>
</template><script>export default {name:'MyList',data(){return{info:{isFirst:true,isloading:false,errMsg:'',users:[]}}},mounted(){this.$bus.$on('updateListData',(dataObj)=>{console.log(dataObj)//this.users = usersthis.info = {...this.info,...dataObj}})},
}
</script><style scoped>.album{min-height: 50rem;padding-top: 3rem;padding-bottom: 3rem;background: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
</style>

App.vue

<template><div class="container"><MySearch/><MyList/></div></template><script>
import MySearch from './components/MySearch'
import MyList from'./components/MyList'export default {name:'App',components:{MySearch,MyList}
}
</script><style></style>

main.js

/* 该文件是整个项目的入口文件 */
//引入vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建vue实例对象-vm
new Vue({render: h => h(App),beforeCreate(){Vue.prototype.$bus = this}
}).$mount('#app')

引入第三方文件：

/*!* Bootstrap v3.3.5 (http://getbootstrap.com)* Copyright 2011-2015 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

案例效果：

4.3 vue-resource-已不再维护

下载：

npm i vue-resource

main.js引用：

//引入插件
import vueResource from 'vue-resource'

MySearch.vue更改：

<template>
......
</template><script>export default {......methods:{searchUsers(){/* 请求前更新List的数据 */this.$bus.$emit('updateListObj',{isFirst:false,isloading:true,errMsg:'',users:[]})//更改此处前缀即可this.$http.get(`https://api.github.com/search/users?q=${this.keyword}`).then(。。。。。。)}}
}
</script>

4.4 插槽

1.作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===>子组件
2.分类:默认插槽、具名插槽、作用域插槽

案例演示

4.4.1 默认插槽

模板：

父组件中:<Category><div>html结构1</div></Category>
子组件中:
<template><div><!--定义插槽 --><slot>插槽默认内容...</slot></div>
</template>

MyCategory.vue

<template><div class="category"> <h3>{{title}}分类</h3><ul><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></ul></div>
</template><script>export default {name:'MyCategory',props:['title']}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>