cssjshtml vue.js 站内搜索

葫芦

发布于 2019-04-17 16:08:22

1.7K0

发布于 2019-04-17 16:08:22

文章被收录于专栏：葫芦葫芦

input 框丢失焦点或者回车时触发,通过 axios 发送post请求向api获取数据，后填充到下方展示框中。

search.vue

<template>
  <div class="search">
    <div class="magic-search-box">
      <div class="search-form">
        <input id="searc-input" v-model="keyword" @blur.prevent="getlinks()" @keyup.enter="getlinks" type="text" placeholder="请输入关键词" autocomplete="off">
      </div>

    </div>
    <div class="magic-search-box">
      <div v-for="link in links">
      <h2 class="t"><a :href="link.url">{{link.url.split('-')[1]}}</a></h2>
        <div class="c-abstract">
          {{link.content}}
        </div>
      </div>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword:'',
        links:''
      }

    },
    //axios
    methods: {
      getlinks:function (event) {
        let qs = require('qs');
      this.$axios.post("/search_test",
        qs.stringify({'keyword': this.keyword}))
        .then(data => {
          this.links= data.data.data
        })

      }

    }
  }
</script>

1.修改config api后需要重新执行 npm run dev，config被修改后不会自动加载。

error:

uncaught-in-promise-error-request-failed-with-status-code-404

2.axios 不能直接将字典发送post请求，这样会报404 或者500 错误。

error:

uncaught-in-promise-error-request-failed-with-status-code-500

通过下面方法转换解决：

let qs = require('qs');
this.$axios.post("/search_test",
  qs.stringify({'keyword': this.keyword}))
  .then(data => {
    this.links = data.data.data
  })

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019/01/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

api