vue项目1-pizza点餐系统10-axios实现登陆

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、登陆思路

从数据库中拿到数据，每个用户信息都是一个对象，需要用数组存储对象信息，然后对比输入的用户信息，如果匹配成功就跳转到home主页，否则提示用户或密码错误。

二、具体操作

1、导入axios

import axios from 'axios'

2、请求数据库数据

onSubmit(){
             //console.log('111');
             //请求数据
             axios.get('/users.json')
                .then(res =>{
                   // console.log(res.data)
                   //定义一个数组,遍历data
                   const data = res.data//data里面是还有key的数组
                   const users =[]
                   for(let key in data){
                       const user = data[key]
                       //console.log(user)
                       users.push(user)//将user push到数组中
                   }
                   //实现过滤,filter中有个迭代器,可拿到users数组中的每个user元素,若邮箱密码都一致就返回匹配的对象数组result
                   let result = users.filter((user) =>{
                       return user.email === this.email && user.password === this.password
                   })
                    //console.log(result)
                    //判断数组的长度,若大于0就匹配成功即登陆成功
                    if(result !=null && result.length >0){
                        this.$router.push({name:"homeLink"})
                    }else{
                        alert("账号或密码错误")
                    }
                })
         }

以上是 vue项目1-pizza点餐系统10-axios实现登陆 的全部内容， 来源链接： utcz.com/z/377518.html

回到顶部