1. 9IM首页
  2. 热点

Spring大神之路(22)–开发博客系统实例引入Boostrap并实现浏览博客页面(SpringMVC+Bootstrap)

背景

本篇以浏览博客页面为例,讲解下如何利用SpringMVC实现后端功能,同时利用Bootstrap美化前端演示。

浏览博客功能实现

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已经能看到博客列表了。

导入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>

利用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的样式已经生效了,果然非同凡响,比我们裸奔的代码强多了:

Spring大神之路(22)–开发博客系统实例引入Boostrap并实现浏览博客页面(SpringMVC+Bootstrap)

利用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>

添加导航栏之后,样式更加大气:

Spring大神之路(22)–开发博客系统实例引入Boostrap并实现浏览博客页面(SpringMVC+Bootstrap)

添加修改、删除链接

我们已经有了浏览、新增的菜单了,还需要在表格上提供对博文的修改、删除链接,我们参考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方面的功能,不再详细解释了。

总结

还是比较容易的,哈哈。

原创文章,作者:9IM,如若转载,请注明出处:https://www.9im.cn/1083.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注