vue项目中引出的问题【一】

最新推荐文章于 2024-04-12 10:33:52 发布

原创最新推荐文章于 2024-04-12 10:33:52 发布

· 873 阅读

3 ·

版权

文章标签：

#vue

vue 专栏收录该内容

9 篇文章

订阅专栏

表单验证

给el-form 添加属性:rules='formLoginRules',formLoginRules则是验证规则

在data中定义formLoginRules的规则

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      // 定义验证规则列表
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
        ]
      }
    };
  }
};

通过prop属性设置验证规则

<el-form-item label="活动名称" prop="username">

以上验证只是给用户更好的交互体验，实则用户点击按钮后仍可以登录。所以我们应对定义的规则进行验证，通过则执行后面的请求，不通过则不请求

methods: {
    submitForm (form) {
      this.$refs.form.validate(valide => {
        console.log(valide)
        if (valide) {
          console.log('发送 ajax 请求')
        } else {
          console.log('不发送')
        }
      })
    }
  }

安装axios

npm i axios

在入口文件中使用挂载到Vue原型上的方法，方便所有组件使用

import axios from 'axios'
Vue.prototype.$http = axios

配置请求路径

因为请求的接口很多，但接口准基是一样的，所以我们可以设置一下根路径

接口准基

http://127.0.0.1:8888/api/private/v1/

配置

axios.defaults.baseURL = http://127.0.0.1:8888/api/private/v1/

请求接口

submitForm(form){
    this.$refs.form.validate(valid=>{
    if(valid===false){
        console.log('验证失败')
		return false
    }
	thia.$http.post('login',this.loginForm).then(res=>{
       const {status,msg} = res.data.meta
       if(status===400){
           console.log(msg)
           return false
       }
        const {data:{token}} = res.data
        localStorage.setItem('token',token)
    })

})
}

异步改造

submitForm(){
    try{
        await this.$refs.form.validate()
        var res = await this.$http.post('login',this.loginForm)
        var {status,msg} = res.data.meta
        if(status===400){
            console.log(msg)
            return false
        }
        console.log(msg)
        var {data:{token}} = res.data
        localStorage.setItem('token',token)
    }catch(err){
        console.log(err)
    }
}

async

async是ES7才有的与异步操作有关的关键字

返回值

async返回的是一个promise对象

async function f1(){
    return 'hello world'
}
console.log(f1())
//输出 Promise {<fulfilled>: "hello world"}

可以使用.then方法

f1().then(res=>{
	console.log(res)
})

await

await操作符用于等待一个promise对象，它只能在异步函数async异步函数中使用

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
  console.log(1)
  console.log(2)
}
helloAsync ();
// hello world 1 2

Promise对象：await会暂停执行，等待Promise对象resolve，然后恢复async函数的执行并返回解析值
非Promise：直接返回对应的值

成功跳转

this.$router.push('home')

点击退出时要清除token

localStorage.clear()
this.$router.push('/login')

提示弹框

使用element-ui中的this.$message显示提示弹框

    async submitForm (form) {
      try {
        await this.$refs.form.validate()
        var res = await this.$http.post('/login', this.loginForm)
        var { status, msg } = res.data.meta
        if (status === 400) {
           //简写方式
          this.$message.error(msg)
          return false
        }
        this.$message({
          message: msg,//提示消息
          type: 'success',//弹框类型
          duration: 2000,//显示时间
            //弹窗关闭后执行的回调函数，此处要使用箭头函数让this指向Vue实例
          onClose: () => {
            localStorage.setItem('login', res.data.data.token)
            this.$router.push('/home')
          }
        })
      } catch (err) {
        this.$message.error('验证失败')
      }
    }

路由守卫

因为在访问所有页面时都需要处于登录状态，也就是说必须存在token值。所以我们使用vue-router中的路由守卫来进行验证

.beforeEach()中有三个参数

to：到哪去
from：从哪来
next()：要干嘛

router.beforeEach((to, from, next) => {
    //首先访问登陆页面
    if(to.path === '/login') {
        return next()
    }
    //判断是否有token值
    var token = localStorage.getItem('token')
    //没有则返回登陆页面
    if (!token) {
        return next('/login')
    }
    //有token则跳转页面
    next()
})

按需引入

这里以element-ui为例，如果不使用按需引入的话，文件打包成生产版本时会把所有组件全部存放进去，导致文件体积变大，所以我们就需要按需引入组件了

安装插件

npm install babel-plugin-component -D

修改 bable.config.js

module.exports = {
  presets: [
   	..........
  ],
   //添加代码
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

修改mian.js,合并按需引入的element-ui

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
// 进行全局挂载：
Vue.prototype.$message = Message