spingwab框架中使用axiso的Get方法获取java后端的数据

因为要使用JSON所以我们要加入两个依赖

        <dependency>
            <groupId>com.alibaba.fastjson2</groupId>
            <artifactId>fastjson2</artifactId>
            <version>2.0.0</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>

先创建获取数据的方法，并将他注解为emp-list

@RequestMapping ("/emp-list")
    public UserNum doget()  {
        UserNum userNum=new UserNum();
        JsonParser jsonParser=new JsonParser();
        List<User>list;
        List<User>list1=new ArrayList<>();
        try {
            list=jsonParser.getList("emp.json",User.class);
            int j=0;
            for(User user:list){
                if(user.getGender().equals("1")){
                    user.setGender("男");
                }else{
                    user.setGender("女");
                }
                list1.add(user);
            }
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        userNum.setData(list1);
        userNum.setCode(1);
        return userNum;
    }

import com.alibaba.fastjson2.JSON;
import org.apache.commons.io.FileUtils;
import org.springframework.util.ResourceUtils;
import java.io.File;
import java.io.IOException;
import java.util.List;

public class JsonParser {
    public static <User> List<User> getList(String fileName, Class<User> targetClass) throws IOException {

        File file = ResourceUtils.getFile("classpath:" + fileName);
        String json = FileUtils.readFileToString(file, "utf-8");
        return JSON.parseArray(json, targetClass);
    }
}

在创建的方法中使用了两个自己创建的类分别用来接受数据和发送数据

                接受数据类

package com.example.demo.entity;

public class User {
   private String name;
   private String age;
   private String gender;
   private String job;
   private String scope;

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", age='" + age + '\'' +
                ", gender='" + gender + '\'' +
                ", job='" + job + '\'' +
                ", image='" + scope + '\'' +
                '}';
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getJob() {
        return job;
    }

    public void setJob(String job) {
        this.job = job;
    }

    public String getImage() {
        return scope;
    }

    public void setImage(String image) {
        this.scope = image;
    }
}

                发送数据类型

package com.example.demo.entity;

public class UserNum {
    private int code;
    private Object data;

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    @Override
    public String toString() {
        return "UserNum{" +
                "code=" + code +
                ", data=" + data +
                '}';
    }
}

html中的数据接受

new Vue({
        el: "#app",
        data() {
            return {
                tableData: []
            }
        },
        mounted(){
            axios.get('/emp-list').then(res=>{
                if(res.data.code){
                    this.tableData = res.data.data;
                }
            });
        }
    });

中的res.data.code用来判断是否接受到数据