4.1.Vue脚手架配置代理

本案例需要下载axios库npm install axios

配置参考文档Vue-Cli devServer.proxy

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 **JSON **的格式来写

4.1.1.方法一

在vue.config.js中添加如下配置

module.exports = { 
devServer : { proxy:"http://localhost:5000" } 
}

说明

优点：配置简单，请求资源时直接发给前端（8080）即可
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，才会将请求会转发给服务器（优先匹配前端资源）

4.1.2.方法二

编写vue.config.js配置具体代理规则

module.exports = {devServer: {proxy: {'/api1': {                            // 匹配所有以 '/api1'开头的请求路径target: 'http://localhost:5000',    // 代理目标的基础路径pathRewrite: {'^/api1':''},         // 代理往后端服务器的请求去掉 /api1 前缀ws: true,                           // 用于支持websocket,默认值为truechangeOrigin: true                  // 用于控制请求头中的host值,默认值为true },'/api2': {target: 'http://localhost:5001',pathRewrite: {'^/api2': ''},changeOrigin: true}}}
}/*** changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000* changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080* changeOrigin默认值为true*/

说明

优点：可以配置多个代理，且可以灵活的控制请求是否走代理
缺点：配置略微繁琐，请求资源时必须加前缀

vue.config.js

const { defineConfig } = require('@vue/cli-service')module.exports = {pages: {index: {// page 的入口entry: './src/main.js'}},// 关闭语法检查lintOnSave: false,// 开启代理服务器 (方式一)// devServer: { //   proxy:"http://localhost:5000" // }// 开启代理服务器 (方式二)devServer: {proxy: {'/api1': {target: 'http://localhost:5000',pathRewrite: {'^/api1': ''}// ws: true, //用于支持websocket,默认值为true// changeOrigin: true //用于控制请求头中的host值,默认值为true , },'/api2': {target: 'http://localhost:5001',pathRewrite: {'^/api2': ''},}}}
}

src/App.vue

<template><div><button @click="getStudents">获取学生信息</button></div>
</template> <script> // 引入组件import axios from 'axios';export default { name:'App',methods: {getStudents() {axios.get('http://localhost:8080/api1/students').then(response => { console.log('请求成功了',response.data);},error => { console.log('请求失败了',error.message);})},getCars() {axios.get('http://localhost:8080/api2/cars').then(response => { console.log('请求成功了',response.data); },error => { console.log('请求失败了',error.message); });}}}
</script>

在这里插入图片描述

4.2.GitHub用户搜索案例

public/index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><!-- 针对IE游览器的一个特殊配置，含义是让IE游览器以最高的渲染级别渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 开启移动端的理想视口 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 配置页签图标 --><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 引入bootstrap样式 --> <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"><!-- 配置网页的标题 --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 当游览器不支持js时noscript中的元素就会被渲染--><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- 容器 --><div id="app"></div><!-- built files will be auto injected --></body>
</html>

src/main.js

import Vue from 'vue';
import App from './App.vue';Vue.config.productionTip = false;new Vue({el: '#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this; // 安装全局事件总线}
})

src/App.vue

<template><div class="container"><Search/><List/></div>
</template> <script> // 引入组件import Search from './components/Search.vue';import List from './components/List.vue';export default {name:'App',components:{Search,List},}
</script>

src/components/Search.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"/>&nbsp;<button @click="searchUsers">Search</button></div></section>
</template><script>import axios from "axios";export default {name: "Search",data() {return {keyWord: ""};},methods: {searchUsers() {// 请求前更新List的数据this.$bus.$emit("updateListData", {isLoading: true,errMsg: "",users: [],isFirst: false,});axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then((response) => {console.log("请求成功了");// 请求成功后更新List的数据this.$bus.$emit("updateListData", {isLoading: false,errMsg: "",users: response.data.items});},(error) => {// 请求后更新List的数据this.$bus.$emit("updateListData", {isLoading: false,errMsg: error.message,users: []});});}}}
</script>

src/components/List.vue

<template><div class="row"><!-- 展示用户列表 --><divv-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", (dataObj) => {this.info = { ...this.info, ...dataObj };});}}
</script><style scoped>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: 0.75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: 0.75rem;border-radius: 100px;}.card-text {font-size: 85%;}
</style>

在这里插入图片描述

4.3.vue-resource

vue项目常用的两个Ajax库

axios：通用的Ajax请求库，官方推荐，效率高
vue-resource：vue插件库，vue 1.x使用广泛，官方已不维护

下载vue-resource库npm i vue-resource

src/main.js

import Vue from 'vue';
import App from './App.vue';
import vueResource from 'vue-resource';Vue.config.productionTip = false;Vue.use(vueResource);new Vue({el: '#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this; // 安装全局事件总线}
})

src/App.vue

<template><div class="container"><Search/><List/></div>
</template> <script> // 引入组件import Search from './components/Search.vue';import List from './components/List.vue';export default {name:'App',components:{Search,List},}
</script>

src/components/Search.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"/>&nbsp;<button @click="searchUsers">Search</button></div></section>
</template><script>export default {name: "Search",data() {return {keyWord: ""};},methods: {searchUsers() {// 请求前更新List的数据this.$bus.$emit("updateListData", {isLoading: true,errMsg: "",users: [],isFirst: false,});this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then((response) => {console.log("请求成功了");// 请求成功后更新List的数据this.$bus.$emit("updateListData", {isLoading: false,errMsg: "",users: response.data.items});},(error) => {// 请求后更新List的数据this.$bus.$emit("updateListData", {isLoading: false,errMsg: error.message,users: []});});}}}
</script>

src/components/List.vue

<template><div class="row"><!-- 展示用户列表 --><divv-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", (dataObj) => {this.info = { ...this.info, ...dataObj };});}}
</script><style scoped>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: 0.75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: 0.75rem;border-radius: 100px;}.card-text {font-size: 85%;}
</style>

4.4.slot 插槽

<slot>插槽：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件

分类：默认插槽、具名插槽、作用域插槽

使用方式

默认插槽

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

具名插槽，父组件指明放入子组件的哪个插槽slot=“footer”，如果是template可以写成v-slot:footer

父组件中： <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>

作用域插槽，scope用于父组件往子组件插槽放的html结构接收子组件的数据；理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

注意：关于样式，既可以写在父组件中，解析后放入子组件插槽；也可以放在子组件中，传给子组件再解析

父组件中： <Category> <template scope="scopeData"> <!-- 生成的是ul列表 --> <ul> <li v-for="g in scopeData.games" :key="g">{{g}}</li> </ul> </template><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>

4.4.1.默认插槽

src/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="(item, index) in games" :key="index">{{item}}</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>.container {display: flex;justify-content: space-around;}
</style>

src/components/Category.vue

<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>export default {name: "Category",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>

在这里插入图片描述

4.4.2.具名插槽

src/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="http://www.atguigu.com">更多美食</a></Category><Category title="游戏"><ul slot="center"><li v-for="(item, index) in games" :key="index">{{item}}</li></ul><div class="foot" slot="footer"><a href="http://www.atguigu.com">单机游戏</a> <a href="http://www.atguigu.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="http://www.atguigu.com">经典</a> <a href="http://www.atguigu.com">热门</a> <a href="http://www.atguigu.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>.container,.foot {display: flex;justify-content: space-around;}h4{text-align: center;}
</style>

src/components/Category.vue

<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot><slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot></div>
</template><script>export default {name: "Category",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>

在这里插入图片描述

4.4.3.作用域插槽

src/App.vue

<template><div class="container"><Category title="游戏"><template scope="liqb"><ul><li v-for="(item, index) in liqb.games" :key="index">{{item}}</li></ul></template></Category><Category title="游戏"><template scope="{games}"><ol><li style="color:red" v-for="(item, index) in games" :key="index">{{item}}</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>.container,.foot {display: flex;justify-content: space-around;}h4{text-align: center;}
</style>

src/components/Category.vue

<template><div class="category"><h3>{{title}}分类</h3><slot :games="games" msg="hello">我是默认的一些内容</slot></div>
</template><script>export default {name: "Category",props:['title'],data() {return {games: ['红色警戒','穿越火线','劲舞团','超级玛丽']}}}
</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>