1.安装axios
npm i axios
2.axios调取数据
import { onMounted,ref } from "vue"
const titleList=ref([])
//获取数据库数据,将数据赋值给titleList
const getArticles = async () => {
const result = await axios.get('http://127.0.0.1:3000/getAccount')
titleList.value = result.data.data
console.log(result.data.data);
}
//调用getArticles方法
onMounted(()=>{
getArticles()
})
3.页面使用数据
<template v-for="item in titleList" :key="item.id">
<routerLink :to="`/detail/${item._id}`" class="posts-item shadow-box">
<div class="posts-item__infos">
<div class="info__dates"><span class="yyc yy-date"></span><span>发布于 2024-12-06</span></div>
<h3 class="info__title">{{item.title}}</h3>
<div class="info__total">
<div class="total__item"><span class="yyc yy-fire"></span><span>33阅读</span></div>
<div class="total__item"><span class="yyc yy-comment"></span><span>22条评论</span></div>
<div class="total__item"><span class="yyc yy-heart"></span><span>YYF</span></div>
</div>
</div>
</routerLink>
</template>
4.优化
1.新建utils文件夹,存放工具,新建request.ts文件
import axios from 'axios'
const http= axios.create({
baseURL: '/api',// 通用请求地址前缀
timeout: 10000,//超时时间
})
// 添加请求拦截器
http.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
export default http
2.新建api文件夹,在文件夹下新建index.ts文件
import http from '../utils/request.js'
//请求全部文章数据
export const getArticles= () =>{
//返回一个promise对象
return http.get('http://127.0.0.1:3000/getArticle')
}
3.在首页直接调用使用
import { getArticles } from "../api";
import { onMounted,ref } from "vue"
const titleList=ref([])
getArticles().then((data)=>{
titleList.value = data.data.data
console.log(data.data.data);
})
onMounted(()=>{
getArticles()
})
4.好处
对于api的集中存放,增加代码规范化,后期更好维护