Java__SpringBoot与Vue连接

SpringBoot与Vue

注解RequestMapping("/dir/")

创建一个方便前端调用的接口目录/接口函数，前端可以获取到函数返回的数据

@RestController
@RequestMapping("/dir/")
public class BotInfoController {
    @RequestMapping("getinfo/")
    public Map<String,String> GetInfo(){
        Map<String ,String> res=new HashMap<>();
        res.put("name","liudas");
        res.put("score","3333");
        return res;
    }
}

前端Vue获取数据

利用Ajax获取数据，再将数据赋值给Vue变量，通过前端渲染处理。

import $ from 'jquery'
import {ref} from 'vue';
export default{
  name:"app",
  setup:()=>{
    let name=ref("");
    let score=ref("");
    $.ajax({
      url:"http://127.0.0.1:3000/dir/getinfo/",
      type:"get",
      success: resp=>{
        name.value=resp.name;
        score.value=resp.score;
      }
    });
    return {
      name,
      score
    }
  }
}