个人练手项目(四）

1.如何定义一个接口

1.首先在server下新建一个interface文件夹，然后新建utils文件夹，作为其他接口的基础配置

server/interface/utils/axios.js

import axios from 'axios'  // 首先引入axios包
const instance = axios.create({
    baseURL: `http://${process.env.HOST||'localhost'}:${process.env.PORT||3000}`，
    timeout: 1000,
    headers: {
        
    }
})
复制代码

2.新建index.js，接口

server/interface/index.js

要记得下载所需的包 koa-router和axios

// 引入所需包
import Router from 'koa-router';
import axios from './utils/axios';

let router = new Router({
    prefix: '/index'  // 定义路由前缀
})

// 获取首页食物分类
router.get('./getSort', async(ctx) => {
    let {data: sort} = await axios.get('链接地址')
    ctx.body = {
        sort
    }
})
// 要记得将router到处
export default router;
复制代码

3.在server/index.js引用路由，这样才能够使用此路由

server/index.js

首先在头部引入接口 import index from './interface/index' 然后在

app.use(ctx => {
    ctx.status = 200 
    return new Promise((resolve, reject) => {
        ctx.res.on('close', resolve)
        ctx.res.on('finish', resolve)
        nuxt.render(ctx.req, ctx.res, promise => {
            promise.then(resolve).catch(reject)
        })
    })
})
复制代码

的前面引入路由

app.use(index.routes()).use(index.allowedMethods())
复制代码

4. 使用

methods:{
	initData(){
		let self = this;
		self.$axios.get('/index/getSort').then(({data}) => {
			self.data=data.sort;
		})
	}
}
复制代码

2.使用高德地图获取经纬度和具体地址

1.首先在nuxt.config.js中

script: [
    {src:"http://webapi.amap.com/maps?v=1.4.4&key=2ac3c722f78b023e77123759b172cb91"}
复制代码

2.在headNav.vue组件中

data() {
    return {
		position: '',
		address: ''
    }
  },
mounted() {
    //加载地图和相关组件
    this.loadmap()
},
methods: {
    // 初始化地图，获取经纬度和地址描述
    loadmap() {
      let self = this
      const map = new AMap.Map('container', {
        resizeEnable: true
      })
      AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位
          timeout: 10000, // 超过10秒后停止定位
          buttonPosition: 'RB', // 定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量
          zoomToAccuracy: true
        })
        map.addControl(geolocation)
        geolocation.getCurrentPosition(function(status, result) {
          if (status == 'complete') {
            onComplete(result)
          } else {
            onError(result)
          }
        })
      })
      //解析定位结果
      function onComplete(data) {
        var str = ['定位成功']
        str.push('经度：' + data.position.getLng())
        str.push('纬度：' + data.position.getLat())
        let lnglatXY = [data.position.getLng(), data.position.getLat()] //已知点坐标
        regeocoder(lnglatXY)
        if (data.accuracy) {
          str.push('精度：' + data.accuracy + ' 米')
        } //如为IP精确定位结果则没有精度信息
      }
      //解析定位错误信息
      function onError(data) {
        console.log('定位失败', data.message)
      }
      //逆地理编码
      function regeocoder(loc) {
        var geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all'
        })
        geocoder.getAddress(loc, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // console.dir(result);
            geocoder_CallBack(result)
          }
        })
      }
      function geocoder_CallBack(data) {
        let address = ''
        if (data.regeocode.pois) {
          // 地址
          address = data.regeocode.pois[0].name
        } else {
          address = data.regeocode.formattedAddress //返回地址描述
		}
		self.address=address
        console.log(address)
      }
    }
}
复制代码

具体代码可以在 github.com/chenrunmiao… 查看