博客有个前台展示页面，给用户浏览文章用的，还有一个后台管理页面，是管理员或者作者编写文章用的，我们首先来写后台文章的列表管理界面。
1、添加文章列表页面
然后在PostController中添加页面导航
测试
2、加入elementui
我们修改list.ftlh
这里我们引用了一个ui组件，elementui，elementui是基于vue的，所以我们还得加入vue，虽然vue是为前后端分离而生的，但它说到底还是html页面，我们在这里还是可以使用的，只是实际项目中不会这么用，这里主要是为了讲解springboot，为了读者学习后，以后即使做前后端分离的项目，也能游刃有余。如果这里关于vue，elementui的用法不太懂，可以在网上查看相关文档，或者直接跳过，我们的重点在后台数据服务。
正常的页面效果是这样：
这里我们的js和css是用的cdn，我们可以将文件下载下来，放到我们工程里面，方便测试，文件目录如下：
注意，在eclipse里面不允许创建static目录，因为这时关键字，我们可以在文件系统里面建立，然后再在eclipse刷新目录。springboot里面有三个特殊目录，叫静态资源目录，分别为static，public，resources（这个resources和src/main下的resources不是一个），我们制定src/main/resources下面的文件都会编译到classes目录下，而classes目录下的文件，我们在浏览器是不能直接访问到的，但是springboot默认将这三个静态资源目录进行了映射，可以让里面的文件直接在浏览器访问。什么叫静态资源，就是那些不会变化的网页文件，js，css以及图片等等。
现在我们测试在浏览器直接访问css：http://localhost:8080/css/index.css，发现无法访问，理论上应该是通的。经常检查发现，因为我们之间添加了WebConfiguration类，覆盖了WebMvcConfigurationSupport里面的方法，导致默认的静态资源失效了，我们重新加上，在WebConfiguration类里面加上如下代码：
再次测试，可以通了。我们再修改list.ftlh里面的引用地址。
再测试发现，缺少icon，我们将https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/fonts/element-icons.woff下载下来，放到
ok，现在一切都正常了。
3、添加后台查询文章列表方法
修改PostController类
我们可以先用postman测试接口是否正常
4、修改列表页面
我们先添加一个空白的表格页面，效果如下：
我们添加一个mounted方法，这个mounted方法是vue声明周期中的一个方法，类似于jquery中的document ready。
现在我们需要在mounted中请求后台数据，并将数据赋值给代码中的data变量。
我们添加一个axios库来请求数据，下载地址https://unpkg.com/axios/dist/axios.min.js
添加后台请求
刷新页面
可以看到，数据都正常绑定好了。
5、总结
这章内容有点多，很多东西都超出了后台的范围，大家可以根据自身条件阅读，关键的是后台服务必须清楚，前台页面主要为了辅助演示效果的。
代码：
https://github.com/www15119258/springboot-study/tree/branch09
