首页 > 其他分享 >vue中axios请求数据

vue中axios请求数据

时间:2024-09-19 20:52:18浏览次数:9  
标签:用户名 console 请求 err vue res formData axios

首先引入包: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>

标签:用户名,console,请求,err,vue,res,formData,axios
From: https://www.cnblogs.com/zy8899/p/18421310

相关文章

  • Springboot基于springbootvue图书馆选座系统设计与实现41bpt--程序+源码+数据库+调试
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容随着高校图书馆的规模不断扩大和学生数量的增加,图书馆座位管理成为了一个亟待解决的问题。为了提升座位利用率,优化学生的学习环境,本项目拟设计并实......
  • java识别是不是ajax请求
    在JavaWeb应用中,识别是否是一个AJAX请求通常可以通过检查HTTP请求头中的X-Requested-With头字段来实现。如果该字段的值为XMLHttpRequest,则可以认为这是一个AJAX请求。示例代码以下是一个示例,展示了如何在SpringMVC控制器中识别AJAX请求:1.SpringMVC控制器importorg.spring......
  • 基于SpringBoot+Vue+MySQL的智能物流管理系统
    系统展示系统背景  随着信息技术的飞速发展和电子商务的蓬勃兴起,智能物流管理系统的需求日益迫切。传统的物流管理方式已难以满足高效、精准、实时的管理需求。因此,基于SpringBoot、Vue和MySQL的智能物流管理系统应运而生。该系统旨在通过现代化的技术手段,实现物......
  • 【vue3】vue3.5
    vue3.5是9.1发布的,还挺热乎的,赶快学习起来!!!组件属性结构解析赋值组件属性结构解析赋值,高度提高开发体验,这个特性曾经在vue3.3提出过,然后3.4废弃,终于3.5稳定了。下面一起来看看怎么用的吧。<scriptsetuplang="ts">import{watch}from'vue';//自定义属性......
  • 基于SpringBoot+Vue的医疗服务管理系统+原生微信小程序+LW示例参考
    系列文章目录1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例4.基于SSM的高校实验室管理系统+LW参考示例5.基于SpringBoot的二手数码回收系统+原生微信小......
  • vue项目记录每个页面保持滚动条的位置
    路由元信息增加keepAlive:true,scrollTop:{top:0},{path:'/**/**',name:'**',component:()=>import('@/views/**/index.vue'),meta:{title:'**',affix:fals......
  • 基于django+vue古诗词鉴赏网站【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在中华文化的浩瀚星空中,古诗词犹如璀璨星辰,穿越时空的长河,照亮了无数文人墨客的心灵世界,也承载着中华民族深厚的文化底蕴与情感寄托。然而......
  • 基于django+vue购药管理系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着医疗行业的快速发展和人们对健康意识的不断提升,药品的需求量急剧增加,购药管理成为医疗机构及零售药店运营中不可或缺的一环。传统的手......
  • 基于django+vue购物网【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和电子商务的日益普及,网络购物已成为人们日常生活中不可或缺的一部分。购物网站作为电子商务的核心平台,不仅极大......
  • Go语言grequests库并发请求的实战案例
    在当今快速发展的互联网时代,数据的获取和处理速度成为了衡量一个系统性能的重要标准。Go语言以其并发处理能力而闻名,而grequests库则为Go语言的HTTP请求提供了简洁易用的API。本文将通过一个实战案例,介绍如何使用Go语言的grequests库来实现高效的并发HTTP请求。1.引言在......