背景
一般前端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
