使用vue框架实现以下要求：
1、点击“首页“顶部搜索框，通过路由跳转到搜索页，并实现关键字模糊搜索功能
2、搜索页和首页下面用到的JSON数据自行模拟，并正确搜索渲染出来
3、在搜索页保留每次的搜索历史关键字，在搜索页的“历史搜索”中显示出来，最多展现出3个
4、点击搜索框左上角的箭头，可以历史回退到首页
5、点击删除，清空历史记录
流程：1、先全局安装vue（3.0版本）
安装vue命令：npm i @vue/cli -g
安装完后使用vue -V 检查vue的版本号
如果你嫌弃使用npm下载速度（服务器在国外），可以使用淘宝镜像（cnpm）下载，
首先安装淘宝镜像，cnpm才可以使用。
安装cnpm命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
接着你就可以使用cnpm安装vue: cnpm i @vue/cli -g
2、创建一个项目
指令：vue create 项目名
如：vue create demo
创建完成后 输入指令： cd demo //进入demo文件夹
安装需要用到的模块（vant、axios）
安装vant指令： cnpm i vant -save
安装axios指令： cnpm i axios --save
3、安装好项目所用的依赖包后，执行npm run serve 指令启动项目
4、打开项目，找到src文件夹下的main.js文件，打开引入vant 、axios模块
import Vant from 'vant'; //引入vant模块
import 'vant/lib/index.css'; //引入vant样式
Vue.use(Vant); //使用vant
import axios from "axios"; //引入axios模块
Vue.prototype.$axios=axios; //全局引入axios
5、将APP.vue中的内容注释或者删除成下面格式：
<template>
<div id="app">
<router-view/>
</div>
</template>
6、如果不使用views（组件）内的Home.vue和About.vue可以删掉自己创建，
如果删掉，在router（路由文件夹）下index.js中删掉 import Home from '../views/Home.vue'；
如果使用Home/About组件改为下面格式：
<template>
<div></div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
配置路由：找到router文件夹下的index.js,具体路由配置如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/searchResult',
name: 'searchResult',
component: () => import('../views/searchResult.vue')
}
]
const router = new VueRouter({
routes
})
export default router
7、在Home.vue写跳转（获取焦点时触发事件）,内容如下：
<template>
<div>
<!-- search 搜索 -->
<van-search placeholder="请输入搜索关键词" @focus="skip"/>
<!-- 获取焦点事件 -->
<!-- 注：@符号，是v-on的简写 事件绑定 -->
</div>
</template>
<script>
export default {
methods: {//事件方法
skip(){//点击跳转搜索页面
this.$router.push({
path:"/About" //跳转到search.vue组件
})
}
},
}
</script>
<style scoped>
</style>
8、在这里是自己写的json文件，在public文件夹下创建一个data.json文件，内容如下：
{
"data": [{
"img": "http://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/107731/30/17594/128560/5eba1306E936bf76c/67c1b3f0811d4aad.jpg!q70.dpg.webp",
"title": "空气循环扇"
},
{
"img": "http://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/144748/18/2025/197309/5efed6acEfda6e78b/a9c0fe200236e109.png.webp",
"title": "语音鼠标"
},
{
"img": "http://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/149120/14/4563/205634/5f290affEe4b665e0/8516912f4c76bde5.jpg!q70.dpg.webp",
"title": "沐浴露"
},
{
"img": "http://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/48916/34/14957/190813/5dbeae56E705d7279/6ebd871f40b96a83.jpg!q70.dpg.webp",
"title": "机械手表"
},
{
"img": "http://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/100792/2/19183/141569/5e9bbedaE11c1dffb/1c71532df00d755a.jpg!q70.dpg.webp",
"title": "护眼床头灯"
}
],
"list": [
"空气循环扇",
"语音鼠标",
"沐浴露",
"机械手表",
"护眼床头灯"
]
}
9、在About.vue组件中，内容如下：
<template>
<div>
<form action="/">
<van-search
v-model="value"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
@input="change"
/>
</form>
<van-cell-group v-show="value!=''">
<van-cell v-for="(item,index) in zhineng" :key="index" :title="item" @click="clickTit(item)" />
</van-cell-group>
<div v-show="value==''">
<van-cell-group>
<van-cell title="搜素历史">
<template #right-icon>
<div class="item-delete">
<van-icon name="delete" @click="del" />
</div>
</template>
</van-cell>
</van-cell-group>
<div>
<van-tag
plain
type="primary"
v-for="(item,index) in histroy"
:key="index"
style="margin-left:8px"
@click="clickHistroy(item)"
>{{item}}</van-tag>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgShow:true,//进入页面是的状态，默认显示
value: "", //输入搜索的关键字
histroy: [], //存放搜索历史关键字
zhineng: [], //智能提示
};
},
mounted() {
//挂载
this.histroy = JSON.parse(localStorage.getItem("histroy")) || [];
},
methods: {
onSearch(val) {
//确定搜索时触发（并把关键字传到搜索列表中）
// 判断输入内容不能为空
if (this.value.trim() == "") {
return false;
}
// 添加
let rel = true;
// 判断去重
this.histroy.map((item) => {
if (item == this.value) {
rel = false;
}
});
// 搜索历史在页面最多显示3条
if (rel) {
if (this.histroy.length >= 3) {
this.histroy.pop(); //数组末尾删除
this.histroy.unshift(this.value);
} else {
this.histroy.unshift(this.value);
}
}
this.save();
// 跳转页面并传参数到搜索列表页中
this.$router.push({
path: "/searchList",
query: {
kw: this.value,
},
});
this.value = ""; //添加后清空
},
clickTit(item){//点击智能提示
this.value=item;
this.onSearch();
},
clickHistroy(item){//点击搜索记录
this.value=item;
this.onSearch();
},
del() {
//清空（删除历史记录）
this.$dialog
.confirm({
message: "你确定要清空历史记录吗？",
})
.then(() => {
this.histroy = [];
localStorage.removeItem("histroy");
})
.catch(() => {});
},
change() {
//智能事件
this.zhineng=[];
this.$axios.get("http://localhost:8080/data.json").then((res) => {
let lists= res.data.list;
lists.map(item=>{
if(item.includes(this.value)){
this.zhineng.push(item);
}
})
});
},
save() {
//保存到本地
localStorage.setItem("histroy", JSON.stringify(this.histroy));
},
},
};
</script>
<style scoped>
</style>
10、在views文件夹下创建searchResult.vue组件，具体内容如下：
<template>
<div>
<van-nav-bar title="搜索列表" left-arrow @click-left="onClickLeft" />
<van-card v-for="(item,index) in selChange" :key="index" :thumb="item.img">
<template #title>
<div class="item-title">{{item.title}}</div>
</template>
</van-card>
</div>
</template>
<script>
export default {
data() {
return {
kw: this.$route.query.kw, //搜索关键字
list: [], //所有数据
};
},
mounted() {//挂载
// 请求数据
this.$axios.get("http://localhost:8080/data.json").then((res) => {
this.list = res.data.data;
});
},
methods: {
onClickLeft() {
//返回搜索首页
this.$router.push({
path: "/About",
});
},
},
computed: {//计算属性
selChange() {
// 把请求回来的数据过滤，然后显示
var news = this.list.filter((item) => {
if (item.title.indexOf(this.kw) != -1) {
return item;
}
});
return news;
},
},
};
</script>
<style scoped>
.item-title {
height: 88px;
font-size: 18px;
/* background: red; */
display: flex;
align-items: center;
}
</style>
