1 解决开发环境中的ajax跨域请求问题
1.1 跨域请求问题
我们知道服务器与服务器之间是不存在跨域请求的问题的,但一般在项目中是不允许进行跨域请求的,若要进行跨域请求,就需要借助一台代理服务器了,在进行跨域请求时,我们的请求如果直接发给目标服务器,目标服务器会返回一段具有特殊响应头的响应体数据,那么返回的数据是无法解析的,这时候就需要在本项目的端口配置一台代理服务器,先将请求发送给代理服务器,再又代理服务器转发到目标服务器,然后将代理服务器响应的数据处理后转发到本机服务器。
1.2 使用vue脚手架配置代理服务器
1.2.1 方法一
在vue.config.js中添加如下配置
devServer:{
proxy: 'http://localhost:5000'
}
注意:
- 优点:配置简单,请求资源时直接转发给前端(8080)即可
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理
- 工作方式:若按照上述方法配置代理,会优先匹配前端资源,当请求了前端不存在的资源时,才会将该请求转发给目标服务器。
1.2.2 方法二
编写vue.config.js配置具体代理规则
devServer: {
proxy: {
'/api1': {//配置所有以'/api'开头的请求路径
target: 'http://localhost:5000',//代理服务器的基础路径
pathRewrite: { "^/api1": "" },//路径重写:将所有路径前缀改为空字符串
ws: true, //用于支持web-socket网络套接字
changeOrigin: true //用于控制请求头中的host值
},
'/xbf2': {
pathRewrite: { "^/xbf2": "" },
target: 'http://localhost:5001'
}
}
}
注意:
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理
- 缺点:配置略微繁琐,请求资源时必须加前缀
2 GitHub用户搜索案例
2.1 原生静态html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./bootstrap.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app">
<div class="container">
<section class="jumbotron">
<h3 class="jumbotron-heading">Search Github Users</h3>
<div>
<input type="text" placeholder="enter the name you search"/> <button>Search</button>
</div>
</section>
<div class="row">
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img src="https://cn.vuejs.org/images/logo.svg" style='width: 100px'/>
</a>
<p class="card-text">xxxxxx</p>
</div>
</div>
</div>
</div>
</body>
</html>
index.css
.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%;
}
使用到的第三方库css库:bootstrap.css
2.2 案例要求
- 将静态页面拆分成vue静态组件
- 实现动态组件
2.3 接口地址
https://api.github.com/search/users?q=xxx
3 vue项目中常用的2个ajax库
1 axios
通用ajax请求库,官方推荐,使用广泛
2 vue-resource
vue插件库,vue1.x使用广泛,官方已不再维护。
4 slot插槽
4.1 作用
让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ==> 子组件
4.2 分类
- 默认插槽
- 具名插槽
- 作用域插槽
4.3 使用方式
-
默认插槽
父组件中: <Category> <div>html结构</div> </Category> 子组件中: <template> <div> <!-- 定义插槽 --> <slot>插槽默认内容...</slot> </div> </template>
-
具名插槽
父组件中: <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>
-
作用域插槽
-
理解:数据在组件自身,但根据数据产生的结构需要组件的使用者来决定。(games数据在Category组件中,但使数据所遍历出来的结构由App组件决定)
-
具体编码:
父组件中: <Category title="游戏"> <template scope="data"> <ul> <li v-for="(game, index) in data.games" :key="index">{{ game }}</li> </ul> </template> </Category> <Category title="游戏"> <template scope="{games}"> <ol> <li v-for="(game, index) in games" :key="index">{{ game }}</li> </ol> </template> </Category> <Category title="游戏"> <template slot-scope="{games}"> <h4 v-for="(game, index) in games" :key="index">{{ game }}</h4> </template> </Category> 子组件中: <template> <div class="category"> <h3>{{ title }}分类</h3> <slot :games="games">我是默认的一些内容</slot> </div> </template> <script> export default { name: "CategoryVue", data() { return { games: ["梦幻西游", "糖豆人", "超级玛丽", "塞尔达"], } }, props: ["title"] } </script>
-