vue GET和POST请求

vue GET和POST请求

GET请求

下面的例子我们在页面上的按钮绑定了一个click事件，点击以后，就会通过axios使用GET请求去获取服务端的数据，然后将获取到的数据回显到页面上。

前端：

<div>
      <a-button @click="TestAxios">测试axios</a-button>
      <h2><b>code</b>:{{code}}</h2>
      <h2><b>msg</b>:{{msg}}</h2>
</div>
<script>
import ant from 'ant-design-vue/dist/antd'
export default {
  name: 'App',
  data() {
      return {
        code: "",
        msg: ""
      }
  },
  components: {
    [ant.name]:ant
  },
  methods: {
      TestAxios() {
          this.$axios.get("/api_axios").then((res) => {
              this.code = res.data.code
              this.msg = res.data.msg
          }).catch(function(res) {
              console.log(res.data);
          })
      }
  },
}
</script>

后端：

func axiosTest(c *gin.Context) {
	c.JSON(http.StatusOK, gin.H{
		"code" : "200",
		"msg" : "The test of axios is successful!",
	})
}

POST请求

下面的代码有点繁杂，可以只看注释为核心代码的部分，点击登录按钮，就会通过axios以POST的方式提交表单中的数据，注意这里的数据是以json的形式提交的，因此会有一个跨域请求的问题，如果我们对数据做一个封装，是不会有这个问题的。那怎么去解决呢？我们需要下载一个包：

npm install qs --save

然后使用qs.stringify()将下面的json格式的数据包裹起来，qs.stringify函数会对数据做一个封装。然后数据就可以成功被提交到服务端了。
如果需要回显数据，直接使用上面GET请求的方式就可以了。

<template>
    <div id="postform">
        <a-form
    :model="formState"
    name="normal_login"
    class="login-form"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >

	<!-- 核心代码 -->
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.username">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
      label="Password"
      name="password"
      :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="formState.password">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>
	
	<!-- 核心代码 -->
    <a-form-item>
      <a-button type="primary" html-type="submit" class="login-form-button" @click="onSubmit">
        Log in
      </a-button>
    </a-form-item>
  </a-form>
    </div>
  
</template>
<script>
import { defineComponent, reactive, computed } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
// 导入qs包
import qs from 'qs';
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },

  // 核心代码
  methods: {
      onSubmit() {
        console.log("submit!", this.formState);
            // 使用qs解决post跨域请求的问题
            this.$axios.post("/userForm", qs.stringify({
                username:this.formState.username,
                password:this.formState.password
            })).then((result) => {
                console.log(result);
            }).catch((err) => {
                console.log(err);
                
            });
      }
  },

  setup() {
    const formState = reactive({
      username: '',
      password: '',
      remember: true,
    });

    const onFinish = values => {
      console.log('Success:', values);
    };

    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };

    const disabled = computed(() => {
      return !(formState.username && formState.password);
    });
    return {
      formState,
      onFinish,
      onFinishFailed,
      disabled,
    };
  },

});
</script>
<style>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#components-form-demo-normal-login .login-form-forgot {
  margin-bottom: 24px;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>

<style scoped>
    #postform {
        margin-left: 120px;
        margin-top: 40px;
    }
</style>

后端：

func PostForm(c *gin.Context) {
	username := c.PostForm("username")
	password := c.PostForm("password")
	fmt.Println("username：" + username)
	fmt.Println("pwd：" + password)

	c.JSON(http.StatusOK, gin.H{
		"message" : "ok",
		"username" : username,
		"password" : password,
	})
}