Mr丶冷文

文章 分类 评论
117 10 6310

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(十一)完成导航管理及统一异常处理

MR丶冷文 2022-10-10 175 0条评论 个人博客项目视频教程 javaspringboot个人博客博客系统

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

(十一)完成导航管理及统一异常处理

说明

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

新增编辑文章标题处理

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

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

导航实体及数据库

  • 实体类名:Navigation
  • 数据库名:blog_navigation
属性类型备注
id整数主键
name字符串名称
icon字符串图标: fontawesome4.7
link字符串跳转链接
linkMode布尔跳转方式:false.当前页跳转;true.新标签页跳转
enable布尔是否启用
ordered整数顺序

导航管理

  • 生成代码

    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();
  }
}

评论(0)

最新评论

  • 阿伟

    拿下

  • 阿伟

    我looklook

  • 阿伟

    拿下

  • 阿伟

    来了

  • 阿伟

    下载

日历

2023年02月

   1234
567891011
12131415161718
19202122232425
262728    

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