Udemy - Nuxt JS with Laravel API - Building SSR Vue JS Apps 笔记12 Nuxt - Global validation

Global Vuex Validation

截至目前，注册，登录的输入验证还没有实现，所以继续：

新建store/validation.js

export const state = () => ({
  errors: []
})

//getters
export const getters = {
  errors(state) {
    return state.errors;
  }
}

//mutations
export const mutations = {
  SET_VALIDATION_ERRORS(state, errors) {
    state.errors = errors;
  }
}

//actions
export const actions = {
  setErrors({commit}, errors) {
    commit('SET_VALIDATION_ERRORS', errors);
  },
  clearErrors({commit}) {
    commit('SET_VALIDATION_ERRORS', []);
  },
}

新建一个plugin，plugins/axios.js:

export default function ({$axios, store}) {
  $axios.onError(error => {
    console.log(error);
  });

  $axios.onRequest(() => {
    console.log('test');
  });
}

在nuxt.config.js中注册这个plugin

npm run dev 启动服务。

跳转登录页面 http://localhost:3000/login

效果

继续修改axios.js

export default function ({$axios, store}) {
  $axios.onError(error => {
    if (error.response.status === 422) {
      store.dispatch('validation/setErrors', error.response.data.errors);
    }
    return Promise.reject(error);
  });


  $axios.onRequest(() => {
    store.dispatch('validation/clearErrors');
  });
}

效果：

测试效果ok，然后新建plugins/mixins/validation.js文件，

import Vue from 'vue';
import {mapGetters} from 'vuex';

const Validation = {
  install(Vue, options) {
    Vue.mixin({
      computed: {
        ...mapGetters({
          errors: 'validation/errors',
        })
      }
    })
  }
};
Vue.use(Validation);

然后nuxt.config.js中注册之：

接下来把errors数据展示到页面上。

修改login.vue:

<template>
  <div class="container col-md-6 mt-5">
    <h2>Login</h2>
    <br>
    <form @submit.prevent="submit">
      <div class="form-group">
        <label>Email address</label>
        <input type="email" class="form-control" v-model.trim="form.email" autofocus>
        <small class="form-text text-danger" v-if="errors.email">{{errors.email[0]}}</small>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" v-model.trim="form.password" autofocus>
        <small class="form-text text-danger" v-if="errors.password">{{errors.password[0]}}</small>
      </div>
      <button type="submit" class="btn btn-primary">Login</button>
    </form>
    <br>
    <p>Don't have an account?
      <nuxt-link to="/register">Register</nuxt-link>
    </p>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        form: {
          email: '',
          password: '',
        }
      }
    },
    methods: {
      async submit() {
        await this.$auth.loginWith('local', {
          data: this.form,
        });
        this.$router.push('/');
      },
    }

  }
</script>

<style scoped>

</style>

<template>
  <div class="container col-md-6 mt-5">
    <h2>Register</h2>
    <br>
    <form @submit.prevent="submit">
      <div class="form-group">
        <label>UserName</label>
        <input type="text" class="form-control" placeholder="Enter your Username" v-model.trim="form.name" autofocus>
        <small class="form-text text-danger" v-if="errors.name">{{errors.name[0]}}</small>
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="email" class="form-control" placeholder="Enter your email address" v-model.trim="form.email">
        <small class="form-text text-danger" v-if="errors.email">{{errors.email[0]}}</small>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" placeholder="Enter your password" v-model.trim="form.password">
        <small class="form-text text-danger" v-if="errors.password">{{errors.password[0]}}</small>
      </div>
      <div class="form-group">
        <label>Confirm Password</label>
        <input type="password" class="form-control" placeholder="Confirm your password"
               v-model.trim="form.password_confirmation">
        <small class="form-text text-danger"
               v-if="errors.password_confirmation">{{errors.password_confirmation[0]}}</small>
      </div>
      <button type="submit" class="btn btn-primary">Register</button>
    </form>
    <br>
    <p>Already have an account?
      <nuxt-link to="/login">Login</nuxt-link>
    </p>
  </div>
