vuex專案---移動web應用頁面構建功能實作

8.登錄頁面

1.創建組件/src/views/login/login.vue

<template>
  <div class="login">
    登錄
  </div>
</template>
<script>
export default {
  name: 'Login'
}
</script>

2.配置路由

{
    path: '/login',
    name: 'login',
    component: () => import( '../views/login/login.vue')
}

3.在根組件app.vue配置路由容器

<template>
  <div id="app">
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

4.login.vue復制vant官網代碼

 <!-- 1. nav-bar -->
    <van-nav-bar
      title="黑馬頭條"
    />
    <!-- 2. 表單登錄 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model.trim="username"  //將username根據后臺介面更改為user.mobile
        name="用戶名"  //用戶名修改為手機號
        label="用戶名"  //用戶名修改為手機號
        placeholder="用戶名"  //用戶名修改為手機號
      />
       <van-field
        v-model.trim="password"  //=>user.code  .trim非空
        type="password"  //=>text
        name="密碼"  //=>驗證碼
        label="密碼"  //=>驗證碼
        placeholder="密碼" //=>驗證碼
      />
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <script>
   export default {
    name: 'login',
    data () {
     return {
      user:{
       moible:'',
       code:''
       }
     }
   },
    methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>

5.樣式 創建

// 全域樣式styles/index.less
.van-nav-bar{
  background-color: #3196fa;
  .van-nav-bar__title {
    color:#fff;
  }
}

//在 main.js中引入

import '@/styles/index.less'

//區域樣式views/login/login.vue

<style lang="less" scoped>
  // 按鈕
  .btn-wrap { //注意更改類名
    padding:20px;
    .van-button{
      width: 100%;
      background-color: #6db4fd;
      color:#fff;
    }
  }
</style>

6.表單驗證

    <van-form @submit="onSubmit" @failed="onFailed"> <!-- @failed="onFailed"  vant里面的 -->
      <van-field
        v-model.trim="user.mobile"
        name="手機號"
        label="手機號"
        placeholder="手機號"
        :rules="[
          { required: true, pattern: /^1\d{10}$/, message: '手機號格式錯誤' },  <!-- 正則校驗 -->
        ]"
      />
      <van-field
        v-model.trim="user.code"
        type="text"
        name="驗證碼"
        label="驗證碼"
        placeholder="驗證碼"
        :rules="[{ required: true, pattern: /^\d{6}$/, message: '驗證碼錯誤' }]"
      />
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>

驗證方法

 methods: {
    onSubmit () {
      console.log('驗證成功')
      this.doLogin()
    },
    onFailed () {
      console.log('驗證失敗')
    },

7.登錄-發ajax請求做登錄

新建api/user.js

import request from '../utils/request'
export const login = (user) => {
  return request({
    url: '/v1_0/authorizations',
    method: 'POST',
    data: user
  })
}

在login.vue中呼叫

import { login } from '../../api/user'

發送ajax請求

 async doLogin () {
      try {
        const res = await login()
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    }

8.Toast加載驗證提示-vant引入

注意！！！！！！vant 按需匯入后不能再全域引入

async doLogin () {
      this.$toast({
        duration: 0, // 持續展示 toast,永遠不會關閉
        overlay: true, // 整體添加一個遮罩
        message: '加載中...'
      })
      // 做具體的ajax提交動作
      try {
        const res = await login(this.user)
        console.log(res)
        this.$toast.success('登錄成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('登錄失敗')
      }
    }

9.把token傳到vuex.state中

  state: {
    tokenInfo: {}  //定義一個空的陣列裝token
  },
  mutations: {
    setTokenInfo (state, newTokenInfo) {  //定義setTokenInfo修改設定token
      state.tokenInfo = newTokenInfo
    }
  },

封裝ajax到actions

 actions: {
    async userLogin (context, userInfo) {
      try {
        console.log(2)
        const res = await login(userInfo)
        console.log(3)
        // 登錄成功，保存token到本地
        console.log(res.data.data)
        context.commit('setTokenInfo', res.data.data)
      } catch (err) {
        console.log(err)
        throw new Error(err)   //如果不寫，這個try{}catch有錯誤則也會顯示登陸成功   因為err在這里捕獲了
      }
    }
  },

呼叫actions的方法

  async doLogin () {
      this.$toast({
        duration: 0, // 持續展示 toast,永遠不會關閉
        overlay: true, // 整體添加一個遮罩
        message: '加載中...'
      })
      console.log(1)
      // 做具體的ajax提交動作
      try {
        await this.$store.dispatch('userLogin', this.user)  //如果不寫await那沒有獲取到this.user的資料時就會顯示登陸成功正常的列印順序是1,2,3,4   沒有await則1,2,4,3  
        this.$toast.success('登錄成功')
        console.log(4)
      } catch (err) {
        console.log(err)
        this.$toast.fail('登錄失敗')
      }
    }

10.axios的請求攔截器

在request.js里
// 請求攔截器

instance.interceptors.request.use(function (config) {
  console.log('config', config)
  return config
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error)
})