按照计划我们来在input栏的下方添置一个表格，显示数据库中已有的分类栏目信息。
模板文件中加入表格的显示部分
打开editCatalog.ftl文件，找到原来的input这个元素的代码，在它的下一行开始，加入表格，如下：
<
运行起来，看一下效果，如图一：
图一：表格初始化的样子
还行。不过显示input栏后，两者明显贴在一起了，如图二：
图二：表格和input贴在一起了
给我们的table最顶端加上mt-2间距吧：
<
好了，显示的准备工作差不多。下一步之前，先说明一下上面的tbody下方的几个<tr>、<td>元素，这些只是先放着：笔者的习惯先看一下大致将来的结构是什么样，因为这个地方是实际的表格内容部分的每一行（tr就是table row的意思）的数据。这个数据我们会在页面打开的时候，通过像服务器发送ajax请求得到数据，动态填入每一行。所以，最后这个<tbody>里面其实初始化应该是空的。
马上来看这一段当页面加载完成后发起的ajax应该是什么样的。
页面加载后发起ajax，得到表格数据
打开catalog.js，在后面添加以下内容：
function
方法getCatalogData只是通过ajax调用，期望服务器的/api/getcatalog能返回所有的catalog的信息（现在还未实现），因为不需要带上客户端的什么信息，所以data是空的。success回调部分，我们暂时空着，这里要做的事情是把数据组织成html的<tr>，也就是上面说的每一行显示的格式，等会再实现。
$(document).ready()这个东西，是jquery的一个机制，这个机制能保证页面的元素都已经可供访问，在这个回调里面，我们才真正调用刚写的getCatalogData()，因为这里面会操作到页面元素：访问<tbody>，在下面插入<tr>。
还没有从服务器上读取过一堆数据，所以现在真不知道怎么填充success后的代码，那么我们就先看服务器怎么处理需要的逻辑先。
服务器支撑api/getcatalog
1、实现ServiceImpl中的read方法
打开CatalogServiceImpl.java，我们把read方法整体改成如下：
@Override
读取所有的记录就是这么简单，一个findAll()方法就搞定。
2、实现api本身
打开CatalogApi.java，给原先的类加入下面的方法：
@PostMapping
也很简单，直接调用Service中的read，得到一个列表，把列表塞入响应数据的body中即可。
没想到如此简单，似乎服务器要做的事情就这么搞定？来吧，试试看浏览器能接收到的数据是什么？
在上面的js文件中，我们给getCatalogData方法中success回调，塞入下面一行内容：
console
运行起来，看看能得到什么（如果你的数据库中还没有任何数据，事先加点进去）。我运行的结果如图三：
图三：打印服务器上拿到的数据
看的出，得到的数据是一个json格式的数组。数组每一项都是一个类似java中的Catalog数据类型的结构。所以我们知道怎么在javascript用这些数据了。
完善getCatalogData方法
再回到catalog.js中，在getCatalogData的success回调下，我们写入以下内容：
success
然后就可以运行看效果了。如图四：
图四：显示出了数据库中的栏目
哈，真好。不过表格第一行因为是原先我们的空数据行，所以要去掉它。这里就不贴代码了，直接删去原来的<tr>元素和它下面的所有<td>元素就可以。
先这样吧，要做的事情还很多，比如加了新的栏目后，表格应该要更新。这些就到后面再做。
休息~
