背景

一般前端mock数据或者数据量过大且不需要考虑安全问题,或者数据稳定不需要常做变更的场景,这些数据可以由前端进行维护,将数据转为json文件放到前端本地进行读取。

由于公司业务,需要在进入页面的时候,一次获取15万条数据用于输入框的模糊搜索,但是这样前端一次性获取如此大量的数据,直接就导致了页面崩溃,加载奇慢。
这么大量且不需要时常做变更的数据,除了放到后端,通过分页的办法进行请求,还可以采用将数据转为json文件,存到前端的本地项目里,由前端进行维护。

前端如何读取本地json文件

前端存放json文件的位置

我们的项目是通过vue-cli3创建的,vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹),这里本地json文件也应该放在这里
在这里插入图片描述

请求JSON数据

封装axios实例

import axios from 'axios';

const service = axios.create({
  baseURL: '', // 请求本地json文件,那么baseURL取空字符串,域名就会是项目域名
  timeout: 30000,
});



// 请求拦截
service.interceptors.request.use(
  (config) => {
    return config;
  },
  (error: any) => {
    Promise.reject(error);
  },
);

// 响应拦截
service.interceptors.response.use(
  (response: any) => {
    const res = response.data;
    return Promise.resolve(res);
  },
  (error: any) => {
    return Promise.reject(error);
  },
);

export default service;

封装请求方法

特别注意:json文件存放在public目录下,如/public/data/jsonData.json,那么在请求json数据的时候,地址千万千万千万不能写/public/data/jsonData.json,而是写/data/jsonData.json,否则会报404,因为静态资源在打包后,默认public内的文件放在项目根目录,

import $axiosJson from '@/utils/axiosJson'; // 引入封装的axios实例
// 获取本地json数据
export const getJsonDataApi = () => {
  return $axiosJson({
    url: `/data/jsonData.json`, // json文件地址
    method: 'GET',
  });
};

页面组件调用请求方法

<template>
  <div></div>
</template>

<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import { getJsonDataApi } from '@/api/account';

@Component({
  components: {
  },
})
export default class GetJson extends Vue {
  private jsonData: any = [];
  private created() {
    this.getBankList();
  }
  // 获取本地JSON数据
  private async getJsonData() {
    const res = await getJsonDataApi();
    this.jsonData= res;
  }
}
</script>
<style lang='scss' scoped>
</style>

文章参考:https://blog.csdn.net/reffrselom/article/details/96873428

Logo

前往低代码交流专区

更多推荐