vue如何使用axios查询上传数据是否存在数据库表中

mini74

于 2020-04-16 15:42:12 发布

阅读量857

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/mini74/article/details/105558860

本文介绍如何在Vue项目中使用Axios进行HTTP请求配置，并实现登录功能。通过在main.js中引入并配置Axios，使其成为Vue实例的一个全局属性。登录功能通过验证表单数据后，调用Axios的post方法发送登录请求，根据响应判断登录是否成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要在main.js中配置

// 引入axios
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 挂载到vue的原型对象上
Vue.prototype.$http = axios

点击获取到传过去的值之后，匹配数据库中是否含有这个数据，不含有则返回登录失败

login () {
      // 发送请求
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {
          return false
        } else {
          const { data: res } = await this.$http.post('login', this.loginForm)
          if (res.meta.status !== 200) {
            return console.log('登录失败')
          } else {
            return console.log('登录成功')
          }
        }
      })
    }