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>