@1002522146
2017-09-11T10:25:40.000000Z
字数 3817
阅读 489
您好,我上次发过去的测试题已经实现了所有功能。
实现效果如下:
主要思路:
vue组件
app.vue 应用的根组件
Search.vue 头部实现搜索功能的组件 将搜索框内键入值保存在searchName通过props进行传递
UserList.vue 展现用户信息的组件
代码如下
handleSearch (value) {
//定义一个生成随机字母或者数字的方法
function randomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = '';
for (var i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
//定义suggest的待选内容
this.dataSearch = !value ? [] : [
value,
value +randomString(1),
value + randomString(2)
];
2 分页功能
实现分页功能需要调用iview api进行如下配置
代码如下
<Page :total="pagecount" :page-size="pageSize" @on-change="pagechange" v-show="users" show-elevator></Page>
<script>
data() {
return {
firstView: true,
loading: false,
pagecount: 10,//识别当前记录所在的页码
pageSize: 6,//每页条数
users: null,
error: null,
}
},
watch: {
searchName: function(value) {
if (!value) {
return
}
this.firstView = false
this.loading = true
// 发送ajax请求, 更新界面
const url = `https://api.github.com/search/users?q=${value}`
axios.get(url).then((response) => {
this.loading = false
//切割数据 处理分页逻辑
items = response.data.items
this.pagecount = items.length
if (items.length < this.pageSize) {
this.users = items;
} else {
this.users = items.slice(0, this.pageSize);
}
}, (response) => {
console.log(response)
this.loading = false
this.error = response.statusText
})
},
methods: {
//配置分页器
pagechange(index) {
var _start = (index - 1) * this.pageSize;
var _end = index * this.pageSize;
this.users = items.slice(_start, _end);
}
</script>
3.搜索结果中高亮搜索关键词
代码如下
//ajxa请求到数据后,对返回数据进行处理
for (var i = 0; i < items.length; i++) {
//遍历数据后用通过 indexOf方法 判断数据中是否包含searchName即输入框内容
if (items[i].login.indexOf(this.searchName) == 0) {
//replace操作数组为匹配值添加内联样式
items[i].login = items[i].login.replace(this.searchName, '<span style="background: #ffff00;">' + this.searchName + '</span>');
}
注意: 在vue中使用v-for进行数据遍历时,会将 HTML 标签解析成字符串
需要使用 v-html 将内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译
<div class="row" v-show="users">
<div class="card" v-for="user in users">
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style='width: 100px' />
</a>
<p class="card-text" v-html="user.login">{{user.login}}</p>
</div>
完整代码如下
<template>
<div>
<h2 v-show="firstView">Enter name to search</h2>
<!--loading-->
<h2 v-show="loading">
<Spin fix>
<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
<div>Loading</div>
</Spin>
</h2>
<h2 v-show="error">{{error}}</h2>
<div class="row" v-show="users">
<div class="card" v-for="user in users">
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style='width: 100px' />
</a>
<p class="card-text" v-html="user.login">{{user.login}}</p>
</div>
</div>
<!--分页器-->
<div class="pull-right">
<Page :total="pagecount" :page-size="pageSize" @on-change="pagechange" v-show="users" show-elevator></Page>
</div>
</div>
</template>
<script>
import axios from 'axios'
//定义一个变量来接收返回的数据
let items = null
export default {
props: {
searchName: {
type: String
}
},
data() {
return {
firstView: true,
loading: false,
pagecount: 10,
pageSize: 6,
users: null,
error: null,
}
},
watch: {
searchName: function(value) {
if (!value) {
return
}
this.firstView = false
this.loading = true
// 发送ajax请求, 更新界面
console.log('发送请求', value)
const url = `https://api.github.com/search/users?q=${value}`
axios.get(url).then((response) => {
console.log(response)
this.loading = false
//切割数据 处理分页逻辑
items = response.data.items
for (var i = 0; i < items.length; i++) {
if (items[i].login.indexOf(this.searchName) == 0) {
items[i].login = items[i].login.replace(this.searchName, '<span style="background: #ffff00;">' + this.searchName + '</span>');
}
}
this.pagecount = items.length
if (items.length < this.pageSize) {
this.users = items;
} else {
this.users = items.slice(0, this.pageSize);
}
}, (response) => {
console.log(response)
this.loading = false
this.error = response.statusText
})
},
},
methods: {
//配置分页器
pagechange(index) {
var _start = (index - 1) * this.pageSize;
var _end = index * this.pageSize;
this.users = items.slice(_start, _end);
}
}
}
</script>