springboot项目练习15 抽离公共模块整理代码

最新推荐文章于 2023-09-11 10:35:40 发布

原创最新推荐文章于 2023-09-11 10:35:40 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#springboot项目练习15 抽离公共代码使用boo

springboot 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何在微服务架构下，将新闻系统的实体类和公共类抽离为独立模块，通过创建公共依赖项目并调整服务提供者与消费者的代码，实现代码复用和维护性提升。同时，介绍了前端页面的优化过程，包括使用Bootstrap美化界面和实现前后端交互。

将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)">&laquo;</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)">&raquo;</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+"&nbsp;"+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 弹出层查看页面效果图如下所示：简单的做了个页面（这个前端还得好好琢磨一下，样式表）