nuxt全栈仿美团官网12——搜索关键字推荐和热门搜索
慕课网教程链接：https://coding.imooc.com/class/280.html
平时在有道云上做笔记，直接发到这里格式全乱了，有空整理，大家也可查看有道云链接：
http://note.youdao.com/noteshare?id=1851a98b26024767a1b43778d1c6849b&sub=B6EFBAE9D5A94097BF232EFAAC9EDAD9
搜索关键字推荐
- 将poi.dat导入数据库
- 建立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)
- 建立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
- 在index中使用路由，代码略
- 在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) }
热门搜索
- 在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 })) })
- 热门搜索的数据在页面加载时已经进行了ssr渲染，所以要从store的nuxtServerInit中提交触发。先在store的home里添加hotPlace属性，mutations和actions和menu类似，代码略
const state = ()=>({ menu:[], hotPlace:[] }), ……
- 在合并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:[])
- 在searchbar组件中调用
说明(坑的血泪史)
取参数
- ctx.params.id 是从路由中解析出来的参数(动态路由)
- ctx.query.city 是get带来的参数
- ctx.request.body.name 是post带来的参数
store获取
- this.$store 用在vue文件中的