Table of contents
hello, this article is the fourth and fourth chapter of Vue2 study notes: ajax in Vue.
ajax in Vue
Vue scaffolding configuration proxy
method one
Add the following configuration in vue.config.js:
devServer:{
proxy:"http://localhost:5000"
}
illustrate:
1 Advantage: Simple configuration, just send it to the front end (8080) when requesting resources.
2. Disadvantages: Multiple proxies cannot be configured, and it is not possible to flexibly control whether requests go through proxies.
3. Working method: If the proxy is configured according to the above, when a resource that does not exist in the front end is requested, the request will be forwarded to the server (matching front-end resources first)
<template>
<div>
<button @click="getStudents">获取学生信息</button>
<button @click="getCars">获取汽车信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'App',
methods: {
getStudents(){
axios.get('http://localhost:8080/students').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
},
//加了开头
getCars(){
axios.get('http://localhost:8080/demo/cars').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
}
},
}
</script>
Method Two
Write vue.config.js to configure specific proxy rules:
module.exports = {
devServer: {
proxy: {
'/api1': {
// 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {
'^/api1': ''}
},
'/api2': {
// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {
'^/api2': ''}
}
}
}
}
/*
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
changeOrigin默认值为true
*/
illustrate:
1. Advantages: Multiple proxies can be configured, and it is possible to flexibly control whether requests go through proxies.
2. Disadvantage: The configuration is slightly cumbersome, and a prefix must be added when requesting resources.
slot
1 Function: Let the parent component insert the html structure to the specified position of the child component, and it is also a way of communication between components, which is suitable for <strong style="color:red">parent components ===> child components </strong>.
2. Classification: default slots, named slots, scoped slots
3. How to use:
-
Default slot:
父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template> <div> <!-- 定义插槽 --> <slot>插槽默认内容...</slot> </div> </template> -
Named slots:
父组件中： <Category> <template slot="center"> <div>html结构1</div> </template> <template v-slot:footer> <div>html结构2</div> </template> </Category> 子组件中： <template> <div> <!-- 定义插槽 --> <slot name="center">插槽默认内容...</slot> <slot name="footer">插槽默认内容...</slot> </div> </template> -
Scoped slots:
Understanding: The data is in the component itself, but the structure generated according to the data needs to be determined by the user of the component. (The games data is in the Category component, but the structure traversed by using the data is determined by the App component)
Specific encoding:
父组件中： <Category> <template scope="scopeData"> <!-- 生成的是ul列表 --> <ul> <li v-for="g in scopeData.games" :key="g">{ {g}}</li> </ul> </template> </Category> <Category> <template slot-scope="scopeData"> <!-- 生成的是h4标题 --> <h4 v-for="g in scopeData.games" :key="g">{ {g}}</h4> </template> </Category> 子组件中： <template> <div> <slot :games="games"></slot> </div> </template> <script> export default { name:'Category', props:['title'], //数据在子组件自身 data() { return { games:['红色警戒','穿越火线','劲舞团','超级玛丽'] } }, } </script>
(Note: The .vue file in the above part does not have a corresponding .vue code template, and the code cannot be highlighted, so the html format is selected)