Django个人博客搭建教程---用vue结合element-ui写搜索

搜索框如下

<el-input
      clearable
      type="text"
      v-model="searchinfo"
      placeholder="搜索"
      size="medium"
      style="width:180px;">
</el-input>
<el-button type="primary" size="medium" icon="el-icon-search"  @click="doFilter"></el-button>

表格部分，含有分页，新加入了loading遮罩，请求数据成功或者超时3000ms后，遮罩都会消失

<el-table height="100%" v-loading="loading" :data="blogList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
        <el-table-column prop="date" label="序号" width="50">
          <template scope="scope"> {{ scope.row.pk }} </template>
        </el-table-column>
        <el-table-column prop="name" label="标题" width="width: 100%">
          <template scope="scope"> {{ scope.row.fields.title }}</template>
        </el-table-column>
        <el-table-column prop="address" label="分类" width="width: 100%">
          <template scope="scope"> {{ scope.row.fields.category }} </template>
        </el-table-column>
        <el-table-column prop="address" label="作者" width="width: 100%">
          <template scope="scope"> {{ scope.row.fields.authorname }} </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="width: 100%">
        <template slot-scope="scope">
          <el-button type="text" @click="open(scope.row.fields.title,scope.row.fields.body)" size="small">查看</el-button>
          <el-button @click="skip('https://www.guanacossj.com/blog/article/'+scope.row.pk+'/'+scope.row.fields.url_slug)" type="text" size="small">查看详情</el-button>
        </template>
        </el-table-column>
</el-table>

 然后是写搜索的动作

根据searchinfo输入值查出数据，给filterTableDataEnd，然后重新计算分页所需要的值，根据flag判断做了搜索动作，将页面渲染的数据bookList重新赋值，考虑到bookList这个变量会在每次搜索之后变化，所以每次查询的数据不能从bookList中找，而是应该从完整的数据中比较，所以在一开始拿到bookList之后必须拷贝一份，每次都从完整备份中查询数据，而bookList作为渲染表格的数据，可以理解为临时的随时都在变化的变量

methods: {
     doFilter: function() {
       if (this.searchinfo === "") {
         this.$message.warning("查询条件不能为空！");
         return;
       }
       this.filterTableDataEnd=[];
       this.originblogList.forEach((value, index) => {
         if(value.fields.title){
           if(value.fields.title.indexOf(this.searchinfo)>=0){
             this.filterTableDataEnd.push(value);
           }
         }
       });
       //页面数据改变重新统计数据数量和当前页
        this.currentPage=1;
        this.totalItems=this.filterTableDataEnd.length;
        //渲染表格,根据值
        this.currentChangePage(this.filterTableDataEnd);
        //页面初始化数据需要判断是否检索过
        this.flag=true
     },
     handleSizeChange(val) {
        this.pageSize = val;
        this.handleCurrentChange(this.currentPage);
      },
     handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        if(this.flag) {
          this.blogList = this.filterTableDataEnd
        }
     },
     showBlogs () {
       this.$http.get('https://www.guanacossj.com/blog/showarticles/',{
          _timeout:3000,
          onTimeout :(request) => {
              this.$message.error('请求超时');
              this.loading = false
            }
          }).then((response) => {
          var res = JSON.parse(response.bodyText);
          if (res.error_num === 0) {
            this.loading = false;
            this.blogList = res['list'];
            this.totalItems = this.blogList.length;
            this.originblogList = this.blogList;
          } else {
            this.$message.error('查询博客列表失败');
          }
        })
    }
  }

这里还加了一个请求超时的全局拦截器，在main.js中加入如下代码

Vue.http.interceptors.push((request, next) => {
    let timeout;
    // 如果某个请求设置了_timeout,那么超过该时间，会终端该（abort）请求,并执行请求设置的钩子函数onTimeout方法，不会执行then方法。
    if (request._timeout) {
        timeout = setTimeout(() => {
            if(request.onTimeout) {
                request.onTimeout(request);
                request.abort()
            }
        }, request._timeout);
    }
    next((response) => {
       clearTimeout(timeout);
　　　　return response;
    })
})

这样一旦超时，页面不会无休止的出现遮罩