Spring Boot+Vue3前后端分离实战wiki知识库系统之电子书管理功能开发

增加电子书管理界面

增加电子书界面

在views下新建一个admin包，表示只有管理员才能访问，创建admin-ebook.vue:

在index.ts中增加路由，先导入vue:

增加电子书菜单、 增加电子书路由

我们在the-header组件中新建菜单选项，并通过router-link标签进行跳转：

运行我们的项目，实现了电子书管理的跳转：

电子书表格展示

Ant Design Vue表格组件介绍

增加电子书表格展示

我们先将home.vue的模板代码复制到admin-ebook.vue：

但是我们电子书表格的页面不需要侧边栏，所以可以将sider删掉：

实现效果：

我们最后实现的效果：


首先我们要定义列：


每一行我们要给一个key:

数据来源是ebooks:

loading为等待框，为true或者false，true代表有等待效果，change为点击分页的时候会执行这个方法

下面我们定义了两个渲染，cover为我们的封面渲染，对应的就是我们放的img的标签：

下面使我们的按钮，我们放两个按钮，两个按钮之间有空格，所以我们用a-space包裹起来：

下面来看我们的js代码。我们定义了数据源ebooks，定义了分页，current是当前页，pagesize是每页条数。loading变量初始是false
定义了一个columns，列的变量，cover渲染就是我们前面定义的,会显示成图片 ：


action就渲染为action，就是两个按钮：

下面定义一个数据查询方法，用axios去调后端接口得到值后为ebooks赋值，还要重置分页按钮：

表格点击页码触发函数，初始化的时候我们要先查一次：

最后我们要把所有参数return：

但不是所有方法都要返回，比如说我们的handleQuery方法只在内部调用，没有再html里面调用，所以我们不需要返回出去。

使用PageHelper实现后端分页

集成PageHelper

修改电子书列表接口、支持分页（假分页数据）

加入依赖后我们就可以直接使用了，使用PageHelper.startPage后我们的接口就已经支持分页了：

