• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vuex项目—移动web应用页面构建功能实现

互联网 diligentman 4小时前 2次浏览

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: /^1d{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)
})


程序员灯塔
转载请注明原文链接:vuex项目—移动web应用页面构建功能实现
喜欢 (0)