目 录
1、用bootstrap对界面的基本样式进行优化
①引入bootstrap样式
bootstrap.min.css
bootstrap-theme.css
②优化主界面
下面直接提供修改后的完整index.html代码
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>新闻管理系统</title>
<link rel="stylesheet" href="/css/main.css">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<style>
a {
font-size: small;
}
a:hover {
background-color: #9acfea;
text-decoration: none
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<form class="form-inline" method="post" th:action="@{/users/login}" th:if="${session.loginUser==null}">
<!-- <label for="exampleInputName2"><p class="text-info">登录名</p></label>-->
<label for="exampleInputName2">账 号</label>
<input type="text" name="userName" id="uname" value="" class="form-control"/>
<label for="exampleInputName2">密 码</label>
<input type="password" name="password" id="upwd" value="" class="form-control"/>
<input type="submit" class="btn btn-info " value="登录"/>
<label id="error"></label>
<img src="/images/friend_logo.gif" alt="Google" id="friend_logo"/>
</form>
<p th:if="${session.loginUser!=null}">
<span>欢迎您：[[${session.loginUser.uname}]]</span>
<a th:href="@{/news/manager}">进入控制台</a>
<a href="/users/logout">退出</a>
</p>
</div>
<div class="row">
<div id="logo"><img src="/images/logo.jpg" alt="新闻中国"/></div>
<div id="a_b01"><img src="/images/a_b01.gif" alt="" style="margin-left: 160px; margin-top: 12px;"/></div>
</div>
<hr>
</div>
<!-- 页面主体区域 -->
<div class="container">
<!-- 左侧分类栏 -->
<div class="row">
<div class="col-md-3">
<h1><img src="/images/title_1.gif" alt="国内新闻"/></h1>
<div class="table table-condensed">
<ul>
<li th:each="news : ${newsList1}"><a th:href="@{/news/detail/}+${news.nid}"><b>
[[${news.ntitle}]] </b></a>
</li>
</ul>
</div>
<h1><img src="/images/title_2.gif" alt="国际新闻"/></h1>
<div class="table table-condensed">
<ul>
<li th:each="news : ${newsList2}"><a th:href="@{/news/detail/}+${news.nid}"><b>
[[${news.ntitle}]] </b></a>
</li>
</ul>
</div>
<h1><img src="/images/title_3.gif" alt="娱乐新闻"/></h1>
<div class="table table-condensed">
<ul>
<li th:each="news : ${newsList3}"><a th:href="@{/news/detail/}+${news.nid}"><b>
[[${news.ntitle}]] </b></a>
</li>
</ul>
</div>
</div>
<!-- 主体区域 -->
<div class="col-md-6">
<div class="class_type"><img src="/images/class_type.gif" alt="新闻中心"/></div>
<div class="content">
<ul class="list-unstyled">
<li>
<a class="text-muted" style="font-size:20px" href='/' th:href="@{/index.html}"><b>全部</b></a>
<a class="text-success" href='#' th:href="@{/index.html(ntid=${topic.tid})}"
th:each="topic : ${topicList}"><b>
[[${topic.tname}]] </b></a>
</li>
</ul>
<ul class="list-unstyled" th:if="${page.getRecords().size()>0}">
<li th:each="news : ${page.getRecords()}">
<div class="row">
<div class="col-md-6"><a class="text-muted" style="" th:href="@{/news/detail/}+${news.nid}">
[[${news.ntitle}]] </a>
</div>
<div class="col-md-2"></div>
<div class="col-md-4"><span style="font-size: 10px"
th:text="${#dates.format(news.ncreateDate,'yyyy-MM-dd HH:mm:ss')}">2021-02-03 14:20:30</span>
</div>
</div>
</li>
<p class="text-muted" align="right">
当前页数:[<span th:text="${page.current}">1</span>/<span th:text="${page.pages}">2</span>]
<span th:if="${page.current>1}">
<a th:href="@{/index.html(pageNo=1,ntid=${newVo.ntid})}">首页</a>
<a th:href="@{/index.html(pageNo=${page.current - 1},ntid=${newVo.ntid})}">上一页</a>
</span>
<span th:if="${page.current<=1}">
首页
上一页
</span>
<span th:if="${page.current<page.pages}">
<a th:href="@{/index.html(pageNo=${page.current + 1},ntid=${newVo.ntid})}">下一页</a>
<a th:href="@{/index.html(pageNo=${page.pages},ntid=${newVo.ntid})}">末页</a>
</span>
<span th:if="${page.current>=page.pages}">
下一页
末页
</span>
</p>
</ul>
<p style="text-align: center;font-size: 18px;margin-top: 20px;"
th:if="${page.getRecords().size()==0}">
暂无数据
</p>
</div>
</div>
<div class="col-md-3">
<ul class="list-unstyled">
<li>
<div class="thumbnail">
<img src="/images/Picture1.jpg" class="img-thumbnail" width="249" alt=""/>
<span class="glyphicon glyphicon-pencil"></span><code>白鸽飞时日欲斜，长剑起舞风来醉</code>
</div></code>
</li>
<li>
<div class="thumbnail">
<img src="/images/Picture2.jpg" class="img-thumbnail" width="249" alt=""/>
<span class="glyphicon glyphicon-pencil"></span><code>梦里横将楚竹吹，花舌飞指笛音奇</code>
</div>
</li>
<li>
<div class="thumbnail">
<img src="/images/Picture3.jpg" class="img-thumbnail" width="249" alt=""/>
<span class="glyphicon glyphicon-pencil"></span>><code>高清古风图片</code>
</div>
</li>
<li>
<div class="thumbnail">
<img src="/images/Picture4.jpg" class="img-thumbnail" width="249" alt=""/>
<span class="glyphicon glyphicon-pencil"></span><code>高清古风图片</code>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div th:insert="common/common::index-bottom"></div>
</body>
</html>③对各个子功能界面进行基本样式优化
我们需要对以下子界面进行基本样式优化：
下面是各界面优化后的完整html代码：
common.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<!-- 后台左侧菜单栏 -->
<div id="opt_list" th:fragment="leftMenu">
<ul>
<li><a th:href="@{/news/manager}">新闻列表</a></li>
<li><a href="/news/add.html">添加新闻</a></li>
<li><a href="/topic/list">主题列表</a></li>
<li><a href="/topic/add.html">添加主题</a></li>
</ul>
</div>
<!-- 后台底部版权 -->
<div th:fragment="footer">
<div id="site_link"> <a href="#">关于我们</a><span>|</span> <a href="#">Aboue Us</a><span>|</span> <a href="#">联系我们</a><span>|</span> <a href="#">广告服务</a><span>|</span> <a href="#">供稿服务</a><span>|</span> <a href="#">法律声明</a><span>|</span> <a href="#">招聘信息</a><span>|</span> <a href="#">网站地图</a><span>|</span> <a href="#">留言反馈</a> </div>
<div id="footer">
<p class="">24小时客户服务热线：010-68988888      <a href="#">常见问题解答</a>      新闻热线：010-627488888<br />
文明办网文明上网举报电话：010-627488888      举报邮箱：<a href="#">jubao@jb-aptech.com.cn</a></p>
<p class="copyright">Copyright © 1999-2009 News China gov, All Right Reserver<br />
新闻中国 版权所有</p>
</div>
</div>
<!-- 后台头部 -->
<div th:fragment="admin-top">
<div id="header">
<div id="welcome">欢迎使用新闻管理系统！</div>
<div id="nav">
<div id="logo"><img src="/images/logo.jpg" alt="新闻中国"/></div>
<div id="a_b01"><img src="/images/a_b01.gif" alt=""/></div>
</div>
</div>
<div id="admin_bar">
<div id="status">
<p th:if="${session.loginUser!=null}">
<span>欢迎您：[[${session.loginUser.uname}]]</span>
<a href="/">返回首页</a>
<a href="/users/logout">退出</a>
</p>
</div>
<div id="channel"></div>
</div>
</div>
<!-- 前台底部 -->
<div class="container-fluid" th:fragment="index-bottom">
<div class="row">
<div id="friend">
<!-- <h1 class="friend_t"> <img src="images/friend_ico.gif" alt="合作伙伴" /> </h1>-->
<div class="friend_list">
<ul class="list-unstyled">
<li> <a href="#">百度</a> </li>
<li> <a href="#">谷歌</a> </li>
<li> <a href="#">新浪</a> </li>
<li> <a href="#">网易</a> </li>
<li> <a href="#">搜狐</a> </li>
<li> <a href="#">人人</a> </li>
<li> <a href="#">中国政府网</a> </li>
</ul>
</div>
</div>
<div id="footer">
<p class=""> 24小时客户服务热线：010-68988888      <a href="#">常见问题解答</a>      新闻热线：010-627488888 <br />
文明办网文明上网举报电话：010-627488888      举报邮箱： <a href="#">jubao@jb-aptech.com.cn</a> </p>
<p class="copyright"> Copyright © 1999-2009 News China gov, All Right Reserver <br />
新闻中国 版权所有 </p>
</div>
</div>
</div>
</body>
</html>add.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>新闻管理系统</title>
<link rel="stylesheet" href="/css/admin.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<!-- 头部 -->
<div th:insert="common/common::admin-top"></div>
<div id="main">
<!-- 左侧菜单栏 -->
<div id="left" th:insert="common/common::leftMenu"></div>
<div id="opt_area">
<h1 id="opt_type"> 添加新闻： </h1>
<form role="form" th:action="@{/news/add}" method="post" enctype="multipart/form-data">
<div class="form-group">
<p>
<label>主题</label>
<select class="form-control" name="ntid">
<option value="">请选择主题</option>
<option th:each="topic : ${topicList}" th:value='${topic.tid}'>[[${topic.tname}]]</option>
</select>
</p>
</div>
<p>
<label>标题</label>
<input name="ntitle" type="text" class="opt_input"/>
</p>
<p>
<label>作者</label>
<input name="nauthor" type="text" class="opt_input"/>
</p>
<p>
<label>摘要</label>
<textarea name="nsummary" cols="40" rows="3"></textarea>
</p>
<p>
<label>内容</label>
<textarea name="ncontent" cols="70" rows="10"></textarea>
</p>
<p>
<label>上传图片</label>
<input name="file" type="file" class="btn btn-success"/>
</p>
<input class="btn-sm btn btn-info" type="submit" value="提交" />
<input class="btn-sm btn btn-danger" type="reset" value="重置"/>
</form>
</div>
</div>
<div id="footer" th:insert="common/common::footer"></div>
</body>
</html>detail.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>新闻管理系统</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<!-- 头部 -->
<div class="container">
<div class="row">
<form class="form-inline" method="post" th:action="@{/users/login}" th:if="${session.loginUser==null}">
<!-- <label for="exampleInputName2"><p class="text-info">登录名</p></label>-->
<label for="exampleInputName2">账号</label>
<input type="text" name="userName" id="uname" value="" class="form-control"/>
<label for="exampleInputName2">密  码</label>
<input type="password" name="password" id="upwd" value="" class="form-control"/>
<input type="submit" class="btn btn-info " value="登录"/>
<label id="error"></label>
<img src="/images/friend_logo.gif" alt="Google" id="friend_logo"/>
</form>
<p th:if="${session.loginUser!=null}">
<span>欢迎您：[[${session.loginUser.uname}]]</span>
<a th:href="@{/news/manager}">进入控制台</a>
<a href="/users/logout">退出</a>
</p>
</div>
<div class="row">
<div id="logo"><img src="/images/logo.jpg" alt="新闻中国"/></div>
<div id="a_b01"><img src="/images/a_b01.gif" alt="" style="margin-left: 160px; margin-top: 12px;"/></div>
</div>
<hr>
</div>
<!-- 页面主体区域 -->
<div class="container">
<div class="row">
<!-- 左侧分类栏 -->
<div class="col-md-3">
<h1><img src="/images/title_1.gif" alt="国内新闻"/></h1>
<div class="table table-condensed">
<ul>
<li th:each="news : ${newsList1}"><a th:href="@{/news/detail/}+${news.nid}"><b>
[[${news.ntitle}]] </b></a>
</li>
</ul>
</div>
<h1><img src="/images/title_2.gif" alt="国际新闻"/></h1>
<div class="table table-condensed">
<ul>
<li th:each="news : ${newsList2}"><a th:href="@{/news/detail/}+${news.nid}"><b>
[[${news.ntitle}]] </b></a>
</li>
</ul>
</div>
<h1><img src="/images/title_3.gif" alt="娱乐新闻"/></h1>
<div class="table table-condensed">
<ul>
<li th:each="news : ${newsList3}"><a th:href="@{/news/detail/}+${news.nid}"><b>
[[${news.ntitle}]] </b></a>
</li>
</ul>
</div>
</div>
<!-- 主体区域 -->
<div class="col-md-9">
<div class="class_type"><img src="/images/class_type.gif" alt="新闻中心"/></div>
<div class="content" style="width: 100%!important;">
<ul class="classlist">
<table width="100%" align="center">
<tr width="100%">
<td colspan="2" align="center" th:text="${news.ntitle}"></td>
</tr>
<tr>
<td colspan="2">
<hr/>
</td>
</tr>
<tr>
<td align="center">作者：[[${news.nauthor}]]
</td>
<td align="left">发布时间：<span
th:text="${#dates.format(news.ncreateDate,'yyyy-MM-dd HH:mm:ss')}"></span></td>
</tr>
<tr>
<td colspan="2" align="center"></td>
</tr>
<tr>
<td colspan="2" th:text="${news.ncontent}"></td>
</tr>
<tr>
<td colspan="2">
<hr/>
</td>
</tr>
</table>
</ul>
<ul class="classlist">
<table width="80%" align="center" th:if="${commentsList.size()==0}">
<tr>
<td colspan="6"> 暂无评论！</td>
</tr>
<tr>
<td colspan="6">
<hr/>
</td>
</tr>
</table>
<table width="80%" align="center" th:if="${commentsList.size()>0}">
<tr th:each="comment:${commentsList}">
<td> 留言人：</td>
<td th:text="${comment.cauthor}"></td>
<td> IP：</td>
<td th:text="${comment.cip}"></td>
<td> 留言时间：</td>
<td th:text="${#dates.format(comment.cdate,'yyyy-MM-dd HH:mm:ss')}"></td>
<td colspan="6" th:text="${comment.ccontent}"></td>
</tr>
<tr>
<td colspan="7">
<hr/>
</td>
</tr>
</table>
</ul>
<ul class="classlist">
<form th:action="@{/comments/add}" method="post" onSubmit="return checkComment()">
<input type="hidden" name="cnid" th:value="${news.nid}"/>
<table width="80%" align="center">
<tr>
<td> 评 论</td>
</tr>
<tr>
<td> 用户名：</td>
<td>
<input name="cauthor" th:if="${session.loginUser!=null}"
th:value="${session.loginUser.uname}"
readonly="readonly" style="border:0px;"/>
<input th:if="${session.loginUser==null}" name="cauthor" value="这家伙很懒什么也没留下"/>
IP：
<input name="cip" id="cip" th:value="${#request.remoteAddr}" readonly="readonly"
style="border:0px;"/>
</td>
</tr>
<tr>
<td colspan="2"><textarea name="ccontent" id="ccontent" cols="70" rows="10"></textarea>
</td>
</tr>
<tr>
<td><input class="btn-sm btn btn-info" name="submit" value="发 表" type="submit"/>
</td>
</tr>
</table>
</form>
</ul>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<!--<div th:insert="common/common::index-bottom"></div>-->
<div th:insert="common/common::index-bottom"></div>
<script type="text/javascript">
function checkComment() {
var content = document.getElementById("ccontent");
if (content.value == "") {
alert("评论内容不能为空！！");
return false;
}
return true;
}
</script>
</body>
</html>edit.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>新闻管理系统</title>
<link rel="stylesheet" href="/css/admin.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.js"></script>
</head>
<body>
<!-- 头部 -->
<div th:insert="common/common::admin-top"></div>
<div id="main">
<!-- 左侧菜单栏 -->
<div id="left" th:insert="common/common::leftMenu"></div>
<div id="opt_area">
<h1 id="opt_type"> 修改新闻： </h1>
<form th:action="@{/news/edit}" method="post" enctype="multipart/form-data">
<p>
<input type="hidden" name="nid" th:value="${news.nid}">
<label>主题</label>
<select name="ntid" id="ntid">
<option value="">请选择主题</option>
<option th:each="topic : ${topicList}" th:value='${topic.tid}'>[[${topic.tname}]]</option>
</select>
</p>
<p>
<label>标题</label>
<input name="ntitle" type="text" class="opt_input" th:value="${news.ntitle}"/>
</p>
<p>
<label>作者</label>
<input name="nauthor" type="text" class="opt_input" th:value="${news.nauthor}"/>
</p>
<p>
<label>摘要</label>
<textarea name="nsummary" cols="40" rows="3">[[${news.nsummary}]]</textarea>
</p>
<p>
<label>内容</label>
<textarea name="ncontent" cols="70" rows="10">[[${news.ncontent}]]</textarea>
</p>
<p>
<label>上传图片</label>
<input name="file" type="file" class="btn btn-success" th:value="${news.npicPath}"/>
</p>
<input class="btn btn-info btn-sm" type="submit" value="提交"/>
<input class="btn btn-info btn-sm" type="reset" value="重置"/>
</form>
</div>
</div>
<div id="footer" th:insert="common/common::footer"></div>
<script>
$("#ntid").val([[${news.ntid}]]);
</script>
</body>
</html>list.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>新闻管理系统</title>
<link rel="stylesheet" href="/css/admin.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<!-- 头部 -->
<div th:insert="common/common::admin-top"></div>
<div id="main">
<!-- 左侧菜单栏 -->
<div id="left" th:insert="common/common::leftMenu"></div>
<div id="opt_area">
<ul class="classlist">
<li th:each="topic : ${page.getRecords()}">
[[${topic.tname}]]
<span>
<a class="btn btn-sm btn-info" th:href="@{/topic/edit/}+${topic.tid}">修改</a>
<a class="btn btn-sm btn-danger" href='javascript:void(0)' th:onclick="clickdel([[${topic.tid}]])">删除</a>
</span>
</li>
</ul>
<p align="right">
当前页数:[<span th:text="${page.current}">1</span>/<span th:text="${page.pages}">2</span>]
<span th:if="${page.current>1}">
<a th:href="@{/topic/list(pageNo=1)}">首页</a>
<a th:href="@{/topic/list(pageNo=${page.current - 1})}">上一页</a>
</span>
<span th:if="${page.current<=1}">
首页
上一页
</span>
<span th:if="${page.current<page.pages}">
<a th:href="@{/topic/list(pageNo=${page.current + 1})}">下一页</a>
<a th:href="@{/topic/list(pageNo=${page.pages})}">末页</a>
</span>
<span th:if="${page.current>=page.pages}">
下一页
末页
</span>
</p>
</div>
</div>
<div id="footer" th:insert="common/common::footer"></div>
<script type="text/javascript">
function clickdel(tid) {
if (confirm("确定要删除该主题吗？"))
window.location = "/topic/deleteById/"+tid;
}
</script>
</body>
</html>admin.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>新闻管理系统</title>
<link rel="stylesheet" href="/css/admin.css">
<link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 头部 -->
<div th:insert="common/common::admin-top"></div>
<div id="main">
<!-- 左侧菜单栏 -->
<div id="left" th:insert="common/common::leftMenu"></div>
<div id="opt_area">
<script type="text/javascript">
function clickdel(nid) {
if (confirm("此新闻的相关评论也将删除，确定删除吗？"))
window.location = "/news/deleteById/" + nid;
}
</script>
<ul class="classlist">
<li th:each="news : ${page.getRecords()} ">
[[${news.ntitle}]]
<span> 作者：[[${news.nauthor}]]
<a class="btn-sm btn btn-info" th:href='@{/news/edit/}+${news.nid}'>修改</a>
<!-- <a class="btn-sm btn btn-danger" href='javascript:;' th:onclick="clickdel([[${news.nid}]]">删除</a></span>-->
<a class="btn-sm btn btn-danger" href='javascript:;' th:onclick="clickdel([[${news.nid}]])">删除</a></span>
<!-- <a class="btn-sm btn btn-danger" href='javascript:;' th:onclick="clickdel([[${news.nid}]]">删除</a></span>-->
</li>
</ul>
<p align="right">
当前页数:[<span th:text="${page.current}">1</span>/<span th:text="${page.pages}">2</span>]
<span th:if="${page.current>1}">
<a th:href="@{/news/manager(pageNo=1)}">首页</a>
<a th:href="@{/news/manager(pageNo=${page.current - 1})}">上一页</a>
</span>
<span th:if="${page.current<=1}">
首页
上一页
</span>
<span th:if="${page.current<page.pages}">
<a th:href="@{/news/manager(pageNo=${page.current + 1})}">下一页</a>
<a th:href="@{/news/manager(pageNo=${page.pages})}">末页</a>
</span>
<span th:if="${page.current>=page.pages}">
下一页
末页
</span>
</p>
</div>
</div>
<div id="footer" th:insert="common/common::footer">
</div>
</body>
</html>④效果图
2、总结
本次新闻管理系统的开发，让我体验到了使用 Springboot开发的方便，约定优于配置的思想，使得我们在开发中不用像传统的Spring框架那样编写大量的xml文件和整合第三方框架的配置。在使用Maven工具依赖管理的项目中通过pom.xml文件配置要引入的 jar包的坐标，这样 Maven工具就会自动从仓库获取对应的jar包。Mybatis Plus封装了一些最基础的CRUD方法，只需定义好实体类，然后创建一个接口去继承提供的BaseMapper，无需我们编写任何SQL语句，即给我们开发省了很多时间也能够简洁的实现对数据库的操作。
最后分享给各位阅读者本人的学习体会：“语言只是实现工具，最重要的是是思想。”开发一个项目，不管我们用什么语言去开发，首先都是要把业务逻辑转换成实现思想，再用约定好的编程语言去实现功能。
1781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
