1.背景
本篇以浏览博客页面为例，讲解下如何利用SpringMVC实现后端功能，同时利用Bootstrap美化前端演示。
2. 浏览博客功能实现
1、首先修改BlogController的blogView方法，进入浏览博客页面时应携带博客列表信息
@Autowired//自动装配blogService private BlogService blogService; /** * 1 进入浏览博客页面 */ @RequestMapping("/blogView") public ModelAndView blogView() { ModelAndView mv = new ModelAndView(); mv.setViewName("blogView.jsp"); //设置需要返回给页面的值 mv.addObject("blogs", blogService.getBlogList()); return mv; }
2、修改页面，遍历输出blogs中的内容
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <!-- 遍历后台返回的blogs集合，取每一行赋给blog --> <c:forEach items="${blogs}" var="blog"> <tr> <td>${blog.id}</td> <td>${blog.title}</td> <td>${blog.author}</td> </tr> </c:forEach> </table> </body> </html>
此时我们在浏览器地址栏访问http://127.0.0.1:8080/myblog/blogView.do已经能看到博客列表了。
3. 导入Bootsrap
为了美化样式，我们引入Bootsrap到项目中，这个也比较简单，实际上就是通过添加一些标签和class实现定制化的样式（别人封装好了，我们拿过来用就行，非常简单）。
在head区域引入bootstrap，此处直接引入在线的样式文件即可。
<head> <meta charset="UTF-8"> <title></title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head>
4. 利用Bootstrap样式美化表格
Bootstrap中条纹状表格的样式是
<table class="table table-striped">
...
</table>
所以我们将jsp页面修改下，添加样式，并且添加下表头
<table class="table table-striped">
<tr>
<th>ID</th>
<th>标题</th>
<th>作者</th>
</tr>
<c:forEach items="${blogs}" var="blog">
<tr>
<td>${blog.id}</td>
<td>${blog.title}</td>
<td>${blog.author}</td>
</tr>
</c:forEach>
</table>
OK，此时再次访问blogView，发现bootstrap的样式已经生效了，果然非同凡响，比我们裸奔的代码强多了：
5. 利用Bootstrap添加导航栏
作为一个正儿八经的网站，那可不仅仅是一个网页，至少得有一个导航栏，将所有页面串联起来。我们观察下Bootstrap导航栏的示例：
<<body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li><a href="/myblog/blogView.do">浏览博客</a></li> <li><a href="/myblog/blogAdd.do">新增博客</a></li> </ul> </div> </nav> <table class="table table-striped"> <tr> <th>ID</th> <th>标题</th> <th>作者</th> </tr> <c:forEach items="${blogs}" var="blog"> <tr> <td>${blog.id}</td> <td>${blog.title}</td> <td>${blog.author}</td> </tr> </c:forEach> </table> </body> >
添加导航栏之后，样式更加大气：
6. 添加修改、删除链接
我们已经有了浏览、新增的菜单了，还需要在表格上提供对博文的修改、删除链接，我们参考Boostrap的按钮样式，实现如下：
<c:forEach items="${blogs}" var="blog">
<tr>
<td>${blog.id}</td>
<td>${blog.title}</td>
<td>${blog.author}</td>
<td>
<a class="btn btn-primary btn-sm" href="/myblog/blogEdit.do?id=${blog.id}" role="button">编辑</a>
<a class="btn btn-danger btn-sm" href="/myblog/blogDelete.do?id=${blog.id}" role="button">删除</a>
</td>
</tr>
</c:forEach>
这快属于传统jsp方面的功能，不再详细解释了。
7. 总结
还是比较容易的，哈哈。
