Leafage的诞生（2.nuxt.js如何在组件和页面中请求数据）

本文个人博客地址：https://www.abeille.top/posts/detail/213489UI上一篇文章创建了一个前端-结束项目，接下来开始写代码。因为初始化项目只是最起码的基础依赖，开发时需要一些第三方库来支持，比如样式/组件库。在开发Leafage网站的过程中，尝试过viewui（原名iview）、element-ui、antdesignvue、vuetify等几个组件库，但后面会发现使用组件开发界面更简单libraries，但是限制比较多，很多文档写的不好。稍微复杂的组合或配置很难实现。最重要的一点是除了vuetify之外的几个组件库默认是不支持响应式的。需要适配，后来发现nuxtjs官网使用的是css样式库tailwindcss，它和bulma也很相似，bulma和tailwindcss都是css开发的，不包含任何框架依赖，但是bulma更相似bootstrap，不同的是不依赖jquery等任何Javascript，参考nuxtjs官网开发，选择使用tailwindcss。作为一个Java程序员，不使用组件库是很难从零开始写前端的。找个好看的模板去模仿，然后开始招各大模板网站，总是很容易的，有的模板可能要几块钱，买一个你满意的，然后参照着写或者直接修改。页面开发完成后，需要请求服务接口。由于后台服务还没有开发，所以需要使用mock.js来模拟API。首先安装mock.js依赖：yarnaddmock.js-D安装完成后，打开plugins目录，添加mock.ts文件（如果使用javascript，则创建mock.js），配置mock接口，示例如下：importMockfrom'mockjs'Mock.mock(/posts\.json/,{'list|1-10':[{'id|+1':1,'title':'mytitle'}]})配置完成后，需要在nuxt.config.ts文件中配置才能生效，否则会执行默认配置；//渲染页面前运行的插件(https://go.nuxtjs.dev/config-plugins)plugins:['~/plugins/mock']，然后使用axios请求接口获取数据。1、配置axios因为在项目初始化的时候安装了axios工具，所以现在可以使用axios请求页面（pages目录下的.vue）或者组件（components目录下的.vue）的数据。Nuxtjs默认会配置axios的一些配置。如果你想自己配置一些，在plugins目录下创建一个axios.ts文件，然后进行相关设置。参考如下：import{Plugin}from'@nuxt/types'import{AxiosRequestConfig,AxiosError}from'axios'conststatusCode:any={400:'请求参数错误',401:'权限不足，请登录再次'，403：'服务器拒绝此访问'，500：'内部服务器错误'，501：'服务器不支持请求中使用的方法'，502：'网关错误'，504：'网关超时'}exportconstaccessor:Plugin=({error,app:{$axios},redirect})=>{$axios.onRequest((config:AxiosRequestConfig)=>{returnconfig})$axios.onError((err:AxiosError))=>{conststatus:any=err.response?.statusif(status===404){redirect('/error')}else{error({message:statusCode[status]})返回Promise.reject(err)}})}需要注意的是，在使用typescript的时候，引入axios的时候，不是通过'axios'导入axios，而是需要通过@nuxt/types导入Plugin，然后再导入AxiosRequestConfig和axios的AxiosError。如果使用axios的属性比较多，也需要导入；import{Plugin}from'@nuxt/types'import{AxiosRequestConfig,AxiosError}from'axios和mockjs是一样的这样，配置完成后，需要在nuxt.config.ts中的plugins项下添加这个配置文件；//渲染页面前运行的插件(https://go.nuxtjs.dev/config-plugins)plugins:['~/plugins/mock','~/plugins/axios'],2.参考官方axiosaxios基本使用的文档（中文文档：http://axios-js.com/zh-cn/docs/），包括同步请求、异步请求、并发请求等。在nuxtjs中，除了一般场景除了在vue钩子（Hook）中使用axios之外，它还提供了另外两个请求数据进行渲染计时的函数，fetch()和asyncData()。这两个函数的共同点是都是异步函数，所以使用的时候需要加上await关键字。两者的区别在于：asyncData()：只能在页面中使用，也就是在pages目录下的.vue文件中，他会阻塞页面的加载，所以不能请求大的数据量或许多同步接口；你不能使用this关键字；它不能被调用，它只会在页面加载时自动执行；fetch()：可以在components中使用，也可以在page中使用，即components目录和pages目录下的.vue文件中；可以使用this关键字；可以重复调用，即直接在组件中调用fetch()获取数据；对于这两个函数的使用，我们通过下面的例子看看如何使用：默认defineComponent({name:"Main",asyncfetch(){this.datas=awaitthis.$axios.get(SERVER_URL.posts.concat("?page=0&size=10&order=",this.order)).then((res)=>res.data);},data(){return{datas:[],order:"likes",};},methods:{retrieve(order:string){this.order=order;this.$fetch();//这里调用fetch()函数复用接口request},},});示例展示了fetch()请求接口的使用，以及在其他函数中是如何调用和执行的；另外，使用fetch()会有一个$fetchState来判断fetch()的执行，可以根据不同的情况处理不同的页面逻辑。示例如下：