vue模糊搜索

vue实现模糊搜索

根据名称进行关键词搜索

template>
  

    

      
      搜索
    
    

      

        
id
        
name
        
username
        
email
        
      
      

        

          
{{ele.id}}
          
{{ele.name}}
          
{{ele.username}}
          
{{ele.email}}
          
        
      
      
    
  

* {
    padding:0;
    margin: 0;
  }
  input,button {
    background:none;  
	  outline:none;  
	border:0px;
  }
  a{
    text-decoration: none;
  }
    .wrap {
    width: 100%;
    height: 100%;
    position: relative;
    min-width: 1000px;
    }
    .searchInput {
      width: 542px;
      height: 52px;
      /* border: 1px solid red; */
      margin: 0 auto;
      box-sizing: border-box;
    }
    .searchInput input {
      border: 1px solid #8a8a8a;
      width: 420px;
      height: 53px;
      line-height: 50px;
      box-sizing: border-box;
      padding-left: 40px;
      font-size: 14px;
      background:url('./img/search.png') no-repeat 1% 45%;
      background-size: 6%;
    }
    .searchInput button {
      width: 100px;
      height: 53px;
      line-height: 50px;
      font-size: 16px;
      margin-left: 4px;
      border: 1px solid #8a8a8a;
      background: #bfbfbf;
      border-radius: 6px;
      color: #fff;
      cursor: pointer;
    }
    .content {
      width: 1200px;
      /* border: 1px solid red; */
      margin: 60px auto;
    }
    .title {
      height: 50px;
      width: 1200px;
      font-size: 0;
    }
    .title div {
      width: 230px;
      height: 50px;
      background: #9dc3e6;
      display: inline-block;
      font-size: 16px;
      border-right: 1px solid white;
      border-top: 1px solid white;
      line-height: 50px;
    }
    .info {
      height: 40px;
      width: 1200px;
      font-size: 0;
    }
    .info div {
      width: 230px;
      height: 40px;
      background: #eaeff7;
      display: inline-block;
      font-size: 16px;
      border-right: 1px solid white;
      border-top: 1px solid white;
      line-height: 40px;
    }

代理服务器配置 config中的index.js文件

  proxyTable: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',//请求的服务器地址
        changeOrigin: true, //是否跨域
        pathRewrite: {
         '^/api':'/'  //路径
        }
      }
    },

main.js中

import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl;

在config中新建文件api.config.js
判断是测试环境还是服务器环境

const isPro = Object.is(process.env.NODE_ENV, 'production')

module.exports = {
    baseUrl: isPro ? 'http://jsonplaceholder.typicode.com/' : 'api/'
}

这样就可以实现一个简单的模糊搜索了,欢迎指正