get请求和post请求

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);
        });
    }