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
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>