</template>

<script>
  export default {
    name: "register",
    data() {
      return {
        form: {
          name: '',
          email: '',
          password: '',
          password_confirmation: '',
        }
      }
    },
    methods: {
      async submit() {
        await this.$axios.$post('register', this.form);

        this.$auth.loginWith('local', {
          data: {
            email: this.form.email,
            password: this.form.password,
          }
        });

        //redirect
        this.$router.push('/');
      }
    }
  }
</script>

<style scoped>

</style>

注意，此时测试，会因为如果error而跳转422.因为没有处理exception，后面会处理。
https://github.com/nuxt/nuxt.js/issues/5181
https://stackoverflow.com/questions/55722211/nuxt-js-and-laravel-api-422-displaying-error-instead-of-forms/55731186

处理exception后 login.vue

<template>
  <div class="container col-md-6 mt-5">
    <h2>Login</h2>
    <br>
    <form @submit.prevent="submit">
      <div class="form-group">
        <label>Email address</label>
        <input type="email" class="form-control" v-model.trim="form.email" autofocus>
        <small class="form-text text-danger" v-if="errors.email">{{errors.email[0]}}</small>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" v-model.trim="form.password" autofocus>
        <small class="form-text text-danger" v-if="errors.password">{{errors.password[0]}}</small>
      </div>
      <button type="submit" class="btn btn-primary">Login</button>
    </form>
    <br>
    <p>Don't have an account?
      <nuxt-link to="/register">Register</nuxt-link>
    </p>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        form: {
          email: '',
          password: '',
        }
      }
    },
    methods: {
      async submit() {
        try {
          await this.$auth.loginWith('local', {
            data: this.form,
          });
        } catch (e) {
          return;
        }
        this.$router.push('/');
      },
    }

  }
</script>

<style scoped>

</style>

及register.vue

<template>
  <div class="container col-md-6 mt-5">
    <h2>Register</h2>
    <br>
    <form @submit.prevent="submit">
      <div class="form-group">
        <label>UserName</label>
        <input type="text" class="form-control" placeholder="Enter your Username" v-model.trim="form.name" autofocus>
        <small class="form-text text-danger" v-if="errors.name">{{errors.name[0]}}</small>
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="email" class="form-control" placeholder="Enter your email address" v-model.trim="form.email">
        <small class="form-text text-danger" v-if="errors.email">{{errors.email[0]}}</small>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" placeholder="Enter your password" v-model.trim="form.password">
        <small class="form-text text-danger" v-if="errors.password">{{errors.password[0]}}</small>
      </div>
      <div class="form-group">
        <label>Confirm Password</label>
        <input type="password" class="form-control" placeholder="Confirm your password"
               v-model.trim="form.password_confirmation">
        <small class="form-text text-danger"
               v-if="errors.password_confirmation">{{errors.password_confirmation[0]}}</small>
      </div>
      <button type="submit" class="btn btn-primary">Register</button>
    </form>
    <br>
    <p>Already have an account?
      <nuxt-link to="/login">Login</nuxt-link>
    </p>
  </div>
</template>

<script>
  export default {
    name: "register",
    data() {
      return {
        form: {
          name: '',
          email: '',
          password: '',
          password_confirmation: '',
        }
      }
    },
    methods: {
      async submit() {
        try {
          await this.$axios.$post('register', this.form);
        } catch (e) {
          return;
        }

        try {
          this.$auth.loginWith('local', {
            data: {
              email: this.form.email,
              password: this.form.password,
            }
          });
        } catch (e) {
          return;
        }

        //redirect
        this.$router.push('/');
      }
    }
  }
</script>

<style scoped>

</style>

源代码：

https://github.com/dzkjz/laravel-backend-nuxt-frontend-frontpart

posted @ 2020-05-15 15:47 dzkjz 阅读(45) 评论(0) 收藏举报

刷新页面返回顶部

三个臭皮匠

Udemy - Nuxt JS with Laravel API - Building SSR Vue JS Apps 笔记12 Nuxt - Global validation

Global Vuex Validation

公告