US group project and location-based services --- Change City 5

First, write the city service class interface

Second, the query class interface

Third, Start → database import

Procedure:
① Open downloaded Robo 3T, first right- New Connectionclick create Databaseto create

② into the corresponding data dbs source folder [file] folder in the source code, import the corresponding data source command

after a successful import can return robomongo interface:

Use ③ project Signed to build interfaces to achieve good interface data server take corresponding [Note: It does not require a signature sign up as an empty parameter passed to]

how to obtain the signature sign?

Here note: the server has now canceled sign verified, so the interface get written request parameters directly address?sign

Code is as follows:

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;

And you want to serve/index.jsimport and use configuration

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

④ After configuring the relevant routes we can use postmanto interface local test

⑤ interface is not a problem, we have to think about how to render this data go to our page

• Way: by the request interface is performed in asynchronous way koa assembly vue
• Second way: Using ssr way, the server side rendering when he got the data, then the amount of page rendering time had come directly with the data

We use two ssr to achieve this positioning services rendered

Four, ssr complete with vuex positioning service interface

In storea new js write store geo.js, write another page via anchor store to get the requested data
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

How to get the data page request it?

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

To summarize briefly:

First, the configuration about this request is obtained, the state is when a data store request down, we es6 and an object store data, and mutations that requests data synchronization method obtained val added to the state of the container, methods mutations last execution through asynchronous method, and finally export the store;
second is to create a store page instances to call, give the store to create a module name modules, together with nuxtServerInitthe life-cycle function (similar to a vue beforemounted) to request interface Since DOM element not rendering to the interface, you can only use the app to request data come calling axios
last in the corresponding page by$store.state.<modules名>.<存储接口数据的对象>.<拿到需要展示的数据键名>

The renderings show:

Finally we got the city in accordance with the value of ip address to get

❤ source project ❤
GitHub address: https: //github.com/Umbrella001/mtapp