项目实训（五）关键词查询的交互

目录

一、选择器初始化

1、默认选择

2、浏览器渲染过程

3、生命周期钩子

4、通过选择不同项目更改参数

二、简单检索方法

1、findByCN()方法：

2、this的作用域问题

三、分页问题

1、分页器：

2、解决 页码不变问题

四、结果展示

---

一、选择器初始化

1、默认选择

在检索关键词时，默认选择中—>英，可以根据created()方法实现。

  created() {
   
    this.searchvalue = this.options[0].value

  },

在el-select中设置v-model为searchvalue，实现双向绑定。于是在js中可将searchvalue的值更改，初始化为“中—>英”。

2、浏览器渲染过程

• 构建DOM树
• 构建css规则树，执行解析js文件
• 构建渲染树Render tree
• 渲染树布局layout
• 渲染树绘制

3、生命周期钩子

在vue的生命周期，即vue实例、组件从创建到消灭的一系列过程。

由图可知，在created阶段，模板还未渲染到html中，无法获取dom节点，但可以获得data和methods。在mounted阶段，已挂载，可以获取渲染后的dom节点。

所以：

• created钩子：通常用于初始化某些属性值，如data中的数据，再渲染成视图
• mounted钩子：通常在初始化页面完成后，对html的dom节点进行操作

4、通过选择不同项目更改参数

如何使中—>英、英—>中调用不同方法

data中的thisLabel属性，初始化为中译英，根据thisLabel的值调用不同的函数。若更改，则获取更改后的label，赋值给thisLabel，再调用find方法，这样更改选项就能随时查看检索结果。

searchChange(id){
      this.thisLabel = this.options.find(item => item.value === id).label
      this.findByCN()

    },

二、简单检索方法

1、findByCN()方法：

通过thisLabel的值，调用不同的url。axios.get方法，参数为名称和此时的页数，通过response获取data和pageSum信息总条数。将response.data中的data属性直接赋值给tableData，对象属性会与table属性一一对应s

 findByCN() {
      var _this = this
      var s_name = _this.input2
      var pageNum = _this.pageNum
      var thisLabel = _this.thisLabel
      if(thisLabel=='中——>英'){
        let url= '/resultInfo/getbyCh'
         this.$http.get(url,{
          params:{
            ch: s_name,
            page: pageNum,

          }
        }).then(function (resp){
          _this.tableData=resp.data.data;
          _this.total = resp.data.pageSum;

          console.log(resp)

        }).catch(function (error){
          console.log(error)
        })
      }else if(thisLabel=='英——>中'){
        let url= '/resultInfo/getbyEng'
        this.$http.get(url,{
          params:{
            eng: s_name,
            page: pageNum,

          }
        }).then(function (resp){
          _this.tableData=resp.data.data;
          _this.total = resp.data.pageSum;
          console.log(resp)

        }).catch(function (error){
          console.log(error)
        })
      }


    }

2、this的作用域问题

在方法中，一般在最外层定义_this=this,这样内层的函数中调用_this，避免调用this时，作用域不同，无法获得正确的属性。 

三、分页问题

1、分页器：

<el-pagination

            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size= "pageSize"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>

定义此时的page为pageNum，page-Size为pageSize，总条数total为total

data中初始化：
 

 pageNum:1,
 pageSize:10,
 total:0,

定义换页时的方法 ：

handleCurrentChange(newPage) {
      this.pageNum=newPage;
      this.findByCN();
    },

每次更换页数，则更改pageNum，再次调用检索方法，即可获取该页数的数据。

2、解决 页码不变问题

• 发现搜索完一个关键词之后，选择页数为3，则搜索另外的关键词时页数仍未3，这样就导致如果没有那么多条数据会有出错的情况
• 解决方法：每次搜索不同的关键词时，重置页数为1,设置input的onchange方法。

 :onchange="changePage()"

 changePage(){
      this.pageNum=1;
    },

四、结果展示