cssjshtml vue.js 站内搜索

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
  })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券