VUE之axios使用,跨域问题,拦截器添加Token

参考资料:

参考视频

视频资料及个人demo

Axios中文文档

VUE之基本部署及VScode常用插件

VUE之基本组成和使用

VUE之Bootstrap和Element-UI的使用


准备工作:

  • 关于SpringBoot和SpringCloud的搭建,以及mybatis-plus的整合见本人之前的CSDN博客,下面编写get请求和post请求
  • 编写Controller如下:
package com.example.springbootjwtback.UserController;

import com.example.springbootjwtback.entity.ResponseResult;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

/**
 * @program: springboot-jwt-back
 * @description:
 * @author: wjl
 * @create: 2023-07-24 00:10
 **/
@Controller
@Slf4j
@ResponseBody
public class TestController {

    @GetMapping("testGet/{name}")
    public ResponseResult testGet(@PathVariable("name") String name){
        log.info(name);
        GetEntity entity = new GetEntity("后端返回name", "后端返回age");
        return new ResponseResult(ResponseResult.OK,entity);
    }

    @PostMapping("testPost")
    public ResponseResult testPost(@RequestBody PostEntity entity){
        log.info(entity.toString());
        List list = new ArrayList<>();
        list.add(new PostEntity("2021-02-03","peter","山西省"));
        list.add(new PostEntity("2021-02-04","alise","河北省"));
        list.add(new PostEntity("2021-02-05","lisa","北京市"));
        return new ResponseResult(ResponseResult.OK,list);
    }
}

@Data
@NoArgsConstructor
@AllArgsConstructor
class GetEntity{
    private String name;
    private String age;
}

@Data
@NoArgsCon

你可能感兴趣的:(vue.js,前端,javascript)