增加电子书管理界面
增加电子书界面
在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();
}
}我们将原本写的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();
}
}修改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);
}
}
}完成新增功能
注入雪花算法工具类：
新增一个新增按钮：
新增一个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);
}
});
};写完函数后记得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;
}
}我们只需要添加这个类，springboot框架会扫描这个注解的类，自动帮我们使用，这时我们发现报错就是：
后端写完了，我们现在来写前端：
先导入ant design vue的message组件：
我们拿到后端的response后，我们去做个判断，如果成功就做原本的逻辑，如果不成功就弹出错误提示框：
我们再将修改的代码加一下校验：
电子书管理功能优化
增加名字查询
原本我们的表单只有一个新增的功能，现在我们加一个查询的按钮和输入框：
handleQuery使我们之前就写好的函数。
我们需要一个响应式的参数：
param是给form用的，name就是要搜索的电子书的名字：
在handleQuery里我们就需要把name取出来：
最后记得将参数和函数返回：
编辑时复制对象
我们使用响应式变量会有个问题，比如当我们编辑电子书表单的时候，即使我们没有点确定，但由于在编辑的时候修改了，还是会发生变化：
所以我们要用对象的复制来解决这个问题，我们编写一个工具类：
在vue中使用先导入：
使用复制的对象：
这样我们就做到了编辑时复制对象，修改表单时，不会影响列表数据了。
总结
