[关闭]
@1002522146 2017-09-11T10:25:40.000000Z 字数 3817 阅读 490

您好,我上次发过去的测试题已经实现了所有功能。

在线预览
GitHub源码

实现效果如下:

此处输入图片的描述


主要思路:

   vue组件
   app.vue 应用的根组件
   Search.vue  头部实现搜索功能的组件 将搜索框内键入值保存在searchName通过props进行传递

   UserList.vue  展现用户信息的组件
  1. suggest和分页功能选用iview ui组件库
    suggest 的实现在iview中需创建 标签,将suggest功能的提示信息的进行数据绑定
    :data="dataSearch",suggest的待选内容保存在this.dataSearch数组中。
    此demo中定义了一个handleSearch方法去动态生成随机字母和数字模拟数据变化,并添加候选项。

代码如下

  1. handleSearch (value) {
  2. //定义一个生成随机字母或者数字的方法
  3. function randomString(len) {
  4. len = len || 32;
  5. var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  6. var maxPos = $chars.length;
  7. var pwd = '';
  8. for (var i = 0; i < len; i++) {
  9. pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  10. }
  11. return pwd;
  12. }
  13. //定义suggest的待选内容
  14. this.dataSearch = !value ? [] : [
  15. value,
  16. value +randomString(1),
  17. value + randomString(2)
  18. ];

2 分页功能
实现分页功能需要调用iview api进行如下配置
代码如下

  1. <Page :total="pagecount" :page-size="pageSize" @on-change="pagechange" v-show="users" show-elevator></Page>
  2. <script>
  3. data() {
  4. return {
  5. firstView: true,
  6. loading: false,
  7. pagecount: 10,//识别当前记录所在的页码
  8. pageSize: 6,//每页条数
  9. users: null,
  10. error: null,
  11. }
  12. },
  13. watch: {
  14. searchName: function(value) {
  15. if (!value) {
  16. return
  17. }
  18. this.firstView = false
  19. this.loading = true
  20. // 发送ajax请求, 更新界面
  21. const url = `https://api.github.com/search/users?q=${value}`
  22. axios.get(url).then((response) => {
  23. this.loading = false
  24. //切割数据 处理分页逻辑
  25. items = response.data.items
  26. this.pagecount = items.length
  27. if (items.length < this.pageSize) {
  28. this.users = items;
  29. } else {
  30. this.users = items.slice(0, this.pageSize);
  31. }
  32. }, (response) => {
  33. console.log(response)
  34. this.loading = false
  35. this.error = response.statusText
  36. })
  37. },
  38. methods: {
  39. //配置分页器
  40. pagechange(index) {
  41. var _start = (index - 1) * this.pageSize;
  42. var _end = index * this.pageSize;
  43. this.users = items.slice(_start, _end);
  44. }
  45. </script>

3.搜索结果中高亮搜索关键词
代码如下

  1. //ajxa请求到数据后,对返回数据进行处理
  2. for (var i = 0; i < items.length; i++) {
  3. //遍历数据后用通过 indexOf方法 判断数据中是否包含searchName即输入框内容
  4. if (items[i].login.indexOf(this.searchName) == 0) {
  5. //replace操作数组为匹配值添加内联样式
  6. items[i].login = items[i].login.replace(this.searchName, '<span style="background: #ffff00;">' + this.searchName + '</span>');
  7. }

注意: 在vue中使用v-for进行数据遍历时,会将 HTML 标签解析成字符串
需要使用 v-html 将内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

  1. <div class="row" v-show="users">
  2. <div class="card" v-for="user in users">
  3. <a :href="user.html_url" target="_blank">
  4. <img :src="user.avatar_url" style='width: 100px' />
  5. </a>
  6. <p class="card-text" v-html="user.login">{{user.login}}</p>
  7. </div>

完整代码如下

  1. <template>
  2. <div>
  3. <h2 v-show="firstView">Enter name to search</h2>
  4. <!--loading-->
  5. <h2 v-show="loading">
  6. <Spin fix>
  7. <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
  8. <div>Loading</div>
  9. </Spin>
  10. </h2>
  11. <h2 v-show="error">{{error}}</h2>
  12. <div class="row" v-show="users">
  13. <div class="card" v-for="user in users">
  14. <a :href="user.html_url" target="_blank">
  15. <img :src="user.avatar_url" style='width: 100px' />
  16. </a>
  17. <p class="card-text" v-html="user.login">{{user.login}}</p>
  18. </div>
  19. </div>
  20. <!--分页器-->
  21. <div class="pull-right">
  22. <Page :total="pagecount" :page-size="pageSize" @on-change="pagechange" v-show="users" show-elevator></Page>
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. import axios from 'axios'
  28. //定义一个变量来接收返回的数据
  29. let items = null
  30. export default {
  31. props: {
  32. searchName: {
  33. type: String
  34. }
  35. },
  36. data() {
  37. return {
  38. firstView: true,
  39. loading: false,
  40. pagecount: 10,
  41. pageSize: 6,
  42. users: null,
  43. error: null,
  44. }
  45. },
  46. watch: {
  47. searchName: function(value) {
  48. if (!value) {
  49. return
  50. }
  51. this.firstView = false
  52. this.loading = true
  53. // 发送ajax请求, 更新界面
  54. console.log('发送请求', value)
  55. const url = `https://api.github.com/search/users?q=${value}`
  56. axios.get(url).then((response) => {
  57. console.log(response)
  58. this.loading = false
  59. //切割数据 处理分页逻辑
  60. items = response.data.items
  61. for (var i = 0; i < items.length; i++) {
  62. if (items[i].login.indexOf(this.searchName) == 0) {
  63. items[i].login = items[i].login.replace(this.searchName, '<span style="background: #ffff00;">' + this.searchName + '</span>');
  64. }
  65. }
  66. this.pagecount = items.length
  67. if (items.length < this.pageSize) {
  68. this.users = items;
  69. } else {
  70. this.users = items.slice(0, this.pageSize);
  71. }
  72. }, (response) => {
  73. console.log(response)
  74. this.loading = false
  75. this.error = response.statusText
  76. })
  77. },
  78. },
  79. methods: {
  80. //配置分页器
  81. pagechange(index) {
  82. var _start = (index - 1) * this.pageSize;
  83. var _end = index * this.pageSize;
  84. this.users = items.slice(_start, _end);
  85. }
  86. }
  87. }
  88. </script>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注