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,默认值为true
changeOrigin: 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文章来源:https://www.toymoban.com/news/detail-486219.html
<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"/>
<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">
<!-- 展示用户列表 -->
<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", (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"/>
<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">
<!-- 展示用户列表 -->
<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", (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文章来源地址https://www.toymoban.com/news/detail-486219.html
<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>
到了这里,关于Vue中的Ajax 配置代理 slot插槽的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!