axios请求本地json文件——调用路径只支持相对路径形式 & 设置、获取、清除sessionStorage & 跨组件通信之父组件有provide选项提供数据,子组件有inject选项来使用数据
示例
1.安装axios
npm install axios --save
2.在main.js中引入
import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App)
app.config.globalProperties.$http = axios;
app.use(VueAxios, axios)
3.在根目录下的public文件夹data文件夹下新建一个userlist.json文件内容如下
{
"data":{
"sucess":200,
"userList":[
{
"success":200,
"name":"王三",
"key":0,
"age":21,
"address":"海珠区琶洲会展中心"
},
{
"success":200,
"name":"李五",
"key":1,
"age":32,
"address":"海珠区花城大道北109号"
}
],
"isShow":true,
"loginUrl":"http://baidu.com/image",
}
}
4.在需要请求数据的文件里导入axios
import axios from 'axios'
5.请求
<script lang="ts" setup>
import axios from 'axios';
const dataSource: Ref<DataItem[]> = ref([]); //用户表格数据
// 获取表格数据
const getTableList = () => {
axios.get('http://127.0.0.1:8000/data/userList.json').then((res) => {
console.log(res, 'res');
if (res.data.data.sucess == 200) {
dataSource.value = res.data.data.userList;
// data = res.data.data.userList;
} else {
alert('数据获取失败');
}
});
};
</script>
实例一
src同层级,public文件夹下新建serverConfig.json
public/serverConfig.json
{
"isShow":true,
"loginUrl":"http://baidu.com/image",
}
src/main.ts
import {createApp, ref, provide} from 'vue'
import App from './App'
import axios from '@/utils/request'
const app = createApp(App)
let isShow:any = null
const getConfig = function(){
axios.get('serverConfig.json').then((result)=>{ // public下一级,只写文件名
app.provide('isShow',result.data.isShow)
app.provide('loginUrl',result.data.loginUrl)
isShow = result.data.isShow
app.mount('#app')
}).catch((error)=>{
console.log(error)
})
}
getConfig() // 调用声明的全局方法
- provide方法中第一个参数是key,第二个参数是value
页面使用
index.vue
<script setup>
import {inject, ref, onMounted, watch}
let isShow = ref(inject('isShow'))
const loginUrl = inject('loginUrl')
const getKey = () => {
axios.post(process.env.VUE_API_HOST + '/login/getKey', {}).then((res)=>{
if(res.data.code == '200'){
// 设置sessionStorage
window.sessionStorage.setItem('loginUrl',JSON.stringify(res.data.data))
}
})
}
getKey()
// 获取sessionStorage
const loginNewUrl = window.sessionStorage.getItem('loginUrl')
// 清除sessionStorage
const clearSession = (store:any) => {
window.sessionStorage.removeItem('isShow')
}
clearSession(store)
</script>
实例二
src同层级,public文件夹下的static文件夹中,新建userInfo.json
public/static/userInfo.json
{
"userName":"小明",
"userId":"Manage01",
}
public中的JSON文件,在发送axios请求时,不要携带 public 这个目录名
created() {
axios({
method: 'get',
url: '/static/userInfo.json', // 不用写public,public下两级,需写文件夹名
}).then((data) => {
console.log(data)
})
},
methods: {},
}
搭建的vue项目,要把JSON文件放到项目中的public文件夹中,并且要写绝对路径,这是因为:
- assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。build的时候由Webpack解析为模块依赖。
- public/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。
必须使用绝对路径引用这些文件,这是通过在 项目vue.config.js文件中的 assetsPublicPath 和
assetsSubDirectory 连接来确定的。 任何放在 public/中文件需要以绝对路径的形式引用:/static/[filename],
所以如果需要引用static目录下的图片及其他资源,应该使用绝对路径。