盐析白兔

这个屌丝很懒，什么也没留下！

热门标签

Spring Boot + Vue3 前后端分离实战 wiki 知识库系统＜五＞--电子书管理功能开发_前后端分离控制按钮显示

作者：盐析白兔 | 2024-06-13 23:30:57

踩

前后端分离控制按钮显示

接着上一次Spring Boot + Vue3 前后端分离实战 wiki 知识库系统＜四＞--前后端交互整合的继续往下学习，这次则需要完成电子书的增删改查的功能了~~把这个功能学完，应付公司的考试应该是绰绰有余了，我这完全是被逼着学习，不然也没动力学，这也就是常说的“有压力才有动力”吧~~

增加电子书管理页面：

增加电子书页面：

1、将页面改为小写字母开头：

通常的页面我们都是放在这个文件夹下，目前有两个了：

咱们先将它的风格写为小写的，如果是多个单词则以"-"分隔，如下：

由于此项目比较小，目前对于about的路由是用的懒加载的形式：

这里直接改成不懒加了，如下：

接下来则来增加一个电子书管理的页面，很显然它有别于目前关于和首页，电子书管理是需要用户登录才能看到的，所以咱们将它放到admin文件夹中：

接下来配置一下页面路由：

增加电子书菜单：

接下来咱们来定义三个菜单，刚好可以跳到目前的三个页面上，如下：

增加电子书路由：

接下来则需要给菜单增加页面的路由跳转了，如何跳转呢？其实就是加一个标签，如下：

运行：

电子书表格展示：

效果：

接下来需要完成电子书表格的展示，效果如下：

对于一个初学者，要实现这么一个界面还是挺难的，下面开始一点点攻克。

Ant Design Vue表格组件了解：

为了实现上面的表格式样式，同样上Ant Design官网去找表格相关组件：

接下来咱们找一个最简单的表格来对它的使用方式做一个了解，其实比较简单，这个表格式组件有两个属性来进行控制：

而这俩数据源的格式如下：

当然还有很多其它更加高级的使用方式，可以根据实际需要再上官网进行相关的了解。

增加电子书表格展示：

修改页面样式：

目前电子书的样式有点丑，是因为页面上没有任何的样式：

这里我们先把首页的样式给套用过来：

copy到admin-ebook.vue中，然后改成如下：


<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <div>
        <h1>电子书管理页面</h1>
      </div>
    </a-layout-content>
  </a-layout>
</template>

此时运行样式就好看多了：

显示成表格：

接下来则来完成电子书列表的展示功能，如之前所示的效果：

其中编辑和删除功能暂且先不实现，先能进行纯表格的数据展示。

1、查询后台数据：

要想显示表格列表，先准备好处理，这里直接使用axios来进行网络请求既可，这块其实在首页上就已经实现了：

2、将数据显示在表格中：

有了Ant Design Vue中的表格组件，一切变得是那么的简单：

它的定义如下：


const columns = [
      {
        title: '封面',
        dataIndex: 'cover',
      },
      {
        title: '名称',
        dataIndex: 'name'
      },
      {
        title: '分类',
        dataIndex: 'category'
      },
      {
        title: '文档数',
        dataIndex: 'docCount'
      },
      {
        title: '阅读数',
        dataIndex: 'viewCount'
      },
      {
        title: '点赞数',
        dataIndex: 'voteCount'
      },
      {
        title: 'Action',
        dataIndex: 'action'
      }
    ];

浏览一下效果：

3、分页效果：

由于现在后台的数据量不多，为了看到分页效果，咱们一页改成只显示2个，如下：

其中它的定义如下：

此时的效果为：

但是此时点击分页不会进行数据切换，关于这块，之后再来实现。

4、封面图片显示：

接下来咱们来处理封面图片的显示，也就是它：

正常这图片应该是从后台读出来的，这里先写死，先导入两张效果图：

