本帖最后由 a87758133 于 2019-5-23 21:15 编辑
问题导读：
1、Controller如何与Service进行集成？
2、可视化项目如何整合进Dubbo？
3、如何配置web可视化程序的dubbo客户端代理？
上一篇
大数据实战之App管理平台日志分析（四）
http://www.aboutyun.com/thread-27147-1-1.html
一、制作可视化界面
-----------------------------------------------------------------
1.StatController.class 添加方法
[mw_shl_code=java,true] @RequestMapping("/index")
public String toStatPage(){
return "index" ;
}[/mw_shl_code]
2.web/jsps目录下创建index.jsp界面
[mw_shl_code=java,true]<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="en">
<head>
<meta charset="utf-8">
<title>大数据分析系统</title>
<link rel="stylesheet"
href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="../js/echarts.js"></script>
<script>
$(function () {
//手风琴特效
$("#accordion").accordion();
//菜单鼠标悬停
$("#accordion a").mouseenter(function () {
//重置所有连接的颜色
$("#accordion a").css("background-color", "white");
$(this).css("background-color", "#EAEAEA");
});
//鼠标移除
$("#accordion a").click(function () {
//重置所有连接的颜色
$("#accordion a").css("color", "#6a6a6a");
$(this).css("background-color", "#EAEAEA");
$(this).css("color", "#3DA1A7");
});
});
</script>
<style type="text/css">
.test {
background-color: #3DA1A7;
}
body {
padding: 0px;
margin: 0px;
}
#div-top {
height: 30px;
width: 100%;
background-color: #3b485b;
border: 0px solid #3b485b;
}
#div-top ul {
margin: 0px;
}
#div-top ul li {
list-style: none;
display: block;
float: left;
color: white;
border: 0px solid white;
line-height: 30px;
width: 70px;
vertical-align: middle;
text-align: center;
}
#div-top ul li:first-child {
list-style: none;
display: block;
float: left;
color: white;
border: 0px solid white;
line-height: 30px;
width: 130px;
vertical-align: middle;
text-align: center;
}
#div-top ul li a {
text-decoration: none;
font-size: smaller;
color: #9da4ad;
}
#div-top ul li:first-child a {
color: white;
text-decoration: none;
font-size: 15px;
}
#div-banner {
background: url("../images1/backg.png") repeat-x 0 -61px;
height: 60px;
width: 100%;
border: 0px solid blue;
text-align: left;
}
#div-banner form {
border: 0px solid blue;
width: 200px;
height: 57px;
vertical-align: middle;
line-height: 57px;
text-align: center;
}
#div-banner select {
border-radius: 20px;
font-size: 15px;
display: inline;
padding: 3px 10px;
}
#div-banner ul {
border: 0px solid blue;
list-style: none;
display: block;
position: absolute;
left: 200px;
top: 14px;
height: 57px;
width: 600px;
vertical-align: middle;
line-height: 57px;
margin-left: 380px;
}
#div-banner ul li {
display: inline;
padding: 0px 20px;
}
#div-banner ul li a {
text-decoration: none;
font-size: 16px;
color: #333333;
}
#accordion {
margin: 10px 20px;
width: 200px;
}
#accordion a {
display: block;
height: 45px;
width: 200px;
text-decoration: none;
text-align: center;
line-height: 45px;
font-size: 14px;
border-radius: 2px;
margin: 1px 0px 0px -40px;
border: 1px solid #AAAAAA;
border-width: 0px 0px 1px 0px;
}
/*第一个a子元素*/
#accordion a:first-child {
margin-top: -20px;
}
#div-stat-header {
border: 1px solid #B4B4B4;
position: absolute;
left: 250px;
top: 100px;
width: 1050px;
height: 50px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: rgb(230, 230, 230);
vertical-align: middle;
line-height: 50px;
padding-left: 20px;
}
#div-chart {
border: 1px solid #B4B4B4;
position: absolute;
left: 250px;
top: 151px;
width: 1050px;
height: 440px;
vertical-align: middle;
line-height: 50px;
padding-left: 20px;
}
</style>
</head>
<body>
<div id="div-top">
<ul>
<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 id="div-banner">
<form action="" method="post">
<select name="appid">
<option>全部</option>
<option>微信</option>
<option>QQ</option>
<option>UC</option>
<option>植物大战僵尸</option>
</select>
</form>
<ul>
<li><a href="#">统计分析</a></li>
<li><a href="#">组件</a></li>
<li><a href="#">管理</a></li>
</ul>
</div>
<div id="accordion">
<h3>概况</h3>
<div>
<a href="#">实时统计</a>
<a href="#">整体分析</a>
</div>
<h3>用户分析</h3>
<div>
<a href='<c:url value="/stat/newusers" />'>新增用户</a>
<a href="#">活跃用户</a>
<a href="#">沉默用户</a>
<a href="#">启动次数</a>
<a href="#">版本分布</a>
<a href="#">行业数据</a>
</div>
<h3>用户构成</h3>
<div>
<a href="#">周用户构成</a>
<a href="#">用户成分转化</a>
<a href="#">变化系数分析</a>
</div>
<h3>留存分析</h3>
<div>
<a href="#">留存用户</a>
<a href="#">用户新鲜度</a>
<a href="#">用户活跃度</a>
</div>
</div>
<div id="div-stat-header">
新增用户趋势
</div>
<div id="div-chart">
</div>
<script type="application/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('div-chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '日活跃用户统计'
},
tooltip: {},
legend: {
data: ['v1.1', 'v1.2', 'v1.3']
},
xAxis: {
axisLabel: {
rotate: 20,
interval: 0,//横轴信息全部显示
},
data: ["6月10日/周一(父亲节)", "6月11日/周二", "6月12日/周三", "6月13日/周四", "6月14日/周五", "6月15日/周六"]
},
yAxis: {},
series: [{
name: 'v1.1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}, {
name: 'v1.2',
type: 'bar',
data: [6, 23, 38, 13, 15, 26]
}, {
name: 'v1.3',
type: 'bar',
data: [10, 35, 29, 21, 9, 33]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>[/mw_shl_code]
二、Controller和Service进行集成
-----------------------------------------------------
1.注入service给controller
[mw_shl_code=java,true]package com.test.applogs.visualize.web.controller;
import com.test.applogs.visualize.domain.StatBean;
import com.test.applogs.visualize.service.StatService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import javax.annotation.Resource;
/**
* 统计分析类
*/
@Controller
@RequestMapping("/stat")
public class StatController {
@Resource(name="statService")
private StatService ss ;
/**
* appid = "sdk34734"
* 本周每天新增用户数
*/
@RequestMapping("/newusers")
public String findNewUsers(){
StatBean bean = ss.findNewUsers();
System.out.println(bean.getCount());
return "index" ;
}
@RequestMapping("/index")
public String toStatPage(){
return "index" ;
}
}[/mw_shl_code]
2.修改index.jsp，增加链接。
[mw_shl_code=java,true]<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
...
227行:<a href='<c:url value="/stat/newusers" />'>新增用户</a>[/mw_shl_code]
3.启动服务器测试
三、可视化项目整合进dubbo，实现服务的提供者的ha
-----------------------------------------------------------------
1.Dubbo简介
服务的提供者和消费者分别在zk中进行注册。通过zk的高可用实现服务的高可用
部署服务提供者，基于spring配置，有服务实现类，模型实现串行接口，需要单独部署
部署服务消费者，基于spring配置，只有接口，使用代理方式远程RPC调用
2.创建新的模块app-logs-statservice-provider
然后进行项目拆分
provider 提供所有的服务机制
web端仅仅负责展示界面
四、开始改造 -- 准备服务提供者模块
-------------------------------------------------------
1.创建新模块
2.复制web可视化模块中的dao,dao.impl,service.impl + 配置文件。
3.引入pom.xml
[mw_shl_code=xml,true]<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.it18zhang</groupId>
<artifactId>app-logs-statservice-provider</artifactId>
<version>1.0-SNAPSHOT</version>
<dependencies>
<dependency>
<groupId>c3p0</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.1.2</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>4.3.3.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.3.3.RELEASE</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.0</version>
</dependency>
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>1.8.10</version>
</dependency>
<dependency>
<groupId>org.apache.hive</groupId>
<artifactId>hive-jdbc</artifactId>
<version>2.1.0</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>dubbo</artifactId>
<version>2.5.3</version>
</dependency>
<dependency>
<groupId>com.101tec</groupId>
<artifactId>zkclient</artifactId>
<version>0.9</version>
</dependency>
</dependencies>
</project>[/mw_shl_code]
4.修改beans.xml
[mw_shl_code=xml,true]<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/s ... ing-context-4.3.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
http://code.alibabatech.com/schema/dubbo
http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
<!-- 扫描dao和service包 -->
<context:component-scan base-package="com.it18zhang.applogs.visualize.service.impl,com.it18zhang.applogs.visualize.dao.impl" />
<!-- 事务通知-->
<tx:advice id="txAdvice" transaction-manager="txManager">
<tx:attributes>
<tx:method name="*" propagation="SUPPORTS" isolation="DEFAULT"/>
</tx:attributes>
</tx:advice>
<aop:config>
<aop:advisor advice-ref="txAdvice" pointcut="execution(* *..*Service.*(..))" />
</aop:config>
<!-- 数据源 -->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="org.apache.hive.jdbc.HiveDriver"/>
<property name="jdbcUrl" value="jdbc:hive2://s201:10000/applogsdb"/>
<property name="user" value=""/>
<property name="password" value=""/>
<property name="maxPoolSize" value="10"/>
<property name="minPoolSize" value="2"/>
<property name="initialPoolSize" value="3"/>
<property name="acquireIncrement" value="2"/>
</bean>
<!-- 配置sessionfactory -->
<bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:mybatis-config.xml" />
</bean>
<!-- 事务管理器 -->
<bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<!-- 提供方应用信息，用于计算依赖关系 -->
<dubbo:application name="dubbodemo"/>
<!-- 使用zookeeper注册中心暴露服务地址 -->
<dubbo:registry address="zookeeper://s202:2181"/>
<!-- 用dubbo协议在20880端口暴露服务 -->
<dubbo:protocol name="dubbo" port="20880"/>
<!-- 声明需要暴露的服务接口 -->
<dubbo:service interface="com.it18zhang.applogs.visualize.service.StatService" ref="statService"/>
</beans>[/mw_shl_code]
5.启动服务提供方.
[mw_shl_code=java,true]package com.it18zhang.applogs;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
/**
* Created by Administrator on 2017/6/29.
*/
public class ServiceStarter {
public static void main(String[] args) throws InterruptedException {
ApplicationContext ac = new ClassPathXmlApplicationContext("beans.xml");
while (true) {
Thread.sleep(1000);
}
}
}[/mw_shl_code]
五、开始改造 -- 配置web可视化程序的dubbo客户端代理
-------------------------------------------------------------------------
1.web引入pom.xml
[mw_shl_code=xml,true]<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.it18zhang</groupId>
<artifactId>app-logs-visualize-web</artifactId>
<version>1.0-SNAPSHOT</version>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.3.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>dubbo</artifactId>
<version>2.5.3</version>
<exclusions>
<exclusion>
<groupId>org.springframework</groupId>
<artifactId>*</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>com.101tec</groupId>
<artifactId>zkclient</artifactId>
<version>0.9</version>
</dependency>
</dependencies>
</project>[/mw_shl_code]
2./web-inf/dispatcher-servlet.xml添加dubbo元素
[mw_shl_code=xml,true] <?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://code.alibabatech.com/schema/dubbo
file:///d:/dubbo.xsd">
<mvc:annotation-driven/>
<!-- 静态资源 -->
<mvc:resources mapping="/html/**" location="/html/"/>
<mvc:resources mapping="/css/**" location="/css/"/>
<mvc:resources mapping="/js/**" location="/js/"/>
<mvc:resources mapping="/images/**" location="/images/"/>
<!-- 扫描控制器 -->
<context:component-scan
base-package="com.it18zhang.applogs.visualize.web.controller"/>
<!-- 配置视图解析器 -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/jsps/"/>
<property name="suffix" value=".jsp"/>
</bean>
<dubbo:application name="consumer_app"/>
<dubbo:registry address="zookeeper://s202:2181"/>
<dubbo:consumer timeout="50000"/>
<dubbo:reference id="statService"
interface="com.it18zhang.applogs.visualize.service.StatService"/>
</beans>[/mw_shl_code]
六、改造dubbo
-----------------------------------------------------------------------
1.传递的javabean需要时实现java.io.Serializable接口
[mw_shl_code=java,true]class StatBean implements Serializable{
...
}[/mw_shl_code]
2.将接口抽取出放到公共包下
domain包
service包
七、改造结果验证
-------------------------------------------------
1.启动dubbo的provider
2.启动web可视化程序
3.浏览器访问 http://localhost:8080/stat/index
最新经典文章，欢迎关注公众号
来源：CSDN 作者：葛红富 原文：《大数据项目实战之 --- 某App管理平台的手机app日志分析系统（五）》 https://blog.csdn.net/xcvbxv01/article/details/84317261
|
/2 
京ICP备2020039040号
简书网举报电话：021-34700000
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
