美团项目 --- 定位服务及切换城市5
文章目录
- 一、编写城市服务类接口
- 二、查询类接口
- 三、开始 → 数据库导入
- 四、ssr配合vuex进行定位服务接口的完成
一、编写城市服务类接口
二、查询类接口
三、开始 → 数据库导入
操作步骤：
① 打开下载好的 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.
展示的效果图：
最后拿到的是根据ip地址拿到的city值
❤ 项目源码 ❤
GitHub地址：https://github.com/Umbrella001/mtapp
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！