VUE
1.Axios发送get请求
方式1:axios.get(url)
// 引入axios
import axios from 'axios'
// 调用get方法发送get请求
let url = 'http://ip:port/api?name=zs&pwd=1234'
axios.get(url).then(res=>{
// .then()中的回调方法,将会在请求成功,获取响应后自动执行
// res就是请求成功后,axios封装的响应数据对象
}).catch(err=>{
// 如果请求失败,执行catch中的回调方法
})
方式2:axios(url)
axios(url).then(res=>{
// res就是请求成功后,axios封装的响应数据对象
}).catch(err=>{
// 如果请求失败,执行catch中的回调方法
})
方式3:axios.create().get()
//创建axios实例
let url = 'https://web.codeboy.com/bmdapi/movie-infos'
let instance = axios.create()
instance(url,{
method:'get',
params:{page:1,pagesize:10},
headers:{'headername':'headervalue'}
}).then(res => {
console.log(res)
this.data = res.data.data
})
2.Axios发送post请求
方式1:
let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
let data = `name=${this.keyword}&page=1&pagesize=10`
axios.post(url, data).then(res => {
console.log(res)
})
方式2:
let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
let instance = axios.create()
instance(url,{
method:'post',
data: `name=${this.keyword}&page=1&pagesize=10`,
headers:{'headername':'headervalue'}
}).then(res => {
console.log(res)
this.data = res.data.data
})
一个object转formdata格式字符串的模块:qs
安装命令:npm i qs
调用方法,将对象转成formdata格式的字符串
3.请求案例(原生)
方法1:
<template>
<div>
<input type="text" v-model="keyword" placeholder="请输入查询关键字" />
<button @click="getMoviesLike">点我模糊查询电影列表</button>
<table style="width: 800px; margin: 0px auto">
<button @click="getMovies">点我加载电影数据</button>
<thead>
<tr>
<td>封面</td>
<td>电影名称</td>
<td>主演</td>
<td>类型</td>
<td>上映时间</td>
<td>时长</td>
<td>评分</td>
</tr>
</thead>
<tbody v-for="item in data.result" :key="item.id">
<tr>
<td>
<img width="100px" :src="item.cover" />
</td>
<td>{{ item.title }}</td>
<td>{{ item.star_actor }}</td>
<td>{{ item.type }}</td>
<td>{{ item.showingon }}</td>
<td>{{ item.duration }}分钟</td>
<td>{{ item.score }}分</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
keyword: '', //绑定搜索关键字
data: {}, //绑定电影数据请求的响应结果:{page,pagesize,result total}
}
},
methods: {
//模糊查询(post)
getMoviesLike() {
let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
let data = `name=${this.keyword}&page=1&pagesize=10`
axios.post(url, data).then(res => {
console.log(res)
})
},
//获取电影(get)
getMovies() {
let url = 'https://web.codeboy.com/bmdapi/movie-infos?page=1&pagesize=5'
axios.get(url).then(res => {
console.log(res)
//将结果对象存入this.data : {page,pagesize,result total}
this.data = res.data.data
})
},
},
}
</script>
<style lang="scss" scoped></style>
方法2:
<template>
<div>
<input type="text" v-model="keyword" placeholder="请输入查询关键字" /><br />
<button @click="getMoviesLike">点我模糊查询电影列表</button>
<br /><br />
<button @click="getMovies">点我加载全部电影数据</button>
<table style="width: 800px; margin: 0px auto">
<thead>
<tr>
<td>封面</td>
<td>电影名称</td>
<td>主演</td>
<td>类型</td>
<td>上映时间</td>
<td>时长</td>
<td>评分</td>
</tr>
</thead>
<tbody v-for="item in data.result" :key="item.id">
<tr>
<td>
<img width="100px" :src="item.cover" />
</td>
<td>{{ item.title }}</td>
<td>{{ item.star_actor }}</td>
<td>{{ item.type }}</td>
<td>{{ item.showingon }}</td>
<td>{{ item.duration }}分钟</td>
<td>{{ item.score }}分</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
export default {
data() {
return {
keyword: '', //绑定搜索关键字
data: {}, //绑定电影数据请求的响应结果:{page,pagesize,result total}
}
},
methods: {
//模糊查询(post)
getMoviesLike() {
let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
let params = qs.stringify({ name: this.keyword, page: 1, pagesize: 10 })
let instance = axios.create()
instance(url, {
method: 'post',
data: params,
headers: { headername: 'headervalue' },
}).then(res => {
console.log(res)
this.data = res.data.data
})
},
//获取电影(get)
getMovies() {
let url = 'https://web.codeboy.com/bmdapi/movie-infos'
let instance = axios.create()
instance(url, {
method: 'get',
params: { page: 1, pagesize: 10 },
headers: { headername: 'headervalue' },
}).then(res => {
console.log(res)
this.data = res.data.data
})
},
},
}
</script>
<style lang="scss" scoped></style>
4.封装Axios
期望:无论发送get还是post,不用写太多代码,简单的调用get、post方法,传url与对象参数即可完成发送请求和接收响应
//MyAxios.js
import axios from 'axios'
const instance = axios.create() //创建axios实例
import qs from 'qs'
const myaxios = {
/**
* 用于发送get请求
* @param {String} url 请求资源路径
* @param {Object} params 请求参数
* @returns Promise
*/
get(url, params) {
return instance({
url,
method: 'get',
params,
})
},
/**
* 用于发送post请求
* @param {String} url 请求资源路径
* @param {Object} params 请求参数(对象类型)
* @returns Promise
*/
post(url, params) {
return instance({
url,
method: 'post',
data: qs.stringify(params),
})
},
}
export default myaxios
<template>
<div>
<input type="text" v-model="keyword" placeholder="请输入查询关键字" /><br />
<button @click="getMoviesLike">点我模糊查询电影列表</button>
<br /><br />
<button @click="getMovies">点我加载全部电影数据</button>
<table style="width: 800px; margin: 0px auto">
<thead>
<tr>
<td>封面</td>
<td>电影名称</td>
<td>主演</td>
<td>类型</td>
<td>上映时间</td>
<td>时长</td>
<td>评分</td>
</tr>
</thead>
<tbody v-for="item in data.result" :key="item.id">
<tr>
<td>
<img width="100px" :src="item.cover" />
</td>
<td>{{ item.title }}</td>
<td>{{ item.star_actor }}</td>
<td>{{ item.type }}</td>
<td>{{ item.showingon }}</td>
<td>{{ item.duration }}分钟</td>
<td>{{ item.score }}分</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import myaxios from './http/MyAxios'
export default {
data() {
return {
keyword: '', //绑定搜索关键字
data: {}, //绑定电影数据请求的响应结果:{page,pagesize,result total}
}
},
methods: {
//模糊查询(post)
getMoviesLike() {
let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
let params = { name: this.keyword, page: 1, pagesize: 10 }
myaxios.post(url, params).then(res => {
this.data = res.data.data
})
},
//获取电影(get)
getMovies() {
let url = 'https://web.codeboy.com/bmdapi/movie-infos'
myaxios.get(url, { page: 1, pagesize: 10 }).then(res => {
this.data = res.data.data
})
},
},
}
</script>
<style lang="scss" scoped></style>
5.Vue的自定义组件
被vue管理的标签可以认为是vue的组件。在项目开发过程中,经常会用到一些需要复用的标签结构以及相应样式。vue提供了自定义组件的语法,可以让开发者将一些需要复用的页面结构,样式功能组织在一起,作为一个整体存在在项目中。当需要使用这个组件时,直接引用该组件即可,例如:
<div>
<!-- 该组件就称为一个自定义组件,由开发者自行设计
标签名自定义,属性自定义,事件自定义 -->
<person src="图片路径" name="名字"></person>
</div>
如何设计并实现一个自定义组件
目标:设计一个组件,模仿标签的样式,方便的进行使用
实现步骤:
①设计一个自定义组件(外观、功能、未来如何复用)
②定义一个组件:在components目录下新建MyTag.vue 并在该组件中定义基础样式(注意:< script > export default { } < /script > )
③使用该组件时
1>先引用MyTag组件(MyTag可以被vue自动识别为my-tag)
2>直接通过标签名,使用该组件<my-tag></my-tag> <MyTag></MyTag> <MyTag />
3>动态更改组件属性
总结
注意复习:axios发送请求,封装axios,自定义组件