（十一）完成导航管理及统一异常处理

说明

导航管理这里也没有任何业务逻辑，所以我们用代码生成器生成一下然后展示稍微做个修改就可以啦，完成导航管理后我们就可以管理后台的功能就先告一段落，后面几节课就主要做前台的开发

新增编辑文章标题处理

我突然发现我们编辑文章及新增文章时标题都是新增文章，这里我们处理一下，直接让后端返回页面标题

• 当页面为新增时返回新增文章
• 当页面为编辑页面时返回编辑+文章标题

导航实体及数据库

• 实体类名：Navigation
• 数据库名：blog_navigation

导航管理

• 生成代码

  name----名称
  icon----图标
  link----跳转链接
  ordered---顺序
  linkMode----跳转方式
  enable----是否启用

• 修改表单样式

  <div class="modal fade" id="save-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form id="data-form">
          <input type="hidden" name="id">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                                                                              aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="window-title">Modal title</h4>
          </div>
          <div class="modal-body">
  
            <div class="form-group">
              <label>名称</label>
              <input type="text" name="name" required class="form-control" placeholder="请输入名称...">
            </div>
  
            <div class="form-group">
              <label>图标</label>
              <input type="text" name="icon" class="form-control" placeholder="请输入图标...">
            </div>
  
            <div class="form-group">
              <label>跳转链接</label>
              <input type="url" name="link" required class="form-control" placeholder="请输入跳转链接...">
            </div>
  
            <div class="form-group">
              <label>顺序</label>
              <input type="number" name="ordered" required class="form-control" placeholder="请输入顺序...">
            </div>
  
            <div class="form-group">
              <label>打开方式</label>
              <select required name="linkMode" class="form-control">
                <option value="true">在新页面打开</option>
                <option value="false">在当前页打开</option>
              </select>
            </div>
  
            <div class="form-group">
              <label>是否启用</label>
              <select required name="enable" class="form-control">
                <option value="true">启用</option>
                <option value="false">禁止</option>
              </select>
            </div>
  
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  

• 修改表格展示

  $('#data-table').bootstrapTable({
    url: '/admin/navigation/',
    responseHandler: function (res) {
      return res.data
    },
    columns: [
      {
        title: '序号',
        width: 50,
        align: 'center',
        formatter: function (value, row, index) {
          return index + 1
        }
      },
  
      {
        title: '名称',
        field: 'name',
        formatter: function (value, row) {
          return `<a href="${row.link}" target="_blank">${value}</a>`
        }
      },
  
      {
        title: '图标',
        field: 'icon',
        formatter: function (value) {
          return `<i class="fa fa-${value}"></i>`
        }
      },
  
      {
        title: '顺序',
        width: 60,
        field: 'ordered',
        formatter: function (value, row) {
          return `<input data-id="${row.id}" class="form-control lw-order-input" style="width: 60px;" type="number" value="${value}">`
        }
      },
  
      {
        title: '跳转方式',
        field: 'linkMode',
        formatter: function (value) {
          return value ? '新页面打开' : '当前页面打开'
        }
      },
  
      {
        title: '是否启用',
        field: 'enable',
        formatter:function (value) {
          return value?`<i class="fa fa-check"></i>` :`<i class="fa fa-close"></i>`
        }
      },
  
      {
        field: 'id',
        title: '操作',
        width: 200,
        formatter: function (value) {
          return `<button type="button" data-id="${value}" class="btn btn-info btn-sm lw-update-btn"><i class="fa fa-edit"></i> 编辑</button> <button type="button" data-id="${value}" class="btn btn-danger btn-sm lw-del-btn"><i class="fa fa-trash"></i> 删除</button>`
        }
      },
    ]
  })
  

• 保存顺序

  • html

    <button type="button" id="lw-order-btn" class="btn btn-default"><i class="fa fa-refresh"></i> 保存顺序</button>
    

  • js

    $('#lw-order-btn').on('click', function () {
      let ids = ""
      $('#data-table .lw-order-input').each((index, ele) => ids += $(ele).data('id') + "----" + $(ele).val() + ";")
      $.ajax({
        url: '/admin/navigation/order',
        method: 'post',
        data: {ids: ids},
        dataType: 'json',
        success: res => {
          if (res.code === 200) {
            layer.msg("保存成功", {icon: 1})
            $('#data-table').bootstrapTable('refresh', {silent: true})
          } else {
            layer.msg(res.message, {icon: 2})
          }
        }
      })
    })

  • controller

    @PostMapping("/order")
    public Result<String> ordered(String ids) {
      Arrays.stream(ids.split(";")).map(x -> x.split("----")).forEach(x -> service.order(Integer.parseInt(x[0]), Integer.parseInt(x[1])));
      return Result.success();
    }

  • service

    public List<Navigation> list() {
      return mapper.findAll(Sort.by(Sort.Direction.ASC, "ordered"));
    }
    
    
    public void order(Integer id, Integer order) {
      mapper.ordered(id, order);
    }

  • mapper

    @Transactional
    @Modifying
    @Query("update Navigation set ordered = ?2 where  id = ?1")
    void ordered(Integer id, Integer order);

统一异常处理

• 创建统一全局异常处理类
• 创建统一异常处理方法
• 返回json格式的默认错误

package cn.kevinlu98.config;

import cn.kevinlu98.common.Result;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * Author: Mr丶冷文
 * Date: 2022/10/10 13:33
 * Email: kevinlu98@qq.com
 * Description:
 */
@ControllerAdvice
public class ExceptionConfig {

  @ResponseBody
  @ExceptionHandler(Exception.class)
  public Result<String> defaultException() {
    return Result.error();
  }
}