接口的开发：

根据片区名模糊查询

• 其中设计到单张表（Tbarea表）

• 我在后台管理的中有一个功能是查询功能，这里就涉及到这个模糊的查询，填写的参数只有一个

• Controller

  • /**
     * 根据区域名模糊查询
     * @param areaName
     * @return
     */
    @GetMapping("/likeselect")
    public AjaxResult likeSelect(String areaName){
        List<TbArea> list = tbAreaService.likeSelec(areaName);
        int size = list.size();
        List list1 = new ArrayList();
        if (size!=0){
            return AjaxResult.success("操作成功",list,size);
        }else {
            return AjaxResult.success("操作失败",list1,size);
        }
    ​
    }

• ITbareaService

  • /**
     * 模糊查询
     * @param areaName
     * @return
     */
    public List<TbArea> likeSelec(String areaName);

• TbareaServiceImpl

  • /**
     * 根据区域名模糊查询
     * @param areaName
     * @return
     */
    @Override
    public List<TbArea> likeSelec(String areaName) {
        LambdaQueryWrapper<TbArea> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.like(StringUtils.isNotBlank(areaName),TbArea::getAreaName,areaName);
        List<TbArea> list = iTbAreaService.list(lambdaQueryWrapper);
        return list;
    }

问题及解决

前端会出现的一个bug

解析：这个bug不是重点，应该是在反馈数据的时候。我们在页面中能显示上面的菜单栏，但是一直在转圈加载不出来。其实在若依的后台要反馈列表的数据的时候要将总数也要反馈出来，不然会报错。

学习重点及理解

片区管理的开发

新增接口调用

• js中我们要修改的是路径，参数改为params，还有下面的params

• Vue中当传入的值id为空就是调用新增的功能，将其数据添加进去addArea({areaName: this.form.areaName});

• area.js

  • // 新增片区
    export function addArea(params) {
      return request({
        url: '/system/area/add',
        method: 'post',
        params
      })
    }

• area.index.vue

  • /** 新增按钮操作 */
       handleAdd() {
         this.reset();
         this.open = true;
         this.title = "添加片区";
       },
      
    /** 提交按钮 */
       submitForm() {
         this.$refs["form"].validate(valid => {
            //当areaId为空的时候就是新增的功能
             if(this.form.areaId==null){
               addArea({areaName: this.form.areaName});
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               setTimeout(() => {this.getList();}, 500);
             }else{
               updateArea({areaName: this.form.areaName,areaId: this.form.areaId});
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               
               setTimeout(() => {this.getList();}, 500);
             }
           
            
         });
       },

     

修改接口调用

• js中我们要修改的是路径，参数改为params，还有下面的params

• Vue中分为两个步骤一个是数据的回显，一个是修改接口的调用，在修改按钮中的那些参数就是要一个一个添加进去，这个步骤就是数据的回显；提交按钮中，就是当id有值就是修改的功能，调用接口,输入其参数({areaName: this.form.areaName,areaId: this.form.areaId});

• area.js

  • // 修改片区
    export function updateArea(params) {
      return request({
        url: '/system/area/update',
        method: 'put',
        params
      })
    }

• area.index.vue

  • /** 修改按钮操作 */
       handleUpdate(row) {
         this.reset();
         const areaId = row.areaId || this.ids
         const areaName = row.areaName || this.ids
      
         // getArea(areaId).then(response => {
           this.form.areaId = areaId;
           this.form.areaName = areaName;
           this.open = true;
           this.title = "修改片区";
         // });
       },
       /** 提交按钮 */
       submitForm() {
         this.$refs["form"].validate(valid => {
      
             if(this.form.areaId==null){
               addArea({areaName: this.form.areaName});
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               setTimeout(() => {this.getList();}, 500);
             }else{
               updateArea({areaName: this.form.areaName,areaId: this.form.areaId});
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               
               setTimeout(() => {this.getList();}, 500);
             }
           
            
         });
       },

     

删除接口调用

• js中我们要修改的是路径，参数改为params，还有下面的params

• Vue中我们要将改为这样的格式 return delArea({areaId: areaIds});，即可实现效果

• area.js

  • // 删除【请填写功能名称】
    export function delArea(params) {
      return request({
        url: '/system/area/delect',
        method: 'delete',
        params
      })
    }

     

