- 将entity实体类和公共类抽离出原项目
- 修改服务提供者和服务消费者项目
1 新建项目news-common，添加公共依赖lang jsoup依赖
<modelVersion>4.0.0</modelVersion>
<groupId>com.gc.spingboot</groupId>
<artifactId>news-common</artifactId>
<version>0.0.1-SNAPSHOT</version>
<properties>
<springboot-version>2.0.5.RELEASE</springboot-version>
</properties>
<dependencies>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.8.3</version>
</dependency>
</dependencies>
</project>2 使用maven clean install 将jar包安装到本地maven仓库
3删除服务提供者和服务消费者项目中的重复代码，引入生成的公共模块依赖
<dependency>
<groupId>com.gc.spingboot</groupId>
<artifactId>news-common</artifactId>
<version>0.0.1-SNAPSHOT</version>由于注册中心暂时没用到其他模块的代码，故不进行引用
4 调整查看新闻接口，将此方法移动到新闻消费者news-search项目的NewsSearchController中，调整页面，增加点击事件，页面使用bootstarp进行编辑。（在这之前删除掉redis缓存中存储的html页面） flushall 清空所有的key值
5 列表使用list-group row 这个样式（导入bootstarp的js和css样式文件）完成后的列表界面如下图所示：
6 页面列表页和js交互代码如下所示：使用了模态框（前台代码是真的难写）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="./../bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
</style>
</head>
<h4 align="center">
新闻系统 <small>前台首页</small>
</h4>
<body style="width: auto; height: auto">
<div class="container">
<div class="row" align="center">
<form class="form-inline" role="form" action="javascript:void(0)">
<div class="form-group ">
<label for="searchKey" class="sr-only">关键字</label>
<div class="col-sm-10">
<input type="text" class="form-control col-lg-2" id="searchKey"
placeholder="请输入关键字">
</div>
</div>
<div class="form-group ">
<div class="col-sm-offset-2 col-sm-10 col-lg-3">
<button type="button" id ="search" class="btn btn-default">搜索</button>
</div>
</div>
</form>
</div>
<div class="list-group row" style="margin-top: 10px">
<ul id="newsList">
<!-- <li class="list-group-item">免费域名注册<span class="badge">新</span></li> -->
<!-- <li class="list-group-item">免费 Window 空间托管<span class="badge">新</span></li> -->
<!-- <li class="list-group-item">图像的数量<span class="badge">新</span></li> -->
<!-- <li class="list-group-item">24*7 支持<span class="badge">新</span></li> -->
<!-- <li class="list-group-item">每年更新成本<span class="badge">新</span></li> -->
</ul>
<div class="row" align="center">
<ul class="pagination" id="pagination">
<li id="goPre"><a href="javascript:void(0)">«</a></li>
<li class="active" key='1' onclick='pageClick(this)'><a href="javascript:void(0)">1</a></li>
<li key='2' onclick='pageClick(this)'><a href="javascript:void(0)">2</a></li>
<li key='3' onclick='pageClick(this)'><a href="javascript:void(0)">3</a></li>
<li key='4' onclick='pageClick(this)'><a href="javascript:void(0)">4</a></li>
<li key='5' onclick='pageClick(this)'><a href="javascript:void(0)">5</a></li>
<li key='6' onclick='pageClick(this)'><a href="javascript:void(0)">6</a></li>
<li key='7' onclick='pageClick(this)'><a href="javascript:void(0)">7</a></li>
<li key='8' onclick='pageClick(this)'><a href="javascript:void(0)">8</a></li>
<li key='9' onclick='pageClick(this)'><a href="javascript:void(0)">9</a></li>
<li key='10' onclick='pageClick(this)'><a href="javascript:void(0)">10</a></li>
<li id="geNext"><a href="javascript:void(0)">»</a></li>
<li class="disabled"><span id="totalPage">共40页</span></li>
<li class="disabled"><span id="totalSum">共862条记录</span></li>
</ul>
</div>
</div>
</div>
<div class="modal fade bs-example-modal-lg" id="newsModel" >
<div class="modal-dialog modal-lg" >
<div class="modal-content modal-lg" >
<div class="modal-header">
<h4 class="modal-title" id="newsModelLabel">news-search新闻查看</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</div>
<div class="modal-body">
<iframe id="newsModelIframe" width="100%" frameborder="0" style="height:350px;overflow:auto; "></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" onclick="closeIfram()" > 关闭 </button>
</div>
</div>
</div>
</div>
<script src="./../js/jquery.js"></script>
<script src="/../bootstrap/dist/js/bootstrap.js"></script>
</body>
<script type="text/javascript">
var param = {};
param.pagesize="10";
var totaPage=1;
var curentIndex=1;
param.key="";
$(function(){
var key = $("#searchKey").val();
if(key){
param.key=key;
}
param.currentPage="1";
loadData(param);
});
function closeIfram(){
$("#newsModel").modal('hide')
}
/**
* 分页按钮点击事件
*/
function pageClick(obj){
console.log(obj);
$(obj).addClass("active");
var currentPage = $(obj).attr("key");
$("#pagination").find("li").each(function(){
$li = $(this);
var liKey=$li.attr("key");
if(liKey && liKey!= currentPage){
$li.removeClass("active");
}
});
param.currentPage=currentPage;
var key = $("#searchKey").val();
if(key){
param.key=key;
}
loadData(param);
}
/**
* 搜索按钮
得到当前页
*/
$("#search").bind("click",function(){
var key = $("#searchKey").val();
if(key){
param.key=key;
}
var currentPage =$("#pagination").find("li[class='active']").attr("key");// 当前活动的页码
param.currentPage=currentPage;
loadData(param);
});
/**
* 查看新闻信息
*/
function shownews(id,url){
var newsurl="http://localhost:8092/newsSearch/getNews/"+id;
$.post(newsurl,{url,url},function(res){
if(res.code==200){
var frameSrc = "http://localhost:8092/page/"+res.data;
$("#newsModelIframe").attr("src", frameSrc);
$('#newsModel').modal({ show: true, backdrop: 'static' });
}
},"json");
}
/**
*数据加载
*/
function loadData(param){
var url ="http://localhost:8092/newsSearch/search";
var html ="";
$.post(url,param,function(res){
$("#newsList").empty();
if(res.code==200){
for(var i=0;i<res.data.rows.length;i++){
var item = res.data.rows[i];
html += "<li class='list-group-item'><a href='javascript:void(0)'"+
"onclick=shownews('"+item.id+"','"+item.url_3w+"')>"+
item.title_news+"</a><span class='pull-right'>"+item.source_news+" "+item.ptime+"</span></li>";
}
totaPage=res.data.totalPage==0?1:res.data.totalPage;// 默认显示 0 到 10
$("#newsList").append(html);
$("#totalPage").empty();
$("#totalPage").html("共"+res.data.totalPage+"页");
$("#totalSum").empty();
$("#totalSum").html("共"+res.data.total+"条记录");
}
});
}
/**
* gpPre 相当于前端分页
*/
$("#goPre").click(function(){
if(curentIndex==1){
return;
}
//修改li的key的值 和分页下标 的值
$("#pagination").find("li").each(function(){
$li = $(this);
var liKey=$li.attr("key");
if(liKey && liKey >10 ){
// $li.removeClass("active");
$li.attr("key",liKey-10);
$li.find("a").html(liKey-10);
}
});
curentIndex=curentIndex-1;
});
$("#geNext").click(function(){
// 计算可以轮几轮
var sum = totaPage%10==0?totaPage/10:totaPage/10+1;//总的次数
if(curentIndex==parseInt(sum)){//相当于最后一页 直接返回
return;
}
//修改li的key的值 和分页下标 的值
$("#pagination").find("li").each(function(){
$li = $(this);
var liKey=$li.attr("key");
if(liKey){
$li.attr("key", parseInt(liKey)+10);
$li.find("a").html(parseInt(liKey)+10);
if(parseInt(liKey)+10>=totaPage){
}
}
});
curentIndex=curentIndex+1;
});
</script>
</html>7 弹出层查看页面效果图如下所示：简单的做了个页面（这个前端还得好好琢磨一下，样式表）
结束：
现在抽离了公共代码块整合和注册中心、redis、solr、mysql使用feign完成了列表的调用，通过redis存储键的方法，完成了请求页面的静态化。
下面将继续其他模块和功能的开发，还有学习前端框架，竟可能让页面看起来好一点。
扫一扫
842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
