今天创建了vue项目，了解了vue项目的目录如下：
vue的组件分为组合式api和选项式api
①创建了组件内容如下：
<script setup> import {articleGetAllService,articleSearchService} from '@/api/article.js' //定义响应式数据 import { ref } from 'vue'; const articleList=ref([]);//获取所有文章数据 //同步获取articleGetService的返回结果 async await const getAllArticle=async function(){ let data=await articleGetAllService(); articleList.value=data; } getAllArticle();
//定义响应式数据 const searchCondition=ref({ category:'', state:'' })
//声明函数search const search=async function(){ //文章搜索 let data=await articleSearchService({...searchCondition.value}); articleList.value=data; }
</script> <template> <div>
文章分类: <input type="text" v-model="searchCondition.category">
发布状态: <input type="text" v-model="searchCondition.state">
<button v-on-click="search">搜索</button>
<br /> <br /> <table border="1 solid" colspa="0" cellspacing="0"> <tr> <th>文章标题</th> <th>分类</th> <th>发表时间</th> <th>状态</th> <th>操作</th> </tr> <tr v-for="(article,index) in articleList"> <td>{{article.title}}</td> <td>{{article.category}}</td> <td>{{article.time}}</td> <td>{{article.state}}</td> <td> <button>编辑</button> <button>删除</button> </td> </tr>
</table> </div>
</template> ② 接口调用的js代码会封装到.js文件中，并一函数的形式暴露给外部，故创建了api/article.js: /* import axios from "axios"; //定义变量，记录公共前缀，baseURL const baseURL='http:localhost:8080'; const instance=axios.create({baseURL}) */ import request from '@/util/request.js'
//接口调用的js代码会封装到.js文件中，并一函数的形式暴露给外部 //获取所有文章数据的函数 export function articleGetAllService(){ //同步等待服务器相应的结果，并返回，async await return request.get('/article/getAll'); } //根据文章分类和发布 export function articleSearchService(conditions){ return request.get('/article/search',{params:{conditions}});
};
③配置了相应拦截器util/request.js: //定制请求实例
import axios from "axios"; //定义变量，记录公共前缀，baseURL const baseURL='http:localhost:8080'; const instance=axios.create({baseURL})
//添加响应拦截器 instance.interceptors.response.use( result=>{ return result.data;
}, err=>{ alert('服务异常'); return Promise.reject(err);//异步状态转化为失败状态
} )
export default instance; 标签：10,axios,const,2023.11,baseURL,js,import,article From： https://www.cnblogs.com/ysk0904/p/17825233.html