vue前端使用axios二次封装传输复杂对象(对象内含有其他类对象)到后端springboot框架接收

本文链接：https://blog.csdn.net/qq_42107431/article/details/125513002

vue前端使用axios二次封装传输复杂对象(对象内含有其他类对象)到后端springboot框架接收

axios二次封装

import axios from "axios";
// 引入进度条
// import nprogress from "nprogress";
// // start方法是进度条开始，done方法是结束
// // 引入进度条的样式
// import "nprogress/nprogress.css"

// 1. 利用axios对象的方法create，去创建一个axios实例
// 2. request就是axios，只不过稍微配置一下
const requests = axios.create({
    // 配置对象
    baseURL:"/api",// 基础路径
    timeout:5000,// 请求超时时间为5s
});

// 请求拦截器，在发请求之前，可以在请求之前做一些事情
requests.interceptors.request.use((config)=>{
    return config;
});

// 响应拦截器
requests.interceptors.response.use((res)=>{
    return res.data;
},(error)=>{
    // 相应失败的回调函数
    return Promise.reject(new Error('faile'));
}
)

export default requests;

前端使用post方法发送对象

const saveDataCard = (dataCard) => {
    console.log("上传", JSON.stringify(dataCard));
    return requests({
        url:"/dataCard/saveDataCard",
        contentType:'application/json;charset=UTF-8',
        method:"post",
        dataType:"json",
        data:{
            dataCard:JSON.stringify(dataCard)
        }
})

对象内容

{"car_number":1,"idb":1,"ide":1,"idc":1,"idd":1,"b_id":1,"idf":1,"yb_id":1,"region":"渝中区","name_of_the_bridgea":"重庆大桥","the_road_of":"洪崖洞路","across":3000.56,"level":2,"review_and_approval5":"qin","review14":"qin","tab5":"qin","the_date_of":"2022-06-13 00:00:00","accessoryWorks":{"idc":1,"car_number":1,"size_of_catchment":"20.0*30.56","number_catchments":"50","drain_pipe_size":"20.5*30.66","drain_pipe_length":200.3,"rail_length":30.66,"rail_structure":"栏杆结构","column_size":"52.3*42.6","revetment_type":"护岸类型","type_slope_retaining_wall":"引坡挡墙类型"},"theUpperStructure":{"idb":1,"car_number":1,"main_girder_form":"主梁形式","main_beam_size":"主梁尺寸","number_of_main_girder":"主梁数量","clearance_under_the_main_span":100.11,"under_the_limit_high":3.23,"span_ratio_of_arch_bridge":"1.2","bearing_type":"支座型示","bearing_number":"6","bridge_deck_structure":"桥面结构","thickness_bridge_deck_pavement":"桥面铺装厚度","expansion_joint_type":"伸缩缝型式","number_secondary_shrinkage_joints":"伸缩缝数量","main_longitudinal_slope":1.23,"main_transverse_slope":1.65,"approach_longitudinal_slope":1.333,"approach_span_cross_slope":1.87,"beam_form":"横梁形式"},"theGeneralInformation":{"yb_id":1,"car_number":1,"management_unit":"管理单位","maintenance_of_the_unit5":"养护单位","the_construction_unit":"建设单位","design_units":"设计单位","supervision_unit":"施工单位","construction_unit":"监理单位","built_in_years":"2022-06-22 01:21:00","the_total_cost":60000.52,"maintenance_categories":"养护类别","maintenance_level":2,"highway_grade":2,"structure_type5":"结构类型","design_load":56.5,"limit_load_standard":45.6,"the_seismic_intensity":"抗震烈度","positive_skew_angle":"正斜交角","bridge_across_number_of":5,"combination_models":1.3,"the_deck_area":6543.231,"the_bridge_length5":3215.12,"bridge_overall_width":213.21,"the_driveway_wide":3.5,"sidewalk_clearance":2,"river_levels":2,"the_highest_water_level":12.54,"often_the_water_level":2.3},"subStructuralPiers":{"idd":1,"car_number":1,"number_bridge_piers":3,"piers_elevation":3.3,"capping_beam_size":"盖梁尺寸","capping_bm_size":3.8,"plate_size5":"地板尺寸","pile_size5":"基桩尺寸","number_of_pile":8},"subStructureAbutment":{"ide":1,"car_number":1,"number_of_abutment":5,"the_abutment_elevation":3.6,"the_basal_level":3.99,"a_cap_size":6.5,"plate_size5":"地板尺寸","pile_size5":"基桩尺寸","the_number_pile":9,"thickness_retaining_board":12.6,"wing_wall_form":"翼墙形式","length_wing_wall":9.8},"suspendedPipeline":{"idf":1,"car_number":1,"feed_pipe":"给水管","gas_pipe":"燃气管","power_cable":"电力缆","communication_cable":"通信电缆"}}

后端接收springboot接口

@PostMapping("/saveDataCard")
public R saveDataCard(@RequestBody JSONObject data){
    String jsonString = JSONObject.toJSONString(data.getJSONObject("dataCard"));
    DataCard dataCard = JSONObject.parseObject(jsonString, DataCard.class);
    return R.ok();
}