vue 基础知识--后台交互,实现接口调用

作者在 2022-03-09 14:55:23 发布以下内容

需要调用接口时,在组件中引入

import axios from "axios";
然后在函数中
axios.create({
                
                baseURL:  'http://localhost:9000',
                timeout: 3000000,
                responseType: "json",
                // headers: {
                //   "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
                // },
                withCredentials: true
              }).post("/testdemo/testMethod",this.ruleForm).then(function (response) {
                
                console.log("响应结果:"+JSON.stringify(response));
              }).catch(function (error) {
                console.log("调用接口报错:"+error);
              });
我的测试接口为
package com.cn.test.web;

import com.alibaba.fastjson.JSONObject;
import com.cn.wisdom.common.Result;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/testdemo")
class Test1Controller {

    @RequestMapping("/testMethod")
    public Result testMethod(@RequestBody JSONObject params){
        System.out.println(params);

        Result outcome = new Result();
        outcome.setCode(0);
        Integer.parseInt("a");
        return outcome;
    }
}
说明: this.ruleForm 内容可以参考前面写的“vue 基础知识--获取表单数据并且向列表追加数据



vue | 阅读 722 次
文章评论,共0条
游客请输入验证码