附件地址为：https://files.cnblogs.com/files/webor2006/wiki-covers.zip

而为了能读到这个图片，这里手动来改一下数据库的这个字段，如下：

此时咱们就可以在表格中来将封面给显示了，如何做呢？这里就涉及到Ant Design Vue表格的格式渲染了，关于这块就不过多解释，直接使用如下：

也就是定义了一个表格的渲染，而具体它的渲染是值渲染，而值渲染就是除了表名以外的表格中的数值渲染，这个渲染的使用是在这：

然后预览一下效果：

其实理解有点生涩，这里简单再说明一下：

a、slots：表示自定义渲染，当表格中有不同的样式需要渲染，咱们就可以在a-table标签使用template进行自定义渲染的定义；

b、customRender：表示表格的值渲染：

c、title：表示表头渲染，也就是有时候我们会对表头进行格式的定义，比如官网的这种效果：

而它的渲染是这么弄的：

由于咱们目前表头不需要有别的特殊渲染，所以这里我们只需要定义customRender了。

另外要进行渲染，我们需要以这种方式进行渲染的定义：

其中对于columns中的它对应的就是表中的字段：

其中在img标签中用到了一个v-if属性：

它是Vue上的一个标签属性，用来控制标签是否显示，度娘了一下，还有一个类似的属性：v-show，它俩的区别是：

5、Action操作按钮显示：

接下来给Action增加两个操作按钮：

在表格中定义一个这个区域的渲染：

预览一下效果：

其中用到了a-space标签让两个按钮之间有一定的间距：

，关于这块可以上Ant Design官网了解一下：

6、表格其它字段数据显示：

目前表数据的字段都是空的，为了验证数据输出是正确的，咱们手动到mysql中改一条数据来验证一下：

刷新一下界面：

其中由于分类有两级，这里它的数据字段写得有点问题：

使用PageHelper实现后端分页：

接下来咱们则需要实现分页的功能，先从java接口开始改造，关于后端接口的分页功能会使用PageHelper来实现，关于这块其实在之前https://www.cnblogs.com/webor2006/p/15006118.html已经学习过了，这里不过多说明。

1、添加依赖：


      <!-- pagehelper 插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.13</version>
        </dependency>

2、使用PageHelper：

接下来回到电子书列表接口中，让其支持分页，其实非常简单，加一句代码既可：

此时该接口就已经支持分页功能了，下面咱们来测试一下：

而为了验证背后确实是走了分页了，这里修改一下日志输出的级别，让其可以看到mysql背后执行的sql语句：

此时再热部署执行一下，会发现如下sql的执行：

3、使用PageHeler的注意事项：

1、页码是从1开始，不是0：

2、startPage调用建议紧挨着你要查询列表的语句前面：

这里有个坑，先来看一下这坑是啥，改一下程序：

你会发现，第二次查询的分页失效了：

其查看sql的日志也可以看到：

此时需要这样改一下：

所以这个坑一定要注意，还是将测试代码还原成正常的。

3、PageInfo：

另外PageHelper还提供有PageInfo这个对象，它可以获取分页的一些信息，使用如下：

运行看一下：

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

目前分页参数是写死的：

接下来咱们需要将它改活。

请求参数：

先新建一个分页实体类：


package com.cexo.wiki.req;
 
public class PageReq {
    private int page;
 
    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();
    }
}

而它可以作为所有需要分页实体的基类，所以咱们将电子书的请求实体来继承它：

这样其实对于EbookService层的参数就不用动了，咱们只需要改这：

此时接口的分页参数就由请求方来传过来了，测试一下：

返回参数：

目前咱们返回的参数只是把列表返回出来了：

但是很显然对于前端来说，还需要一个列表的总数，因为这样前端才能算出总共多少页，当前是第几页对吧，所以有必要再来封装一个分页的返回实体：


package com.cexo.wiki.resp;
 
import java.util.List;
 
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();
    }
}