一、脚手架配置代理(devServer.proxy)
（一）、方法一
在vue.config.js中添加如下配置：
devServer：{
proxy:"http://localhost:5000"
}
说明：
1.有点：配置简单，请求资源时直接发给前端(8080)即可。
2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3.工作方式：若按照上述配置代理，当前请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）。
/* vue.config.js */
.................
module.exports = defineConfig({
.................
devServer:{
proxy:'http://localhost:5000'
}
})/* 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/students').then(
response=>{
console.log('请求成功了！',response.data)
},
error=>{
console.log('请求失败了！',error.message)
}
)
},
},
}
</script>当public目录中有students时，会优先向前端请求资源。
（二）、方法二
编写vue.config.js配置具体代理规则：
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''} //将路径中的'/api1'替换为''空字串
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径pathRewrite: {'^/api2': ''} //将路径中的'/api2'替换为''空字串
changeOrigin: true,// ws:true //用于支持websocket
}
}
}
}
/*
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
changeOrigin默认值为true
*/
说明：
1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2.缺点：配置略微繁琐，请求资源时必须加前缀。
/* vue.config.js */
................
module.exports = defineConfig({
................
devServer:{
proxy:{
'/api':{
target:'http://localhost:5000',
pathRewrite:{'^/api':''}
// ws:true,
// changeOrigin:true,
},
'/demo':{
target:'http://localhost:5001',
pathRewrite:{'^/demo':''}
// ws:true,
// changeOrigin:true,
},
}
}
})
/* App.vue */
<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/api/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>二、Github搜索案例_axios应用
以下是Github搜索案例的代码。
/* 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>/* 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="userName"
@keydown.enter="loseFocus"
@blur="getUsers"
ref="search"
/>
<button @click="getUsers">Search</button>
</div>
</section>
</template>
<script>
import axios from 'axios'
export default {
name:'Search',
data() {
return {
userName:''
}
},
methods:{
getUsers(){
if(this.userName.trim()){
this.$bus.$emit('getUsers',{isHello:false,isLoading:true,msg:'',users:[]})
axios.get(`https://api.github.com/search/users?q=${this.userName}`).then(
Response=>{
this.$bus.$emit('getUsers',{isLoading:false,msg:'',users:Response.data.items})
},
Error=>{
this.$bus.$emit('getUsers',{isLoading:false,msg:Error.message,users:[]})
}
)
}
},
loseFocus(){
this.$refs.search.blur()
}
}
}
</script>/* List.vue */
<template>
<div class="row">
<!-- 展示列表数据 -->
<div
class="card"
v-for="user in info.users"
:key="user.id"
v-show="info.users.length"
>
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style='width: 100px'/>
</a>
<p class="card-text">{{ user.login }}</p>
</div>
<!-- 展示欢迎 -->
<h2 v-show="info.isHello">Welcome to Github</h2>
<!-- 展示加载 -->
<h2 v-show="info.isLoading">Loading.......</h2>
<!-- 展示错误信息 -->
<h2 v-show="info.msg">{{ info.msg }}</h2>
</div>
</template>
<script>
export default {
name:'List',
data() {
return {
info:{
isHello:true,
isLoading:false,
msg:'',
users:[]
}
}
},
mounted(){
this.$bus.$on('getUsers',(obj)=>{
this.info = {...this.info,...obj}
})
}
};
</script>
<style scoped>
.album {
min-height: 50rem;
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%;
}
h2{
padding: 1.5rem;
}
</style>三、Github搜索案例_vue-resource应用
vue-resource是 Vue.js 的一个插件，用于通过 XMLHttpRequest 或 JSONP 发起 HTTP 请求并处理响应。
其使用方法与axios类似，用法如下：
1.在main.js中引入并使用插件
import VueResource from "vue-resource";
........................
Vue.use(VueResource)
.........................
2.vue-resource会在vm上挂载一个$http，使用时引用该变量即可，其余用法与axios基本相同：
..................................................
methods:{
getUsers(){
if(this.userName.trim()){
this.$bus.$emit('getUsers',{isHello:false,isLoading:true,msg:'',users:[]})
this.$http.get(`https://api.github.com/search/users?q=${this.userName}`).then(
Response=>{
this.$bus.$emit('getUsers',{isLoading:false,msg:'',users:Response.data.items})
},
Error=>{
this.$bus.$emit('getUsers',{isLoading:false,msg:Error.message,users:[]})
}
)
}
},
..................................................
}