【功能实现】axios实现动态数据

1.安装axios

javascript">npm i axios

2.axios调取数据

javascript">import { onMounted,ref } from "vue"const titleList=ref([])//获取数据库数据，将数据赋值给titleListconst getArticles = async () => {const result = await axios.get('http://127.0.0.1:3000/getAccount')titleList.value = result.data.dataconsole.log(result.data.data);}//调用getArticles方法onMounted(()=>{getArticles()})

3.页面使用数据

javascript"> <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文件

javascript">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文件

javascript">import http from '../utils/request.js'//请求全部文章数据
export const getArticles= () =>{//返回一个promise对象return http.get('http://127.0.0.1:3000/getArticle')
}

3.在首页直接调用使用

javascript">import { getArticles } from "../api";import { onMounted,ref } from "vue"const titleList=ref([])getArticles().then((data)=>{titleList.value = data.data.dataconsole.log(data.data.data);})onMounted(()=>{getArticles()})

4.好处

对于api的集中存放，增加代码规范化，后期更好维护