nuxt.js写项目时增加错误提示页面操作

下面我将详细讲解如何在 Nuxt.js 项目中增加错误提示页面操作的完整攻略。

增加错误提示页面操作的步骤

1. 安装 @nuxtjs/toast 插件。

bash
npm install --save @nuxtjs/toast

注：@nuxtjs/toast 是一个消息提示插件，能够在页面中动态显示成功或错误的提示消息。

1. 在 nuxt.config.js 文件中引入 @nuxtjs/toast 插件，并配置插件。

javascript
modules: [
['@nuxtjs/toast', {
position: 'top-center',
duration: 3000
}]
],

注：上面的代码中，position 属性设置为 ‘top-center’，表示提示信息出现在页面顶部居中；duration 属性是提示信息的持续时间，毫秒为单位，默认值为3000ms（3s）。

1. 对于需要显示错误提示的地方，比如一个 AJAX 请求，可以在请求失败时触发 this.$toast.error() 来显示错误提示信息。

javascript
export default {
async asyncData ({ $axios }) {
try {
const data = await $axios.get('/api/users')
return { users: data }
} catch (error) {
this.$toast.error('出错啦！请稍后再试。')
return { users: [] }
}
}
}

注：上面的代码中，在 asyncData 方法的 catch 块中，调用 this.$toast.error('出错啦！请稍后再试。') 来显示错误提示信息。

示例说明

下面以两个示例来说明如何使用 @nuxtjs/toast 插件来增加错误提示页面操作。

示例一：表单验证失败

考虑一个表单验证的场景：用户需要提交一份简历，在提交之前需要对用户填写的基本信息进行验证。如果用户填写的信息有错误，那么需要提示用户填写有误的地方，并阻止提交。这时可以使用 @nuxtjs/toast 插件来动态显示错误提示信息。示例代码如下：

<template>
  <form>
    <div>
      <label for="name">姓名</label>
      <input id="name" v-model="name">
    </div>
    <div>
      <label for="age">年龄</label>
      <input id="age" v-model="age">
    </div>
    <div>
      <label for="email">邮箱</label>
      <input id="email" v-model="email">
    </div>
    <button type="submit" @click.prevent="submitForm">提交</button>
  </form>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      age: '',
      email: ''
    }
  },
  methods: {
    submitForm () {
      if (!this.name) {
        this.$toast.error('请填写姓名。')
        return
      }
      if (this.age && !Number.isInteger(+this.age)) {
        this.$toast.error('年龄必须是整数。')
        return
      }
      if (!this.email || !this.email.includes('@')) {
        this.$toast.error('请填写有效的邮箱地址。')
        return
      }
      // 提交表单...
      this.$toast.success('提交成功！')
    }
  }
}
</script>

在上面的代码中，当 submitForm 方法检测到表单有误时，会通过 this.$toast.error() 触发错误提示。比如当用户没有填写姓名时，会提示“请填写姓名。”；当年龄不是整数时，会提示“年龄必须是整数。”；当邮箱地址无效时，会提示“请填写有效的邮箱地址。”

示例二：用户登录失败

在一个用户登录的页面中，如果用户输入的用户名和密码无效，那么需要提示用户登录失败并重新输入。这时可以使用 @nuxtjs/toast 插件来动态显示错误提示信息。示例代码如下：

<template>
  <form>
    <div>
      <label for="username">用户名</label>
      <input id="username" v-model="username">
    </div>
    <div>
      <label for="password">密码</label>
      <input id="password" type="password" v-model="password">
    </div>
    <button type="submit" @click.prevent="login">登录</button>
  </form>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login () {
      try {
        const response = await this.$axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        this.$toast.success('登录成功！')
        // 跳转到用户主页
      } catch (error) {
        this.$toast.error('用户名或密码输入错误，请重试。')
      }
    }
  }
}
</script>

在上面的代码中，当登录失败时，会通过 this.$toast.error() 触发错误提示。提示消息为“用户名或密码输入错误，请重试。”