zoukankan      html  css  js  c++  java
  • 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("加载失败")
              }
            })
          }
  • 相关阅读:
    从量子加密到机器学习,盘点2015阿里云开放的黑科技
    架构设计:系统存储(24)——数据一致性与Paxos算法(中)
    深入理解Git (一) - 元数据
    IOS Using UIAlertView to show alerts
    gdal hdfs接口数据读取
    /usr/lib64/python2.6/site-packages/pycurl.so: undefined symbol: CRYPTO_set_locking_callback
    linux jexus mono 发布.net webservices web页面
    docker中使用systemd
    基于Open vSwitch搭建虚拟路由器
    Openstack Neutron DVR workflow
  • 原文地址:https://www.cnblogs.com/Yanjy-OnlyOne/p/15269160.html
Copyright © 2011-2022 走看看