vue中axios请求数据

zy8899 / 2024-09-20 / 原文

首先引入包：yarn add axios
再导入 import axios from 'axios'

<template>
  <div>
    <h1>登录页面</h1>
    <form>
      <label for="username">用户名:</label>
      <input type="text" id="username" placeholder="请输入用户名" v-model="formData.username">
      <br>
      <label for="password">密码:</label>
      <input type="password" id="password" placeholder="请输入密码" v-model="formData.password">
      <br>
      <button type="button" @click="login">登录</button>
    </form>
  </div>
</template>

<script>
import axiox from 'axios'

export default {
  data() {
    return {
      // 这里可以放置一些数据
      formData: {
        username: '',
        password: ''
      }

    }
  },
  methods: {
    // 这里可以放置一些方法
    login() {
      axiox.get('http://localhost:3000/users', {
        params: this.formData
      }).then(res => {

        if (this.formData.username === '' || this.formData.password === '') {
          alert('用户名或密码不能为空')
          return
        }
        console.log(res)
        if (res.data.length > 0) {
          this.$router.push({ name: 'home' })

        } else {

          alert('用户名或密码错误')
        }
      }).catch(err => {
        console.log(err)
      })
    },
  }


}
</script>

<style></style>