一、编写城市服务类接口
二、查询类接口
三、开始 → 数据库导入
操作步骤:
① 打开下载好的 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