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

3. 视图

3.1 默认布局

~/layouts/default.vue

3.2 自定义布局

步骤一: 在~/layouts文件夹下创建一个文件

~/layouts/blog.vue
注意,一定要有标签,相当于之前学过的

步骤二: 在页面中引入

如果未引入,则默认使用默认布局

<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(搜索引擎优化)数据直接显示在页面上,利于爬虫的抓取

在页面组件被渲染之前获取数据

把查询到的数据存入到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 = nullexport default ({ $axios }, inject) => {//3） 保存内置的axiosaxios = $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>