vue.js系列四:ajax(axios)
2018-11-24 本文已影响0人
suxin1932
1.下载axios
npm install axios --save
在线文档
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
1.1搜索框demo
图片.png
1.1.1index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./static/css/bootstrap.css">
<title>vue_demo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
1.1.2main.js
import Vue from 'vue'
import App from './App'
let vm = new Vue({
el: '#app',
components: {
App // 映射组件标签
},
template: '<app/>' // 指定需要渲染到页面的模板
})
Vue.use({
vm
})
1.1.3App.vue组件
<template>
<div class="container">
<Search/>
<UsersMain/>
</div>
</template>
<script>
import Main from './components/Main'
import Search from './components/Search'
export default {
components: {
Search,
UsersMain: Main // 此处的Main会与html标签冲突,故而重命名了
}
}
</script>
<style scoped>
</style>
1.1.4Search.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="searchName"/>
<button @click="search">Search</button>
</div>
</section>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
data () {
return {
searchName: ''
}
},
methods: {
search () {
let searchName = this.searchName.trim()
if (searchName) {
// 分發一個search的消息
PubSub.publish('search', searchName)
}
}
}
}
</script>
<style scoped>
</style>
1.1.5Main.vue
<template>
<div>
<h2 v-if="firstView">請輸入用戶名搜索</h2>
<h2 v-if="loading">loading</h2>
<h2 v-if="errorMsg">{{errorMsg}}</h2>
<div class="row">
<div class="card" v-for="(user, index) in users" :key="index" :index="index">
<a :href="user.url" target="_blank">
<img :src="user.img" style='width: 100px'/>
</a>
<p class="card-text">{{user.name}}</p>
</div>
</div>
</div>
</template>
<script>
import PubSub from 'pubsub-js'
import axios from 'axios'
export default {
data () {
return {
firstView: true,
loading: false,
users: [], // 用戶數組
errorMsg: ''
}
},
mounted () {
// 訂閱消息
PubSub.subscribe('search', (msg, searchName) => {
// 点击了搜索, 发ajax请求进行搜索
// 更新數據:請求中狀態
this.firstView = false
this.loading = true
this.users = []
this.errorMsg = ''
// 发ajax请求进行搜索
const url = `https://api.github.com/search/users?q=${searchName}`
axios.get(url)
.then(response => {
// 成功了, 更新数据(成功)
this.loading = false
this.users = response.data.items.map(item => ({
url: item.html_url,
img: item.avatar_url,
name: item.login
}))
})
.catch(error => {
// 失敗了,更新數據(失敗)
this.loading = false
this.errorMsg = error
})
})
}
}
</script>
<style scoped>
.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>
1.1.6本地启动即可
npm run dev
2.vue UI 组件库
1) Mint UI:(移动端)
a. 主页: http://mint-ui.github.io/#!/zh-cn
b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库
2) Elment:(PC端)
a. 主页: http://element-cn.eleme.io/#/zh-CN
b. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库
2.1下载mint-ui
npm install --save mint-ui
