get请求和post请求

置顶打怪升级&

已于 2024-03-20 11:24:08 修改

阅读量174

点赞数 1

分类专栏：学习vue（WebStorm）文章标签： ajax vue.js javascript

于 2021-10-13 17:27:33 首次发布

本文链接：https://blog.csdn.net/qq_53298230/article/details/120746813

版权

学习vue（WebStorm）专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中利用Ajax库进行GET和POST请求，以实现简单的登录和注册功能。通过v-model绑定输入框数据，点击按钮触发方法。GET请求用于登录，POST请求用于注册，使用qs库序列化参数并发送到后端接口，然后接收并打印后端返回的数据。

摘要由CSDN通过智能技术生成

vue 中引用Ajax------get请求和post请求

纲要：完成简单页面的登录和注册功能，向后端传参和接受后端传来的参数。
前提：有一个后端接口，后端传参数据已知。
安装并配置完成了Ajax和qs。
安装和配置教程
前端vue页面：

//最外层的：model 与输入框中的 v-model有相对应的from
//@click是点击所触发的方法
<div :model="from" ref="form">
    <h1>欢迎登陆</h1>
    用户名：<input type="text" v-model="from.username"></input>
    密码： <input type="text" v-model="from.password"></input>
    <button @click="ss">登录</button>
    <button @click="cc">注册</button>
  </div>

前端 .js页面：

//data 返回的数据是输入框中数据
  data() {
    return{
      from:{
        username: '',
        password: ''
      }
    }
  },
  methods:{
//里面放置点击所触发的方法
//get请求和post请求
}

//this.$axios建立接口
//get请求
//url:接口网址
//params:{} 进行传参
//res.data接受后端返回来的数据
// console.log(res.data); 打印后端返回来的数据

    ss()
      {
        this.$axios
          .get("后端登录接口网址",
            {
              params: {
                password: this.from.password,
                username: this.from.username,
              }
            })
          .then((res) => {
            console.log(res.data);
          });
      }

//this.$axios建立接口
//post请求
//url:接口网址
//通过 qs 来序列化前端的参数,之后在向后端传参

//params:{} 进行传参
//res.data接受后端返回来的数据
// console.log(res.data); 打印后端返回来的数据

cc () {
      this.$axios
        .post("后端注册接口网址",
          this.$qs.stringify({
            username: this.from.username,
            password: this.from.password
          })
        )
        .then((res) => {
          console.log(res.data);
        });
    }