nuxt全栈仿美团官网09——城市定位

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

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

http://note.youdao.com/noteshare?id=bda63d8630471f88ab9ebb5d836d97e7&sub=5E19F3AD55DD486B89EC229B1440202B

流程

1. 首先需要一个可以通过IP定位城市的接口，这里使用一个免费的天气接口

https://api.asilu.com/weather_v2/ // 返回格式： { "status":"1", "forecasts":[{ "city":"青岛市", "adcode":"370200", "province":"山东", }] …… }

1. 再写geo接口，自动请求位置数据后返回city和province

import Router from 'koa-router' import axios from './utils/axios' const router = new Router({ prefix: '/geo' }) router.get('/getPosition', async (ctx, next) => { const { status, data:{forecasts} } = await axios.get('https://api.asilu.com/weather_v2/') if (status === 200 && forecasts.length>0) { const { city, province } = forecasts[0] ctx.body = { city, province } } else { ctx.body = { city: '', province: '' } } }) export default router

1. 在index中使用geo接口

import geo from './interface/geo' …… // 找users路由写在一起即可 app.use(geo.routes()).use(geo.allowedMethods())

1. 建立store的modules里的geo模块

const state = (position)=>({ position:{} }), mutations = { setPosition(state,position){ state.position = position } }, actions = { setPosition({commit},position){ commit('setPosition',position) } }; export default { namespaced:true, state, mutations, actions }

1. store下建立index.js用于合并modules，在actions里面进行服务器渲染store中的数据，最后数据和页面结构一起下发。

import Vue from 'vue' import Vuex from 'vuex' import geo from './modules/geo' Vue.use(Vuex) // 注意这里的store是个返回store对象的函数 const store = () => new Vuex.Store({ modules:{ geo }, actions:{ // nuxtServerInit会在服务器端渲染数据 async nuxtServerInit({commit},{req,app}){ // vue还未实例化之前只能这样用app.$axios const {status,data:{city,province}} = await app.$axios.get('/geo/getPosition'); console.log({city,province}) commit('geo/setPosition',status===200?{city,province}:{city:'',province:''}) } } }) export default store;

1. 在geo组件里使用即可

{{$store.state.geo.position.city}}