【vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽】
vue脚手架配置代理+github用户搜索案例+vue项目中常用的发送Ajax请求的库+slot插槽
- 1 vue脚手架配置代理
- 2 github用户搜索案例
-
- 2.1 静态列表
- 2.2 列表展示
- 2.3 完善案例
- 3 vue项目中常用的发送Ajax请求的库
-
- 3.1 xhr
- 3.2 jQuery
- 3.3 axios
- 3.4 fetch
- 3.5 vue-resource
- 4 slot 插槽
-
- 4.1 效果
- 4.2 理解
1 vue脚手架配置代理
- 下载axios
- 引用axios：
import axios from 'axios' - 解决跨域方法：
1> cors：http://t.csdnimg.cn/VdMIT
2> jsonp：用的少，只能解决get请求的跨域问题
3> 配置一个代理服务器
- 配置一个代理服务器方式一：
开启8080代理服务器方式：nginx(较复杂，需借助后端知识) 、vue-cli(重点)。
1> 第一步：先通过cmd打开两台服务器
打开结果如下图所示：
如忘记打开，终端将会出现GET http://localhost:8081/students 500 (Internal Server Error)错误。
2> 第二步：在vue.config.js文件里面，加入此语句
3> 第三步：更改App.vue文件中的端口号
4> 第四步：点击按钮后，请求结果如下
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：1.不能配置多个代理
2.不能灵活控制走不走代理
- 配置一个代理服务器方式二：
1> 第一步：依旧先通过cmd打开两台服务器
2> 第二步：在vue.config.js文件里面，加入此语句
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080 changeOrigin默认值为true
3> 第三步：更新App.vue文件中的内容
4> 第四步：点击按钮后，请求结果如下
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。
2 github用户搜索案例
2.1 静态列表
- 目录展示：
- App.vue:
- Search.vue:
- List.vue:
- index.html:
2.2 列表展示
- List组件和Search组件为兄弟组件，可使用全局事件总线、消息订阅与发布、把数据交给最外侧App等方式实现数据传递。
- main.js:
- Search.vue：
<template>
<section class="jumbotron">
<h3 class="jumbotron-heading">Search Github Usersh3>
<div>
<input type="text" placeholder="enter the name you search" v-model="keyWord"/>
<button @click="searchUsers">Searchbutton>
div>
section>
template>
<script>
// 引入axios
import axios from 'axios'
export default {
name:'Search',
data() {
return {
keyWord:''
}
},
methods: {
searchUsers() {
// 模板字符串
axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
response => {
console.log('请求成功了');
this.$bus.$emit('getUsers',response.data.items)
},
error => {
console.log('请求失败了',error.message);
}
)
}
}
}
script>
- List.vue:
<template>
<div class="row">
<div class="card" v-for="user in 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>
div>
template>
<script>
export default {
name:'List',
data() {
return {
users:[]
}
},
// 利用全局事件总线
mounted() {
this.$bus.$on('getUsers',(users)=>{
console.log('我是List组件，收到了数据：',users);
this.users = users
})
}
}
script>
<style>
.album {
min-height: 50rem; /* Can be removed; just added for demo purposes */
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #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>
- 效果展示(点击头像跳转到用户github主页)：
2.3 完善案例
- 以上展示了请求成功时的呈现(users)，还需对其它三种展示进行完善。
- 1> 添加一个欢迎词(welcome)
- 2> 当内容未加载出来时添加一个加载中(loading)
- 3> 添加一个请求失败时的呈现(error)
- List.vue:
<template>
<div class="row">
<div v-show="info.users.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">加载中....h1>
<h1 v-show="info.errMsg">{{info.errMsg}}h1>
div>
template>
<script>
export default {
name:'List',
data() {
return {
info:{
isFirst:true, // 是否为初次展示
isLoading:false, // 是否处于加载中
errMsg:'', // 存储错误信息
users:[]
}
}
},
// 利用全局事件总线
mounted() {
// this.$bus.$on('updateListData',(isFirst,isLoading,errMsg,users)=>{
this.$bus.$on('updateListData',(dataObj)=>{
// console.log('我是List组件，收到了数据：',users);
/* this.isFirst = isFirst
this.isLoading = isLoading
this.errMsg = errMsg
this.users = users */
// this.info = dataObj // 此写法没错 但由于isFirst后续不再变化没有书写 会弄丢isFirst数据
// 因此通过字面量的形式去合并对象
this.info = {...this.info,...dataObj}
})
}
}
script>
<style>
.album {
min-height: 50rem; /* Can be removed; just added for demo purposes */
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #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>
- Search.vue：
<template>
<section class="jumbotron">
<h3 class="jumbotron-heading">Search Github Usersh3>
<div>
<input type="text" placeholder="enter the name you search" v-model="keyWord"/>
<button @click="searchUsers">Searchbutton>
div>
section>
template>
<script>
// 引入axios
import axios from 'axios'
export default {
name:'Search',
data() {
return {
keyWord:''
}
},
methods: {
searchUsers() {
// 请求前先更新List的数据
this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
// 发送请求
// 模板字符串
axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
response => {
console.log('请求成功了');
// this.$bus.$emit('getUsers',response.data.items)
// 请求成功后更新List的数据
// 因为isFirst后续不再发生变化 故可删掉
this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
},
error => {
console.log('请求失败了',error.message);
// 请求失败后更新List的数据
this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
}
)
}
}
}
script>
- 效果展示：
3 vue项目中常用的发送Ajax请求的库
3.1 xhr
3.2 jQuery
3.3 axios
- 通用的 Ajax 请求库, 官方推荐，使用广泛。
3.4 fetch
3.5 vue-resource
- vue插件库, vue1.x 使用广泛，官方已不维护。
- 安装：
npm i vue-resource - 引入与使用：
- github用户搜索案例的Search.vue组件需改为：
4 slot 插槽
4.1 效果
App.vue:
<template>
<div class="container">
<Category title="美食" :listData="foods"/>
<Category title="游戏" :listData="games"/>
<Category title="电影" :listData="films"/>
div>
template>
<script>
import Category from './components/Category.vue'
export default {
name:'App',
components:{Category},
data() {
return {
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
films:['《教父》','《拆弹专家》','《你好，李焕英》','《米奇妙妙屋》']
}
}
}
script>
<style lang="css">
.container {
display: flex;
justify-content: space-around;
}
style>
Category.vue:
<template>
<div class="category">
<h3>{{title}}分类h3>
<ul>
<li v-for="(item,index) in listData" :key="index">{{item}}li>
ul>
div>
template>
<script>
export default {
name:'Category',
props:['listData','title']
}
script>
<style>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
style>
App.vue:
<template>
<div class="container">
<Category title="美食">
<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
Category>
<Category title="游戏">
<ul>
<li v-for="(g,index) in games" :key="index">{{g}}li>
ul>
Category>
<Category title="电影">
<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">video>
Category>
div>
template>
<script>
import Category from './components/Category.vue'
export default {
name:'App',
components:{Category},
data() {
return {
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
films:['《教父》','《拆弹专家》','《你好，李焕英》','《米奇妙妙屋》']
}
},
}
script>
<style scoped>
.container {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
style>
Category.vue:
<template>
<div class="category">
<h3>{{title}}分类h3>
<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现slot>
div>
template>
<script>
export default {
name:'Category',
props:['title']
}
script>
<style>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
style>
App.vue:
<template>
<div class="container">
<Category title="美食">
<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
<a slot="footer" href="https://home.meishichina.com/recipe.html">更多美食a>
Category>
<Category title="游戏">
<ul slot="center">
<li v-for="(g,index) in games" :key="index">{{g}}li>
ul>
<div class="foot" slot="footer">
<a href="https://www.baidu.com/">单机游戏a>
<a href="https://www.baidu.com/">网络游戏a>
div>
Category>
<Category title="电影">
<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">video>
<template v-slot:footer>
<div class="foot">
<a href="https://www.baidu.com/">经典a>
<a href="https://www.baidu.com/">热门a>
<a href="https://www.baidu.com/">推荐a>
div>
<h4>欢迎前来观影！h4>
template>
Category>
div>
template>
<script>
import Category from './components/Category.vue'
export default {
name:'App',
components:{Category},
data() {
return {
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
films:['《教父》','《拆弹专家》','《你好，李焕英》','《米奇妙妙屋》']
}
},
}
script>
<style scoped>
.container,.foot {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
h4 {
text-align: center;
}
a {
display: block;
text-align: center;
}
style>
Category.vue:
<template>
<div class="category">
<h3>{{title}}分类h3>
<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1slot>
<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2slot>
div>
template>
<script>
export default {
name:'Category',
props:['title']
}
script>
<style>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
style>
App.vue:
<template>
<div class="container">
<Category title="游戏">
<template scope="atguigu">
<ul>
<li v-for="(g,index) in atguigu.games" :key="index">{{g}}li>
ul>
template>
Category>
<Category title="游戏">
<template scope="{games}">
<ol>
<li v-for="(g,index) in games" :key="index">{{g}}li>
ol>
template>
Category>
<Category title="游戏">
<template slot-scope="{games}">
<h4 v-for="(g,index) in games" :key="index">{{g}}h4>
template>
Category>
div>
template>
<script>
import Category from './components/Category.vue'
export default {
name:'App',
components:{Category},
}
script>
<style scoped>
.container,.foot {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
h4 {
text-align: center;
}
a {
display: block;
text-align: center;
}
style>
Category.vue:
<template>
<div class="category">
<h3>{{title}}分类h3>
<slot :games="games">我是默认的一些内容slot>
div>
template>
<script>
export default {
name:'Category',
props:['title'],
data() {
return {
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
}
},
}
script>
<style>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
style>
4.2 理解
- 父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用slot 技术，注意：插槽内容是在父组件中编译后，再传递给子组件的。
- 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ——> 子组件。
- 分类：默认插槽、具名插槽、作用域插槽
- 使用方式：
1> 默认插槽：
2> 具名插槽：
3> 作用域插槽：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
