当前位置：首页 > news >正文

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

news 来源：原创 2025/6/14 19:43:20

一、接口配置

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>