我们在配置文件中新增打印所有sql:(trace是最低等级）

就能看到其实pagehelper帮我们加了一个limit：



pagehelper插件分页第一页是从1开始不是从0开始，我们 现在写的这一个startpage只对我们写的第一个sql起作用：

测试后我们发现第一条sql语句查了三条数据，而第二条语句查了五条数据，没有了分页的效果了。

除了pagehelper外我们还有另外一个类pageInfo，我们可以通过toal获取总行数,pages获取总页数：

我们可以通过log输出这些信息：

看一下打印信息：

封装分页请求参数和返回参数

请求参数封装，pageReq

我们将我们之前提到的四个参数封装成两个类
在req包中新建PageReq类，这个类里面有两个参数，一个是页码，一个是每页条数：

public class PageReq {
    @NotNull(message = "【页码】不能为空")
    private int page;

    @NotNull(message = "【每页条数】不能为空")
    @Max(value = 1000, message = "【每页条数】不能超过1000")
    private int size;

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }

    @Override
    public String toString() {
        final StringBuffer sb = new StringBuffer("PageReq{");
        sb.append("page=").append(page);
        sb.append(", size=").append(size);
        sb.append('}');
        return sb.toString();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

我们将原本写的EbookReq集成PageReq，很多功能都可能会用到PageReq，所以需要分页的都可以集成 ：

修改我们的pagehelper(原本是写死的数据）：

测试一下代码：

返回结果封装,pageResp

我们目前只是把查询到的列表返回出来 ，没有把总数返回出来，总数没有的话，前端分页组价就没法使用。
新建PageResp:

public class PageResp<T> {
    private long total;

    private List<T> list;

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    @Override
    public String toString() {
        final StringBuffer sb = new StringBuffer("PageResp{");
        sb.append("total=").append(total);
        sb.append(", list=").append(list);
        sb.append('}');
        return sb.toString();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

修改service层的返回数据：
原本：

现在：


接下来我们改造controller:

测试一下接口：

前后端分页功能整合

前端修改列表查询分页参数

页面初识化的时候我们应该查找第一页，所以onMounted中我们要传入第一页的参数。我们前面有修改过查询分页的请求参数，一个参数是页码，一个参数是每页条数，所以我们第一次请求要页码要是第一页。我们使用以及定义好的pagination作为参数：


所以我们初始化的查询方法要这么写：

这里的两个参数要和后端的请求参数对应起来，这样请求的时候才会自动映射：

前端修改接收列表查询结果

同时我们要修改前端查询结果，因为之前我们已经修改过查询的返回结构了。

电子书管理页面和首页都需修改

首页查询，这里为了简便一次把所有数据全部查出来：

首页查询效果：

电子书管理效果：


如果开发周期不紧张可以单独给首页写一个查询所有的接口：

制作电子书表单

点击每一行编辑按钮，弹出编辑框

我们将a-model标签放在teremplate下，也可以放到a-layout下面：

同时我们设置编辑的点击事件：

还要编写表单的变量、编辑的点击事件以及处理完的事件：

编辑框显示电子书表单

在deit我们带上参数，就是当前电子书的参数：

按钮的渲染有两个参数，record就是对应一整行的 数据：

我们在a-model下添加表单：

我们定义一个响应式变量ebook:

编辑的函数我们加了一个数据就是我们上面说的record,将我们的响应式变量赋值给ebook:

最后记得 将ebook返回给html。
实现效果：

完成电子书编辑功能：

增加后端保存接口

我们将请求参数EbookReq重命名为EbbookQueryReq，意思为查询的请求参数。
保存接口我们编写一个EbokSaveReq,就跟我们domain中的Ebook是一样的。我们在service中新增一个保存的方法，保存要用update，是因为我们数据库原本已经存在了，有primarykey,我们可以根据是否有id来判断，有id是更新，没有Id是新增：

编写接口：

如果是用form表单就不用加requestBody注解，我们上面是用json的形式提交:

点击保存时，调用保存接口，保存成功刷新列表

编写点击保存的时候的函数：

这时候我们去前端测试，编辑电子书，成功后刷新页面，测试成功。

雪花算法与新增功能

时间戳概念

时间戳就是跟1970一月一号八点（北京时间）的差值，以毫秒为单位，我们可以在实际项目中不以1970年的时间作为起始时间。

雪花算法工具类

/**
 * Twitter的分布式自增ID雪花算法
 **/
@Component
public class SnowFlake {

    /**
     * 起始的时间戳
     */
    private final static long START_STMP = 1609459200000L; // 2021-01-01 00:00:00

    /**
     * 每一部分占用的位数
     */
    private final static long SEQUENCE_BIT = 12; //序列号占用的位数
    private final static long MACHINE_BIT = 5;   //机器标识占用的位数
    private final static long DATACENTER_BIT = 5;//数据中心占用的位数

    /**
     * 每一部分的最大值
     */
    private final static long MAX_DATACENTER_NUM = -1L ^ (-1L << DATACENTER_BIT);
    private final static long MAX_MACHINE_NUM = -1L ^ (-1L << MACHINE_BIT);
    private final static long MAX_SEQUENCE = -1L ^ (-1L << SEQUENCE_BIT);

    /**
     * 每一部分向左的位移
     */
    private final static long MACHINE_LEFT = SEQUENCE_BIT;
    private final static long DATACENTER_LEFT = SEQUENCE_BIT + MACHINE_BIT;
    private final static long TIMESTMP_LEFT = DATACENTER_LEFT + DATACENTER_BIT;

    private long datacenterId = 1;  //数据中心
    private long machineId = 1;     //机器标识
    private long sequence = 0L; //序列号
    private long lastStmp = -1L;//上一次时间戳

    public SnowFlake() {
    }

    public SnowFlake(long datacenterId, long machineId) {
        if (datacenterId > MAX_DATACENTER_NUM || datacenterId < 0) {
            throw new IllegalArgumentException("datacenterId can't be greater than MAX_DATACENTER_NUM or less than 0");
        }
        if (machineId > MAX_MACHINE_NUM || machineId < 0) {
            throw new IllegalArgumentException("machineId can't be greater than MAX_MACHINE_NUM or less than 0");
        }
        this.datacenterId = datacenterId;
        this.machineId = machineId;
    }

    /**
     * 产生下一个ID
     *
     * @return
     */
    public synchronized long nextId() {
        long currStmp = getNewstmp();
        if (currStmp < lastStmp) {
            throw new RuntimeException("Clock moved backwards.  Refusing to generate id");
        }

        if (currStmp == lastStmp) {
            //相同毫秒内，序列号自增
            sequence = (sequence + 1) & MAX_SEQUENCE;
            //同一毫秒的序列数已经达到最大
            if (sequence == 0L) {
                currStmp = getNextMill();
            }
        } else {
            //不同毫秒内，序列号置为0
            sequence = 0L;
        }

        lastStmp = currStmp;

        return (currStmp - START_STMP) << TIMESTMP_LEFT //时间戳部分
                | datacenterId << DATACENTER_LEFT       //数据中心部分
                | machineId << MACHINE_LEFT             //机器标识部分
                | sequence;                             //序列号部分
    }

    private long getNextMill() {
        long mill = getNewstmp();
        while (mill <= lastStmp) {
            mill = getNewstmp();
        }
        return mill;
    }

    private long getNewstmp() {
        return System.currentTimeMillis();
    }

    public static void main(String[] args) throws ParseException {
        // 时间戳
        // System.out.println(System.currentTimeMillis());
        // System.out.println(new Date().getTime());
        //
        // String dateTime = "2021-01-01 08:00:00";
        // SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        // System.out.println(sdf.parse(dateTime).getTime());

        SnowFlake snowFlake = new SnowFlake(1, 1);

        long start = System.currentTimeMillis();
        for (int i = 0; i < 10; i++) {
            System.out.println(snowFlake.nextId());
            System.out.println(System.currentTimeMillis() - start);
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

完成新增功能

注入雪花算法工具类：

新增一个新增按钮：

新增一个add方法：

修改我们的服务层代码：

这样我们就实现了新增的功能。

增加删除电子书功能

同样我们是写咋EbookController中：

编写service层代码：

现在来编写前端代码，找到删除的按钮，添加点击事件：

处理删除的函数：

      const handleDelete = (id: number) => {
        axios.delete("/ebook/delete/" + id).then((response) => {
          const data = response.data; // data = commonResp
          if (data.success) {
            // 重新加载列表
            handleQuery({
              page: pagination.value.current,
              size: pagination.value.pageSize,
            });
          } else {
            message.error(data.message);
          }
        });
      };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

写完函数后记得return出去


我们直接将删除按钮用一个popconfirm包裹起来就可以实现确认框效果：

集成Validation做参数校验

添加依赖：

给请求参数添加一些校验规则，来到请求参数这里：

然后给写好的controller加上valid注解：

测试一下：

发现报错：

后端日志也会打印出来：

但是我们这时候在前端测试，会发现请求报错，但是loading会一直在，这种业务逻辑是不合适的，我们应该有个提示：

这时候我们要用到一个统一异常处理类：

/**
 * 统一异常处理、数据预处理等
 */
@ControllerAdvice
public class ControllerExceptionHandler {

    private static final Logger LOG = LoggerFactory.getLogger(ControllerExceptionHandler.class);

    /**
     * 校验异常统一处理
     * @param e
     * @return
     */
    @ExceptionHandler(value = BindException.class)
    @ResponseBody
    public CommonResp validExceptionHandler(BindException e) {
        CommonResp commonResp = new CommonResp();
        LOG.warn("参数校验失败：{}", e.getBindingResult().getAllErrors().get(0).getDefaultMessage());
        commonResp.setSuccess(false);
        commonResp.setMessage(e.getBindingResult().getAllErrors().get(0).getDefaultMessage());
        return commonResp;
    }

    /**
     * 校验异常统一处理
     * @param e
     * @return
     */
    @ExceptionHandler(value = BusinessException.class)
    @ResponseBody
    public CommonResp validExceptionHandler(BusinessException e) {
        CommonResp commonResp = new CommonResp();
        LOG.warn("业务异常：{}", e.getCode().getDesc());
        commonResp.setSuccess(false);
        commonResp.setMessage(e.getCode().getDesc());
        return commonResp;
    }

    /**
     * 校验异常统一处理
     * @param e
     * @return
     */
    @ExceptionHandler(value = Exception.class)
    @ResponseBody
    public CommonResp validExceptionHandler(Exception e) {
        CommonResp commonResp = new CommonResp();
        LOG.error("系统异常：", e);
        commonResp.setSuccess(false);
        commonResp.setMessage("系统出现异常，请联系管理员");
        return commonResp;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

我们只需要添加这个类，springboot框架会扫描这个注解的类，自动帮我们使用，这时我们发现报错就是：


后端写完了，我们现在来写前端：
先导入ant design vue的message组件：

我们拿到后端的response后，我们去做个判断，如果成功就做原本的逻辑，如果不成功就弹出错误提示框：

我们再将修改的代码加一下校验：

电子书管理功能优化

增加名字查询

原本我们的表单只有一个新增的功能，现在我们加一个查询的按钮和输入框：
handleQuery使我们之前就写好的函数。
我们需要一个响应式的参数：

param是给form用的，name就是要搜索的电子书的名字：

在handleQuery里我们就需要把name取出来：

最后记得将参数和函数返回：

编辑时复制对象

我们使用响应式变量会有个问题，比如当我们编辑电子书表单的时候，即使我们没有点确定，但由于在编辑的时候修改了，还是会发生变化：


所以我们要用对象的复制来解决这个问题，我们编写一个工具类：

在vue中使用先导入：

使用复制的对象：

这样我们就做到了编辑时复制对象，修改表单时，不会影响列表数据了。

总结