美团项目 --- 定位服务及切换城市5

一、编写城市服务类接口

二、查询类接口

三、开始 → 数据库导入

操作步骤：
① 打开下载好的 Robo 3T，首次右键 New Connection 点击 create Database 创建

② 进入对应的数据源文件夹【源码中的dbs文件夹】，通过命令导入对应的数据源

导入成功后可以回到robomongo界面：

③ 项目中使用接口签名实现去搭建好的服务端拿对应的接口数据【注意：现在不需要签名sign了，作为一个空参数传递即可】

签名sign怎么获取？

这里注意一下：现在服务端已经取消sign验证了,所以接口get请求地址参数直接写成?sign

代码大致如下：

import Router from 'koa-router'
import axios from './utils/axios'

let router = new Router({
    prefix: '/geo'
})

router.get('/getPosition', async (ctx) => {
    let {
        status,
        data: {
            province,
            city
        }
    } = await axios.get('http://cp-tools.cn/geo/getPosition?sign')
    if (status === 200) {
        ctx.body = {
            province,
            city
        }
    } else {
        ctx.body = {
            province: '',
            city: ''
        }
    }
})

export default router;

并且要在serve/index.js中进行导入和配置使用

import geo from './utils/geo'
app.use(geo.routes()).use(geo.allowedMethods())

④ 配置好相关路由之后我们可以使用postman进行接口本地测试

⑤ 接口没有问题，我们就思考如何把这个数据渲染到我们页面中去

• 方式一：就是在vue组件中通过koa中的异步方式进行请求接口
• 方式二：利用ssr的方式，在服务端渲染的时候就拿到数据，然后页面渲染额时候就已经直接带着数据过来了

我们使用方式二ssr来实现这个定位服务的渲染

四、ssr配合vuex进行定位服务接口的完成

在 store 新建一个js写store geo.js，另一个写页面通过store拿这个请求数据的锚
geo.js

const state = () => ({
    position: {}
})

const mutations = {
    setPosition(state, val) {
        state.position = val
    }
}

const actions = {
    setPosition: ({
        commit
    }, position) => {
        commit('setPosition', position)
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import geo from './modules/geo'

Vue.use(Vuex)

const store = () => new Vuex.Store({
    modules:{
        geo
    },
    actions:{
        async nuxtServerInit({
            commit
        },{req, app}){
          const {status,data:{province,city}} = await app.$axios.get('/geo/getPosition')
          commit('geo/setPosition',status===200?{city,province}:{city:'',province: ''})
        }
    }
})
export default store

页面中如何拿到请求的的数据呢？

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

简要总结一下：

首先配置一下这个请求所得到的内容，state就是当请求下来的数据存储库，我们用es6和一个对象存储这些数据，然后mutations就是通过同步的方法将得到的请求数据val添加到state的容器中，最后通过异步的方法执行mutations中的方法，最后导出这些store；
其次就是创建store实例给页面去调用，先给store创建一个模块名modules，再配合 nuxtServerInit 这个生命周期函数（类似于vue的beforemounted）去请求接口，由于DOM元素还没渲染到界面，因此只能使用app来去调用axios去请求数据
最后在对应的页面通过 $store.state.<modules名>.<存储接口数据的对象>.<拿到需要展示的数据键名>

展示的效果图：

最后拿到的是根据ip地址拿到的city值

❤ 项目源码 ❤
GitHub地址：https://github.com/Umbrella001/mtapp