02.Nuxt.js(视图,axios操作,插件)

Z时代
2024-01-10
分类：综合

3. 视图

3.1 默认布局

~/layouts/default.vue

3.2 自定义布局

步骤一: 在~/layouts文件夹下创建一个文件
- ~/layouts/blog.vue
- 注意,一定要有 </nuxt>标签,相当于之前学过的</router-view>

步骤二: 在页面中引入
- 如果未引入,则默认使用默认布局
```
<script>
export default {
  layout: "blog"
}
</script>
```

3.3 错误页面

可以实现对错误信息的个性化处理

实现方式1:

创建~/layouts/error.vue文件

<template>
  <div>
      <!-- 错误信息对象 -->
    {{ error }}
  </div>
</template>
<script>
export default {
    //  获取错误信息对象
  props: ["error"]
}
</script>

实现方式2:

创建~/pages/_.vue文件

<template>
  <div>
      <!-- 错误信息对象 -->
    {{ error }}
  </div>
</template>
<script>
export default {
    //  获取错误信息对象
  props: ["error"]
}
</script>

4. axios

4.1 普通axios

在nuxt.config.js中配置统一路径

 axios: {
    baseURL:"http://localhost:端口号/路由前缀"
  }

方法调用:

this.$axios.get("路径")
this.$axios.post("路径",value)
this.$axios.put("路径",value)
this.$axios.delete("路径")

4.2 asyncData发送ajax

有利于SEO(搜索引擎优化)
- 数据直接显示在页面上,利于爬虫的抓取

在页面组件被渲染之前获取数据
- 所以没有this
- 把查询到的数据存入到data区域中

4.2.1 一次请求

asyncData语法1: 使用context对象

上下文对象(nuxt所有功能)

<script>
export default {
  async asyncData( context ) {
    let {data : baseResult} =  await context.$axios.get("路径")
    return {
      变量 : baseResult.data
    }
  }
}
</script>

asyncData语法2 使用$axios对象

<script>
export default {
    //解构ontext中的$axios对象
  async asyncData( {$axios} ) {
    let {data : baseResult} =  await axios.get("路径")
    return {
      变量 : baseResult.data
    }
  }
}
</script>

4.2.2 多次请求

使用Promise对象（ $axios.get() 返回的就是 Promise对象）

<script>
export default {
  async asyncData( {$axios} ) {
    let [{data : baseResult1},{data : baseResult2}] = await Promise.all([方法1,方法2])
    return {
      变量1 : baseResult1.data,
      变量2 : baseResult1.data
    }
  },
}
</script>

4.2 fetch发送ajax

用于在页面被渲染之前填充状态数(store)数据

语法:

<script>
export default {
  async fetch( {$aioxs , store } ){
    //调用方法
    let {data : baseResult} = await $axios.get("路径")
    //向vuex中保存数据
    sotre.commit("方法名",value)
  }
}
</script>

5. 插件

5.1 回顾生命周期

只有 beforeCreate 和 created 这两个方法会在服务端被调用。
- localStorage 和 sessionStorage 都是浏览器端对象,在前端服务器没有,
- 如果在created 中使用,则会报错

总结:
- 在nuxt.js中,将之前created()中的代码,放到mounted()中

5.2 插件

5.2.1 插件机制

nuxt提供插件,对已有程序进行增强或控制

编写步骤:

步骤一: 在plugins创建文件

步骤二: 在nuxt.config.js文件中导入

plugins: [
    //前后端都可以使用
    { src: "~/plugins/my.js" },
    //仅在前端客户端使用
    { src: "~/plugins/my1.js", mode: "client" },
    //仅在前端服务器端使用
    { src: "~/plugins/my2.js", mode: "server" }
  ],

步骤三: 去页面中测试

5.2.2 自定义axios

目的: 编写一个api.js文件,用于统一管理维护请求

步骤一: 修改nuxt.config.js，编写axios baseURL

 axios: {
    baseURL:"http://localhost:端口号/路由前缀"
  }

步骤二: 在~/plugins文件夹下创建api.js并导入数据,和编写方法

//自定义函数
const request = {
    //axios方法
    findClassesAll : (params) => {
      return axios.get("/tearchservice/classes/findClassesAll",{params})
    },
  }
  var axios = null
  export default ({ $axios }, inject) => {
    //3） 保存内置的axios
    axios = $axios
    //4) 将自定义函数交于nuxt
    // 使用方式1：在vue中，this.$request.xxx()
    // 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()
    inject("request", request)
  }

步骤三: 在nuxt.config.js文件中进行配置

 plugins: [
     //设置在客户端和服务器端都可用
    { src: "~/plugins/api.js"},
  ],

步骤四: 在其他组件中进行调用

<script>
export default {
    //使用asyncData调用
    async asyncData( context ) {
        //调用方法: context.app.$request.方法名
        let {data : baseResult} = await context.app.$request.findClassesAll({})
        return {
            clist1: baseResult.data
        }
    },
    data() {
        return {
            params: {},
            clist: []
        }
    },
    methods: {
        async findClassesAllFn(){
            //调用方法: this.$request.方法名
            let {data : baseResult} = await this.$request.findClassesAll(this.params)
            this.clist1 = baseResult.data
        }
    },
    mounted() {
        // this.findClassesAllFn()
    },
}
</script>