配置代理服务器
一.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/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>
二.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
} ,
} )
github搜索案例
一.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;
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>
二.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 ( ) {
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 ( '请求成功了' )
this . $bus. $emit ( 'updateListData' , { isLoading : false , errMsg : '' , users : response. data. items} )
} ,
error => {
this . $bus. $emit ( 'updateListData' , { isLoading : false , errMsg : error. message, users : [ ] } )
}
)
}
} ,
}
< / script>
三.App.vue
< template>
< div class = "container" >
< Search/ >
< List/ >
< / div>
< / template>
< script>
import Search from './components/Search'
import List from './components/List'
export default {
name : 'App' ,
components : { Search, List}
}
< / script>
四.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
} ,
} )
github搜索案例_vue-resource版
一.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;
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 % ;
}
< / style>
二.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 ( ) {
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 ( '请求成功了' )
this . $bus. $emit ( 'updateListData' , { isLoading : false , errMsg : '' , users : response. data. items} )
} ,
error => {
this . $bus. $emit ( 'updateListData' , { isLoading : false , errMsg : error. message, users : [ ] } )
}
)
}
} ,
}
< / script>
三.App.vue
< template>
< div class = "container" >
< Search/ >
< List/ >
< / div>
< / template>
< script>
import Search from './components/Search'
import List from './components/List'
export default {
name : 'App' ,
components : { Search, List}
}
< / script>
四.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
} ,
} )