Spring Boot入门（第九章）：列表页面

2020-03-21 本文已影响0人苍_之涛

博客有个前台展示页面，给用户浏览文章用的，还有一个后台管理页面，是管理员或者作者编写文章用的，我们首先来写后台文章的列表管理界面。

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类里面加上如下代码：