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(搜索引擎优化)
  • 数据直接显示在页面上,利于爬虫的抓取
• 在页面组件被渲染之前获取数据
  • 所以没有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>