• springboot+vue的前后端联调实现


    1、springboot的后端接口:

    (1)post存储接口
    @AutoLog(value = "个人档案信息编辑")
    @ApiOperation(value = "个人档案信息编辑", notes = "个人档案信息编辑")
    @PostMapping(value = "/edit")
    public Result<UpdateInformation> edit(@RequestBody UpdateAll updateAll) {

    Result<UpdateInformation> result = new Result<UpdateInformation>();

    //before和now需要利用object的方式进行转换,因为不确定是哪个具体的类
    String before = JSONArray.toJSONString(updateAll.getBefore());
    String now = JSONArray.toJSONString(updateAll.getNow());
    //直接利用get的方式获得其他信息类
    UpdateOthers updateOthers=updateAll.getOthers();
    UpdateInformation updateInformation = new UpdateInformation();
    (2)get查询接口
    @AutoLog(value = "个人档案信息修改通过待办id查询")
    @ApiOperation(value = "个人档案信息修改通过待办id查询", notes = "个人档案信息修改通过待办id查询")
    @GetMapping(value = "/queryById")
    public Result<UpdateBoth> queryById(@RequestParam(name = "id", required = true) String id) {
    Result<UpdateBoth> result = new Result<UpdateBoth>();
    try{
    Map<String, Object> map = iUpdateInformationService.queryById(id);
    UpdateBoth updateBoth = JSON.parseObject(JSON.toJSONString(map), UpdateBoth.class);
    if (map == null) {
    result.error500("个人档案修改数据不存在,请重新确认!");
    } else {
    String updatetype = (String) map.get("C_UPDATE_OPERATE");

    2、vue前端接口函数调用定义
    1)post接口定义
    // 个人档案信息修改缓存接口(一般在api/manage.js中)
    export function JK1(url,parameter){
      return axios({
        url: url,
        method: "post",
        data: parameter      // 传参
      })
    }
    (2)get接口
    export function getUpdate(url,parameter) {
      return axios({
        url: url,
        method: 'get',
        params: parameter
      })
    }
    3、vue页面中前后端联通接口的方法调用
    (1)post接口
    //post方法的使用方法
    data:
    return(){
     url1:"update/add", 
     data1:{

    "before":{
    "country": "中国",
    "nation": "汉族",
    "csplace": "北京"
    },
    "now":{
    "country": "中国",
    "nation": "汉族",
    "csplace": "北京"
    },"others":
    {
    "cUpdateOperate": "2",
    "cUpdateType": "0",
    "cUpdateOperateId": "yanjiangyi"
    } }

    }
    methods:
          go200(){
            console.log(this.data1)
            // let S=JSON.stringify(this.data1)
            JK1(this.url1,this.data1).then((res) => {
              if (res.success) {
                this.compOptions = res.result
                console.log(res)
                Toast.success("加载成功")
              } else {
                Toast.fail("加载失败")
              }
            })
          }
    (2)get接口的调用
    //get 接口的使用方法
    data:
    return(){
     url2:"update/queryById",
    data2:"a3a1ba3d-8aa5-4748-98a5-e823baa9d9cf"    //主键id}
    methods:
          go100(){
              getUpdate(this.url2,{id:this.data2}).then((res) => {
              if (res.success) {
                this.json= res.result
                console.log(res.result)
                console.log(this.json.cupdateBefore)
                this.listbefore=res.result.cupdateBefore
                console.log(this.listbefore[0])
                for (var i=0; i<this.listbefore.length;i++){
                  console.log(this.listbefore[i])
                }                                // vue组件中列表的遍历输出

                Toast.success("加载成功")
              } else {
                Toast.fail("加载失败")
              }
            })
          }
  • 相关阅读:
    systemverilog中堵塞和非堵塞事件以及同步
    Win 10最大的亮点不是免费而是人工智能
    STL源代码学习(vector篇)
    【金阳光測试】大话Android自己主动化測试--Android自己主动化系列(1)--金阳光于2013年4月份
    [PHP]怎样在SAE的CodeIgniter项目中隐藏掉index.php
    ubuntu 非长期支持版升级系统版本号(ssh登录情况适用)
    #26 Remove Duplicates from Sorted Array
    怎样建设内网网站
    scrollView and tableView
    关于Kingfisher--备用
  • 原文地址:https://www.cnblogs.com/Yanjy-OnlyOne/p/15269160.html
Copyright © 2020-2023  润新知