vue中json-server及mockjs后端接口模拟

一、接口配置

1.安装json-server;

pnpm i json-server@0.17.3 -D

2.安装mockjs;

pnpm i mockjs -D

3.把json数据放在合适的位置，在根目录下创建mock.js文件，引入json数据;

4.在package.json中添加

"mock": "json-server -w mock.js -p 3000"

删除

 "type": "module",

 5.启动服务;

pnpm mock

 二、axios请求数据

 1.安装axios;

pnpm i axios

2.在src文件夹下创建api文件夹，创建接口文件index.js，封装接口;

3.使用数据

<script setup>
import { getWuhanBuildings,getWuhanRoads } from '@/api';
import { inject,onMounted, onBeforeUnmount} from 'vue'
const {map,scene} = inject('mapScene')
onMounted(async() => {map.flyTo({center: [114.299987, 30.58518],zoom: 15,pitch:45,}) //加载城市建筑和道路数据const { data: buildingsData } = await getWuhanBuildings();const { data: roadsData } = await getWuhanRoads();console.log(buildingsData,roadsData)
})onBeforeUnmount(() => {})
</script>

<template><div></div>
</template><script setup>
import { getWuhanBuildings, getWuhanRoads } from '@/api'
import { inject, onMounted, onBeforeUnmount } from 'vue'
import { CityBuildingLayer, LineLayer, LayerSwitch } from '@antv/l7'
const { map, scene } = inject('mapScene')
let buildingsLayer, roadsLayer, layerSwitch
onMounted(async () => {map.flyTo({center: [114.299987, 30.58518],zoom: 15,pitch: 45,})//加载城市建筑和道路数据const { data: buildingsData } = await getWuhanBuildings()const { data: roadsData } = await getWuhanRoads()//console.log(buildingsData,roadsData)buildingsLayer = new CityBuildingLayer({name: '建筑',})buildingsLayer.source(buildingsData).size('Elevation', (e) => {return e}).filter('Elevation', (e) => {return e > 50}).color('rgb(240,240,240)').animate(true).active(true).style({opacity: 0.7,baseColor: 'rgb(16, 16, 16)',windowColor: 'rgb(30, 60, 89)',brightColor: 'rgb(255, 176, 38)',sweep: {enable: true,sweepRadius: 2,sweepColor: '#1990FF',sweepSpeed: 0.5,sweepCenter: [114.406325, 30.465113],},})scene.addLayer(buildingsLayer)//加载道路数据roadsLayer = new LineLayer({name: '道路',})roadsLayer.source(roadsData).shape('line').color('type', (type) => {switch (type) {case 'motorway':return '#F9D371'case 'motorway_link':return '#3DB2FF'case 'trunk':return 'green'case 'trunk_link':return '#6E85B2'case 'primary':return '#F47340'case 'primary_link':return '#F6A9A9'case 'secondary':return '#EF2F88'case 'secondary_link':return '#5F7A61'case 'tertiary':return '#1ee3cf'case 'tertiary_link':return '#C2F784'case 'pedestrian':return '#FFF89A'case 'residential':return 'rgba(22, 119, 255, .5)'case 'road':return '#93FFD8'case 'path':return '#BAFFB4'case 'unclassified':return '#D3DEDC'case 'service':return '#AEFEFF'case 'living_street':return '#9B0000'case 'track':return '#F5F5F5'case 'highway':return 'red'case 'rail':return '#08ffc8'default:return '#FFE3E3'}}).active(true).size(1).style({opacity: 0.5,}).animate({interval: 1, // 间隔duration: 1, // 持续时间，延时trailLength: 2, // 流线长度})scene.addLayer(roadsLayer)layerSwitch = new LayerSwitch({layers: [buildingsLayer, roadsLayer],})scene.addControl(layerSwitch)
})onBeforeUnmount(() => {scene.removeLayer(buildingsLayer)scene.removeLayer(roadsLayer)scene.removeControl(layerSwitch)
})
</script><style scoped></style>