nuxt全栈仿美团官网12——搜索关键字推荐和热门搜索

慕课网教程链接：https://coding.imooc.com/class/280.html

平时在有道云上做笔记，直接发到这里格式全乱了，有空整理，大家也可查看有道云链接：

http://note.youdao.com/noteshare?id=1851a98b26024767a1b43778d1c6849b&sub=B6EFBAE9D5A94097BF232EFAAC9EDAD9

 

搜索关键字推荐

1. 将poi.dat导入数据库
2. 建立poi的模型

import mongoose from 'mongoose' const poiSchema = mongoose.Schema({ name : {type:String}, province : {type:String}, city : {type:String}, county : {type:String}, areaCode : {type:String}, tel : {type:String}, area : {type:String}, add : {type:String}, type : {type:String}, module : {type:String}, longtide : {type:Number}, latitude : {type:Number} }) export default mongoose.model('poi',poiSchema)

1. 建立search接口文件，下面写/top接口

import Router from 'koa-router' import Poi from '../dbs/models/poi' const router = new Router({prefix:'/search'}) router.get('/top', async (ctx,next)=>{ const result= await Poi.find({ // 注意这里获取get中参数的方法 city:ctx.query.city, // 传入正则表达式表示模糊查询 name:new RegExp(ctx.query.input) }) ctx.body ={ code:0, top:result.slice(0,10).map(item=>({ name:item.name, type:item.type })) } }) export default router

1. 在index中使用路由，代码略
2. 在searchbar中导入lodash以进行输入防抖，并在methods里添加input方法以对应input事件

methods:{ …… input: _.debounce(async function(){ this.searchList = []; // 避免关键字为空时进行搜索导致多条数据闪烁 if(!this.search){ return } const {status,data:{top}} = await this.$axios.get('/search/top',{ // 注意所传参数要写在params内，而不是直接写 params:{ city:this.$store.state.geo.position.city.replace('市',''), input:this.search } }) this.searchList = top },300) }

1.  

 

热门搜索

1. 在search中增加/hotPlace接口

router.get('/hotPlace',async (ctx,next)=>{ // 据说前后端共享一个store，如果这里有store的话可以直接获取store， // 但事实上ctx.store为undefined let city = ctx.store ? ctx.store.geo.position.city : ctx.query.city const result = await Poi.find({ city:city }).limit(10) // 取前10条数据 ctx.body = result.map(item=>({ name:item.name, type:item.type })) })

1. 热门搜索的数据在页面加载时已经进行了ssr渲染，所以要从store的nuxtServerInit中提交触发。先在store的home里添加hotPlace属性，mutations和actions和menu类似，代码略

const state = ()=>({ menu:[], hotPlace:[] }), ……

1. 在合并store的nuxtServerInit中添加服务器渲染

const {status:status3,data} = await app.$axios.get('/search/hotPlace',{ params:{ // city:app.store.state.geo.position.city city:'三亚' } }) commit('home/setHotPlace',status3===200?data:[])

1. 在searchbar组件中调用

<dt>热门搜索</dt> <!-- 前5个正好放下 --> <dd v-for="(item,index) in $store.state.home.hotPlace.slice(0,5)" :key="index"> <a href="">{{item.name}}</a> </dd>

 

1.  

说明(坑的血泪史)

取参数

• ctx.params.id 是从路由中解析出来的参数(动态路由)
• ctx.query.city 是get带来的参数
• ctx.request.body.name 是post带来的参数

store获取

• this.$store 用在vue文件中的<script>里面，
• {{$store}} 在vue模板中直接使用，
• ctx.store 用在后台调用时

axios

调用axios传参一定要写在params内，后台在前面加上app.

app.$axios.get('/search/hotPlace',{ params:{ city:app.store.state.geo.position.city } })