搜索导航栏
一、流程
'''
# 拓展: 京东 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>