11 9 学习vue3

标签：11 axios const import baseURL js 学习 vue3 article

今天创建了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;   总结：反正这三个组合成基本且完整的工程化vue项目，但具体细节我不太懂。后续会继续学习

 

标签：11,axios,const,import,baseURL,js,学习,vue3,article
From： https://www.cnblogs.com/fengjiale/p/17822552.html