• area.index.vue

  • /** 删除按钮操作 */
        handleDelete(row) {
          const areaIds = row.areaId || this.ids;
          this.$modal.confirm('是否确认删除片区编号为"' + areaIds + '"的数据项？').then(function() {
            return delArea({areaId: areaIds});
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        },

     

模糊查询接口掉用

• js中我们要修改的是路径，参数改为params，还有下面的params

• vue中我们要改的是添加一个likeList的方法，将进行模糊查询的参数添加到里面likeList(areaName)，后面getArea这种方法要调用正确getArea({areaName: areaName})后面的{}中的参数我们要加载进去

• area.js

  • /
    ​
    ​
    ​
    / 查询片区模糊查询详细
    export function getArea(params) {
      return request({
        url: '/system/area/likeselect',
        method: 'get',
        params
      })
    }

• area.index.vue

  • likeList(areaName){
         this.loading = true;
         getArea({areaName: areaName}).then(response => {
           this.areaList = response.data.slice((this.queryParams.pageNum-1)*this.queryParams.pageSize,(this.queryParams.pageNum-1)*this.queryParams.pageSize+this.queryParams.pageSize);
           this.total = response.total;
           this.loading = false;
         });
       },
           
     /** 搜索按钮操作 */
       handleQuery() {
         this.queryParams.pageNum = 1;
         this.likeList(this.queryParams.areaName)
       },

     

扩展学习

AjaxResult的改动

我们在查询全部的时候，需要一个总数，方便后台管理的中一些的分页的功能。所有我将AjaxResult中的方法进行重写，增加了一个总数的参数。

public class AjaxResult extends HashMap<String, Object>
{
    private static final long serialVersionUID = 1L;
​
    /** 状态码 */
    public static final String CODE_TAG = "code";
​
    /** 返回内容 */
    public static final String MSG_TAG = "msg";
​
    /** 数据对象 */
    public static final String DATA_TAG = "data";
​
    /**总数*/
    public static final String TOTAL_TAG = "total";
​
    /**
     * 初始化一个新创建的 AjaxResult 对象，使其表示一个空消息。
     */
    public AjaxResult()
    {
    }
​
    /**
     * 初始化一个新创建的 AjaxResult 对象
     *
     * @param code 状态码
     * @param msg 返回内容
     */
    public AjaxResult(int code, String msg)
    {
        super.put(CODE_TAG, code);
        super.put(MSG_TAG, msg);
    }
​
    /**
     * 初始化一个新创建的 AjaxResult 对象
     *
     * @param code 状态码
     * @param msg 返回内容
     * @param data 数据对象
     */
    public AjaxResult(int code, String msg, Object data)
    {
        super.put(CODE_TAG, code);
        super.put(MSG_TAG, msg);
        if (StringUtils.isNotNull(data))
        {
            super.put(DATA_TAG, data);
        }
    }
​
    public AjaxResult(int code, String msg, Object data,int total)
    {
        super.put(CODE_TAG, code);
        super.put(MSG_TAG, msg);
​
        if (StringUtils.isNotNull(data))
        {
            super.put(DATA_TAG, data);
            super.put(TOTAL_TAG,total);
        }
    }
​
    /**
     * 返回成功消息
     *
     * @return 成功消息
     */
    public static AjaxResult success()
    {
        return AjaxResult.success("操作成功");
    }
​
    /**
     * 返回成功数据
     *
     * @return 成功消息
     */
    public static AjaxResult success(Object data)
    {
        return AjaxResult.success("操作成功", data);
    }
​
    /**
     * 返回成功消息
     *
     * @param msg 返回内容
     * @return 成功消息
     */
    public static AjaxResult success(String msg)
    {
        return AjaxResult.success(msg, null);
    }
​
    /**
     * 返回成功消息
     *
     * @param msg 返回内容
     * @param data 数据对象
     * @return 成功消息
     */
    public static AjaxResult success(String msg, Object data)
    {
        return new AjaxResult(HttpStatus.SUCCESS, msg, data);
    }
​
​
    public static AjaxResult success(String msg, Object data,int total)
    {
        return new AjaxResult(HttpStatus.SUCCESS, msg,data,total);
    }
​
    /**
     * 返回警告消息
     *
     * @param msg 返回内容
     * @return 警告消息
     */
    public static AjaxResult warn(String msg)
    {
        return AjaxResult.warn(msg, null);
    }
​
    /**
     * 返回警告消息
     *
     * @param msg 返回内容
     * @param data 数据对象
     * @return 警告消息
     */
    public static AjaxResult warn(String msg, Object data)
    {
        return new AjaxResult(HttpStatus.WARN, msg, data);
    }
​
​
    public static AjaxResult warn(String msg, Object data,int total)
    {
        return new AjaxResult(HttpStatus.WARN, msg,data,total);
    }
​
    /**
     * 返回错误消息
     *
     * @return 错误消息
     */
    public static AjaxResult error()
    {
        return AjaxResult.error("操作失败");
    }
​
    /**
     * 返回错误消息
     *
     * @param msg 返回内容
     * @return 错误消息
     */
    public static AjaxResult error(String msg)
    {
        return AjaxResult.error(msg, null);
    }
​
    /**
     * 返回错误消息
     *
     * @param msg 返回内容
     * @param data 数据对象
     * @return 错误消息
     */
    public static AjaxResult error(String msg, Object data)
    {
        return new AjaxResult(HttpStatus.ERROR, msg, data);
    }
​
​
​
    /**
     * 返回错误消息
     *
     * @param code 状态码
     * @param msg 返回内容
     * @return 错误消息
     */
    public static AjaxResult error(int code, String msg)
    {
        return new AjaxResult(code, msg, null);
    }
​
    /**
     * 方便链式调用
     *
     * @param key 键
     * @param value 值
     * @return 数据对象
     */
    @Override
    public AjaxResult put(String key, Object value)
    {
        super.put(key, value);
        return this;
    }
}

总结

今天的学习状态是非常的好，开始对片区管理这个页面，进行开发。出现比较多的问题，我询问叶其培，最后还是慢慢将增删改查的每个接口都调用成功了。少了一个模糊查询的接口，我直接自己开发接口，自己调用完成片区管理这块的内容。也解决了AjaxResult中数据重写。

本栏目推荐文章
• PasteSpider之接口的授权实现为什么不采用JWT方式
• Dating Java8系列之Lambda表达式和函数式接口（上）
• Dating Java8系列之Lambda表达式和函数式接口（下）
• 通过API接口操作vmware vcenter虚拟机
• TVBox等智能电视第三方APP可用直播源接口【截止24.01.12】
• 应用层限流——四种接口限流算法原理及实现
• 自动生成接口文档
• 常见的HTTP接口超时问题出现原因及解决办法
• 03.接口测试用例设计
• fatfs常用接口函数说明

片区 接口片区 软件 片区 第三方 机构 空间结构 片区 结构mysql 片区 接口 接口 接口api 接口gdb token接口 接口ssm tienchin接口