31-搜索导航栏

搜索导航栏

一、流程

'''
# 拓展:  京东 360buy -> jd

# 全文检索
	问题: 数据量的庞大
	解决: 全文检索引擎(elasticsearch 一来七课社区). java封装的一个数据库, 专注于大数据的搜索
			
# 前端: 头部搜索组件 + 搜索页面
	1. 新建页面: SearchCourse.vue
	2. 配置路由: index.js 
		path: '/course/search'
		name: 'SearchCourse'
		component: SearchCourse
	3. 	拷贝搜索页面
		提示：如果search没有写返回的就是所有的内容
	4. Header.vue组件 right-part下 添加form搜索组件, 记得拿form组件的css样式, 还有搜索相关的data数据,  以及methods中的功能
	5. 修改前端路由 search_action方法中 this.$router.push中的路由跳转路径地址
	6. 难点: 查询的单词'word=值'需要返回前端, 然后通过'search=值'发送asiox
	7. 重点: 
		this.$route.query  从?号后取值
		this.$route.params 从路径中取值
		提示: wd  word 二个关键字都可以搜索 (模仿百度的这种思路www.baidu.com/?wd=shuaige)
	8. h1标签中定义总共书写到了多少门课程
	总结: 二个点
		第一点: 
			路由: path: '/course/search?word=值'
			组件: this.$route.query  从?号后取值
		第二点: .params
			路由: path: '/course/:id'
			组件: this.$route.params  从路径中取值
'''

二、路由：index.js

import Search from '../views/Search.vue'

const routes = [
    // ...
    {
        path: '/search',
        name: 'Search',
        component: Search,
    },
];

三、标题

<form class="search">
    <div class="tips" v-if="is_search_tip">
        <span @click="search_action('Python')">Python</span>
        <span @click="search_action('Linux')">Linux</span>
    </div>
    <input type="text" :placeholder="search_placeholder" @focus="on_search" @blur="off_search" v-model="search_word">
    <button type="button" class="glyphicon glyphicon-search" @click="search_action(search_word)"></button>
</form>

<script>
    export default {
        data() {
            return {
                is_search_tip: true,
                search_placeholder: '',
                search_word: ''
            }
        },
        methods: {
            search_action(search_word) {
                if (!search_word) {
                    this.$message('请输入要搜索的内容');
                    return
                }
                if (search_word !== this.$route.query.word) {
                    this.$router.push(`/course/search?word=${search_word}`);
                }
                this.search_word = '';
            },
            on_search() {
                this.search_placeholder = '请输入想搜索的课程';
                this.is_search_tip = false;
            },
            off_search() {
                this.search_placeholder = '';
                this.is_search_tip = true;
            },
        },
    }
</script>

<style scoped>
    .search {
        float: right;
        position: relative;
        margin-top: 22px;
        margin-right: 10px;
    }

    .search input, .search button {
        border: none;
        outline: none;
        background-color: white;
    }

    .search input {
        border-bottom: 1px solid #eeeeee;
    }

    .search input:focus {
        border-bottom-color: orange;
    }

    .search input:focus + button {
        color: orange;
    }

    .search .tips {
        position: absolute;
        bottom: 3px;
        left: 0;
    }

    .search .tips span {
        border-radius: 11px;
        background-color: #eee;
        line-height: 22px;
        display: inline-block;
        padding: 0 7px;
        margin-right: 3px;
        cursor: pointer;
        color: #aaa;
        font-size: 14px;

    }

    .search .tips span:hover {
        color: orange;
    }
</style>