基于Hadoop平臺的電信客服數據的處理與分析④項目實現：任務18： 數據展示

任務描述

接下來我們需要將根據業務需求將某人按照不同維度查詢出來的結果，展示到Web頁面上。

任務指導

數據展示模塊流程圖：

image.png

數據展示使用Java的SSM框架，需要實現的代碼包括：

1. 實體類

2. 數據庫操作

3. 業務邏輯操作

4. 控制器

5. 使用Echart展示數據

任務實現

注：此處使用的IntelliJ IDEA Ultimate版本，只有30天免費使用期；需要自行申請教育ID（免費使用）。

1、后端開發

? ? 1)?? 新建module：ct_web

  • 創建Maven項目，并選擇maven-archetype-webapp插件

  • 編輯項目的pom.xml，至少包含以下包：
jar包版本
spring基礎包（10）spring-context
spring-core
spring-beans
spring-context-support
spring-aop
spring-aspects
spring-expression
spring-jdbc
spring-orm
spring-tx		4.3.3.RELEASE
springMVC基礎包（2）spring-web
spring-webmvc		4.3.3.RELEASE
數據庫基礎包c3p0
mysql-connector-java

0.9.1.2

5.1.27

mybatis基礎包

mybatis

mybatis-spring

3.2.1

1.3.0

通用必備包commons-logging1.2
其他包

javax.servlet-api

fastjson

2.5

1.2.47

最終項目的pom.xml文件如下：

<?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>org.example</groupId><artifactId>ct_web</artifactId><version>1.0-SNAPSHOT</version><packaging>war</packaging><name>ct_web</name><!-- FIXME change it to the project's website --><url>http://www.example.com</url><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.7</maven.compiler.source><maven.compiler.target>1.7</maven.compiler.target></properties><dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.27</version></dependency><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-context-support</artifactId><version>4.3.3.RELEASE</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-webmvc</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>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency><dependency><groupId>org.springframework.data</groupId><artifactId>spring-data-redis</artifactId><version>1.7.2.RELEASE</version></dependency><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.9.0</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.8.5</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.8.5</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.8.5</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version></dependency><dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.2</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency></dependencies><build><finalName>ct_web</finalName><pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) --><plugins><plugin><artifactId>maven-clean-plugin</artifactId><version>3.1.0</version></plugin><!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging --><plugin><artifactId>maven-resources-plugin</artifactId><version>3.0.2</version></plugin><plugin><artifactId>maven-compiler-plugin</artifactId><version>3.8.0</version></plugin><plugin><artifactId>maven-surefire-plugin</artifactId><version>2.22.1</version></plugin><plugin><artifactId>maven-war-plugin</artifactId><version>3.2.2</version></plugin><plugin><artifactId>maven-install-plugin</artifactId><version>2.5.2</version></plugin><plugin><artifactId>maven-deploy-plugin</artifactId><version>2.8.2</version></plugin></plugins></pluginManagement></build>
</project>

? ? 2)?? 項目結構：?

  • 創建如下代碼結構

  • 在項目上點擊右鍵，選擇“Build Module ct_web”
  • 配置部署Tomcat

在IDEA工具頂部，點擊“Add Configuration”

在 Run/Debug Config 窗口，點擊左上角的“+”，然后選擇 Tomcat Server

選擇Tomcat Server --> Local

然后配置使用本地已經安裝好的Tomcat（本地Tomcat在【/usr/local/】目錄下）

配置打包方式

? ? 3）代碼實現

根據項目結構分別創建對應的包，并且實現相關代碼：

  • CallLog實體類用于存放返回給用戶的數據，代碼如下：
package com.model;import java.io.Serializable;/*** 用于存放返回給用戶的數據*/
public class CallLog implements Serializable{private String id_date_contact;private String id_date_dimension;private String id_contact;private String call_sum;private String call_duration_sum;private String telephone;private String name;private String year;private String month;private String day;public String getId_date_contact() {return id_date_contact;}public void setId_date_contact(String id_date_contact) {this.id_date_contact = id_date_contact;}public String getId_date_dimension() {return id_date_dimension;}public void setId_date_dimension(String id_date_dimension) {this.id_date_dimension = id_date_dimension;}public String getId_contact() {return id_contact;}public void setId_contact(String id_contact) {this.id_contact = id_contact;}public String getCall_sum() {return call_sum;}public void setCall_sum(String call_sum) {this.call_sum = call_sum;}public String getCall_duration_sum() {return call_duration_sum;}public void setCall_duration_sum(String call_duration_sum) {this.call_duration_sum = call_duration_sum;}public String getTelephone() {return telephone;}public void setTelephone(String telephone) {this.telephone = telephone;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getYear() {return year;}public void setYear(String year) {this.year = year;}public String getMonth() {return month;}public void setMonth(String month) {this.month = month;}public String getDay() {return day;}public void setDay(String day) {this.day = day;}@Overridepublic String toString() {return "CallLog{" +"call_sum='" + call_sum + '\'' +", call_duration_sum='" + call_duration_sum + '\'' +", telephone='" + telephone + '\'' +", name='" + name + '\'' +", year='" + year + '\'' +", month='" + month + '\'' +", day='" + day + '\'' +'}';}
}
  • 用戶實體類定義如下：
package com.model;import java.io.Serializable;
import java.util.Date;public class User implements Serializable{private int id;private String username;private String password;private String email;private String role;private int status;private Date regTime;private String regIp;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public String getRole() {return role;}public void setRole(String role) {this.role = role;}public int getStatus() {return status;}public void setStatus(int status) {this.status = status;}public Date getRegTime() {return regTime;}public void setRegTime(Date regTime) {this.regTime = regTime;}public String getRegIP() {return regIp;}public void setRegIP(String regIp) {this.regIp = regIp;}
}
  • 定義QueryInfo實體類用于存放用戶請求的數據
package com.model;import java.io.Serializable;/*** 該類用于存放用戶請求的數據*/
public class QueryInfo implements Serializable{private String telephone;private String year;private String month;private String day;public QueryInfo() {super();}public QueryInfo(String telephone, String year, String month, String day) {super();this.telephone = telephone;this.year = year;this.month = month;this.day = day;}public String getTelephone() {return telephone;}public void setTelephone(String telephone) {this.telephone = telephone;}public String getYear() {return year;}public void setYear(String year) {this.year = year;}public String getMonth() {return month;}public void setMonth(String month) {this.month = month;}public String getDay() {return day;}public void setDay(String day) {this.day = day;}
}
  • 創建CallLog對應的Dao實現類CallLogDao
package com.dao;import com.model.CallLog;import java.util.HashMap;
import java.util.List;public interface CallLogDAO {List<CallLog> getCallLogList(HashMap<String, String> paramsMap);
}
  • 由于使用MyBatis，所以需要創建CallLogDao對應的mapper映射文件，文件位置 resources/mapper/CallLog.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><!-- 設置為IUserDao接口方法提供sql語句配置 -->
<mapper namespace="com.dao.CallLogDAO"><parameterMap type="java.util.HashMap" id="parameterMap"><parameter javaType="string" jdbcType="VARCHAR" property="telephone"/><parameter javaType="string" jdbcType="VARCHAR" property="year"/><parameter javaType="string" jdbcType="VARCHAR" property="month"/><parameter javaType="string" jdbcType="VARCHAR" property="day"/></parameterMap><resultMap id="userList" type="com.model.CallLog"><id column="call_sum" property="call_sum"></id><id column="call_duration_sum" property="call_duration_sum"></id><id column="telephone" property="telephone"></id><id column="name" property="name"></id><id column="year" property="year"></id><id column="month" property="month"></id><id column="day" property="day"></id></resultMap><select id="getCallLogList" parameterMap="parameterMap" resultMap="userList">SELECT call_sum, call_duration_sum, telephone, name, year , month, day FROM tb_dimension_date t4INNER JOIN (SELECT id_date_dimension, call_sum, call_duration_sum, telephone, name FROM tb_call t2INNER JOIN ( SELECT id, telephone, name FROM tb_contacts WHERE telephone = ? ) t1ON t2.id_contact = t1.id ) t3ON t4.id = t3.id_date_dimension WHERE year = ? AND month = ? AND day = ? ORDER BY year, month</select></mapper>
  • 創建User對應的Dao實現類UserDao
package com.dao;import com.model.User;import java.util.List;public interface UserDao {List<User> getAllUser();
}
  • 創建UserDao對應的mapper映射文件，文件位置 resources/mapper/User.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><!-- 設置為IUserDao接口方法提供sql語句配置 -->
<mapper namespace="com.dao.UserDao"><resultMap id="userList" type="com.model.User"><id column="id" property="id" ></id><id column="email" property="email" ></id><id column="password" property="password" ></id><id column="username" property="username" ></id><id column="role" property="role" ></id><id column="status" property="status" ></id><id column="regTime" property="regTime" ></id><id column="regIp" property="regIp" ></id></resultMap><select id="getAllUser" resultMap="userList">SELECT * FROM user</select></mapper>
  • 創建CallLog對應的Service接口CallLogService
package com.service;import com.model.CallLog;import java.util.HashMap;
import java.util.List;public interface CallLogService {List<CallLog> getCallLogList(HashMap<String, String> paramsMap);
}
  • 創建User對應的Service接口UserService
package com.service;import com.model.User;import java.util.List;public interface UserService {List<User> getAllUser();
}
  • 創建CallLogService實現類CallLogServiceImpl
package com.service.impl;import com.dao.CallLogDAO;
import com.model.CallLog;
import com.service.CallLogService;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;@Service("callLogService")
public class CallLogServiceImpl implements CallLogService {@Resourceprivate CallLogDAO callLogDAO;public List<CallLog> getCallLogList(HashMap<String, String> paramsMap) {
//        //按照年統計：統計某個用戶，1年12個月的所有的數據（不精確到day）
//        String sql = "SELECT `call_sum`, `call_duration_sum`, `telephone`, `name`, `year` , `month`, `day` FROM tb_dimension_date t4 INNER JOIN ( SELECT `id_date_dimension`, `call_sum`, `call_duration_sum`, `telephone`, `name` FROM tb_call t2 INNER JOIN ( SELECT `id`, `telephone`, `name` FROM tb_contacts WHERE telephone = :telephone ) t1 ON t2.id_contact = t1.id ) t3 ON t4.id = t3.id_date_dimension WHERE `year` = :year AND `month` = :month AND `day` = :day ORDER BY `year`, `month`;";
//        BeanPropertyRowMapper<CallLog> beanPropertyRowMapper = new BeanPropertyRowMapper<CallLog>(CallLog.class);
//        List<CallLog> list = namedParameterJdbcTemplate.query(sql, paramsMap, beanPropertyRowMapper);List<CallLog> list = callLogDAO.getCallLogList(paramsMap);return list;}
}
  • 創建UserService實現類UserServiceImpl
package com.service.impl;import com.dao.UserDao;
import com.model.User;
import com.service.UserService;
import org.springframework.cache.annotation.Cacheable;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import java.lang.reflect.Method;
import java.util.List;@Service("userService")
public class UserServiceImpl implements UserService {@Resourceprivate UserDao userDao;@Cacheable(value="user",key = "#root.methodName")public List<User> getAllUser() {List<User> list=userDao.getAllUser();return list;}
}
  • 創建CallLog對應的Controller實現類CallLogController代碼如下：
package com.controller;import com.model.CallLog;
import com.model.QueryInfo;
import com.dao.CallLogDAO;
import com.service.CallLogService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.HashMap;
import java.util.List;@Controller
@RequestMapping("/callLog")
public class CallLogController {@Autowiredpublic CallLogService callLogService;@RequestMapping("/queryCallLogList")public String queryCallLog(Model model, QueryInfo queryInfo){HashMap<String, String> hashMap = new HashMap<String, String>();hashMap.put("telephone", queryInfo.getTelephone());hashMap.put("year", queryInfo.getYear());hashMap.put("month", queryInfo.getMonth());hashMap.put("day", queryInfo.getDay());List<CallLog> list = callLogService.getCallLogList(hashMap);StringBuilder dateSB = new StringBuilder();StringBuilder callSumSB = new StringBuilder();StringBuilder callDurationSumSB = new StringBuilder();for(int i = 0; i < list.size(); i++){CallLog callLog = list.get(i);//1月, 2月, ....12月,dateSB.append(callLog.getMonth() + "月,");callSumSB.append(callLog.getCall_sum() + ",");callDurationSumSB.append(callLog.getCall_duration_sum() + ",");}dateSB.deleteCharAt(dateSB.length() - 1);callSumSB.deleteCharAt(callSumSB.length() - 1);callDurationSumSB.deleteCharAt(callDurationSumSB.length() - 1);//通過model返回數據model.addAttribute("telephone", list.get(0).getTelephone());model.addAttribute("name", list.get(0).getName());model.addAttribute("date", dateSB.toString());model.addAttribute("count", callSumSB.toString());model.addAttribute("duration", callDurationSumSB.toString());return "/CallLogListEchart";}
}
  • 創建User對應的Controller實現類UserController代碼如下：
package com.controller;import com.model.User;
import com.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.cache.annotation.Cacheable;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;@Controller
@RequestMapping("/user")
public class UserController {@Autowiredpublic UserService userService;@RequestMapping("info")@ResponseBodypublic List<User> userInfo() {List<User> userList = userService.getAllUser();System.out.println("------------------------------------------");System.out.println(userList.size());return userList;}
}

2、前端數據展示

  • 在項目導入 js/echarts.min.js文件(文件保存在master1服務器的/opt/software目錄下)
  • 在web.xml文件中導入Spring配置文件，并配置spring監聽器和編碼過濾器等
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"version="3.1"><display-name>SpringMVC_CRUD</display-name><welcome-file-list><welcome-file>jsp/index.jsp</welcome-file></welcome-file-list><servlet><servlet-name>SpringMVC</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/applicationContext*.xml</param-value><!--  <param-value>classpath:bean/applicationContext.xml</param-value>--></init-param><load-on-startup>1</load-on-startup><async-supported>true</async-supported></servlet><servlet-mapping><servlet-name>SpringMVC</servlet-name><url-pattern>*.do</url-pattern></servlet-mapping><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:spring/applicationContext*.xml</param-value></context-param><!-- 編碼過濾器 --><filter><filter-name>encodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param></filter><filter-mapping><filter-name>encodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- spring監聽器 --><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!-- 防止spring內存溢出監聽器，比如quartz --><listener><listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class></listener><session-config><session-timeout>30</session-timeout></session-config></web-app>
  • 編寫jsp/index.jsp頁面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8" %>
<%String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Show Time</title>
</head>
<body>
<form action="callLog/queryCallLogList.do" method="post">手機號碼:<input type="text", name="telephone">年:<input type="text", name="year">月:<input type="text", name="month">日:<input type="text", name="day"><input type="submit" value="查詢">
</form>
</body>
</html>
  • 編寫jsp/CallLogListEchart.jsp
<%--Created by IntelliJ IDEA.User: ZDate: 2017/10/28Time: 14:36To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>顯示通話記錄</title><script type="text/javascript" src="../js/echarts.min.js"></script><%--<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>--%><%--<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.2.0.min.js"></script>--%><%--<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>--%>
</head>
<body style="height: 100%; margin: 0; background-color: #3C3F41">
<style type="text/css">h3 {font-size: 12px;color: #ffffff;display: inline}
</style>
<h4 style="color: #ffffff;text-align:center">通話月單查詢：${requestScope.name}</h4>
<%--<h3 style="margin-left: 70%">通話次數</h3>--%>
<%--<h3 style="margin-left: 20%">通話時長</h3>--%>
<div id="container1" style="height: 80%; width: 50%; float:left"></div>
<div id="container2" style="height: 80%; width: 50%; float:right"></div>
<script type="text/javascript">var telephone = "${requestScope.telephone}"var name = "${requestScope.name}"var date = "${requestScope.date}"//1月,2月,3月,xxxxxvar count = "${requestScope.count}"var duration = "${requestScope.duration}"var pieData = converterFun(duration.split(","), date.split(","))callog1();callog2();function converterFun(duration, date) {var array = [];for (var i = 0; i < duration.length; i++) {var map = {};map['value'] = parseFloat(duration[i]);map['name'] = date[i];array.push(map);}return array;}function callog1() {var dom = document.getElementById("container1");var myChart = echarts.init(dom);myChart.showLoading();var option = {title: {text: '通話次數',textStyle: {//文字顏色color: '#ffffff',//字體風格,'normal','italic','oblique'fontStyle: 'normal',//字體粗細 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...fontWeight: 'bold',//字體系列fontFamily: 'sans-serif',//字體大小fontSize: 13},itemGap: 12,},grid: {x: 80,y: 60,x2: 80,y2: 60,backgroundColor: 'rgba(0,0,0,0)',borderWidth: 1,borderColor: '#ffffff'},tooltip: {trigger: 'axis'},legend: {borderColor: '#ffffff',itemGap: 10,data: ['通話次數'],textStyle: {color: '#ffffff'// 圖例文字顏色}},toolbox: {show: false,feature: {dataZoom: {yAxisIndex: 'none'},dataView: {readOnly: false},magicType: {type: ['line', 'bar']},restore: {},saveAsImage: {}}},xAxis: {data: date.split(","),axisLine: {lineStyle: {color: '#ffffff',width: 2}}},yAxis: {axisLine: {lineStyle: {color: '#ffffff',width: 2}}},series: [{type: 'line',data: count.split(","),itemStyle: {normal: {color: '#ffca29',lineStyle: {color: '#ffd80d',width: 2}}},markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}}]};if (option && typeof option === "object") {myChart.setOption(option, true);}myChart.hideLoading()}function callog2() {var dom = document.getElementById("container2");var myChart = echarts.init(dom);myChart.showLoading();var option = {title: {text: '通話時長',textStyle: {//文字顏色color: '#ffffff',//字體風格,'normal','italic','oblique'fontStyle: 'normal',//字體粗細 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...fontWeight: 'bold',//字體系列fontFamily: 'sans-serif',//字體大小fontSize: 13},itemGap: 12,},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},visualMap: {show: false,min: Math.min.apply(null, duration.split(",")),max: Math.max.apply(null, duration.split(",")),inRange: {colorLightness: [0, 0.5]}},series: [{name: '通話時長',type: 'pie',radius: '55%',center: ['50%', '50%'],data: pieData.sort(function (a, b) {return a.value - b.value;}),roseType: 'radius',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: 0.2,length: 10,length2: 20}},itemStyle: {normal: {color: '#01c1c2',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]};if (option && typeof option === "object") {myChart.setOption(option, true);}myChart.hideLoading()}
</script>
</body>
</html>
  • 創建Spring配置文件，文件位置 resources/spring/applicationContext.xml，可以在此配置關于攔截器和事務
<?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:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:aop="http://www.springframework.org/schema/aop"xmlns:tx="http://www.springframework.org/schema/tx"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://www.springframework.org/schema/aophttp://www.springframework.org/schema/aop/spring-aop.xsdhttp://www.springframework.org/schema/txhttp://www.springframework.org/schema/tx/spring-tx.xsd"><!--自定義攔截器<mvc:interceptors><mvc:interceptor><mvc:mapping path="/*.do"/><bean class="com.twjitm.aop.TwjItmInterceptor"></bean></mvc:interceptor></mvc:interceptors>--><!-- 切入點 --><!--<tx:advice id="transactionAdvice" transaction-manager="transactionManager">&lt;!&ndash; spring事物管理 &ndash;&gt;<tx:attributes><tx:method name="add*" /><tx:method name="save*" /><tx:method name="Save*" /><tx:method name="update*" /><tx:method name="modify*" /><tx:method name="edit*" /><tx:method name="delete*" /><tx:method name="remove*" /><tx:method name="change*" /><tx:method name="repair" /><tx:method name="deleteAndRepair" /><tx:method name="login*" /><tx:method name="get*" propagation="SUPPORTS" /><tx:method name="find*" propagation="SUPPORTS" /><tx:method name="load*" propagation="SUPPORTS" /><tx:method name="search*" propagation="SUPPORTS" /><tx:method name="datagrid*" propagation="SUPPORTS" /><tx:method name="*" propagation="SUPPORTS" /></tx:attributes></tx:advice><aop:config proxy-target-class="true"><aop:pointcut id="transactionPointcut" expression="execution(* com.twjitm.*.service.Impl.*.*(..))" /><aop:advisor pointcut-ref="transactionPointcut"advice-ref="transactionAdvice" /></aop:config>-->
</beans>
  • 創建Mybatis配置文件，文件位置 resources/spring/applicationContext-mybatis.xml
<?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:context="http://www.springframework.org/schema/context"xmlns:tx="http://www.springframework.org/schema/tx"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/txhttp://www.springframework.org/schema/tx/spring-tx.xsd"><context:component-scan base-package="com.service" use-default-filters="false"/><!-- 配置數據庫相關參數properties的屬性：${url} --><context:property-placeholder ignore-unresolvable="true" location="classpath:properties/jdbc.properties"/><!-- 數據庫連接池 --><bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"><property name="driverClass" value="${jdbc.driver}"/><property name="jdbcUrl" value="${jdbc.url}"/><property name="user" value="${jdbc.username}"/><property name="password" value="${jdbc.password}"/><property name="maxPoolSize" value="${c3p0.maxPoolSize}"/><property name="minPoolSize" value="${c3p0.minPoolSize}"/><property name="autoCommitOnClose" value="${c3p0.autoCommitOnClose}"/><property name="checkoutTimeout" value="${c3p0.checkoutTimeout}"/><property name="acquireRetryAttempts" value="${c3p0.acquireRetryAttempts}"/></bean><!-- 配置SqlSessionFactory對象 --><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><!-- 注入數據庫連接池 --><property name="dataSource" ref="dataSource"/><!-- 掃描model包 使用別名 --><property name="typeAliasesPackage" value="com.model"/><!-- 掃描sql配置文件:mapper需要的xml文件 --><property name="mapperLocations" value="classpath:mapper/*.xml"/><property name="configurationProperties"><props><prop key="mapUnderscoreToCamelCase">true</prop></props></property></bean><!-- 配置掃描Dao接口包，動態實現Dao接口，注入到spring容器中 --><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><!-- 注入sqlSessionFactory --><property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/><!-- 給出需要掃描Dao接口包 --><property name="basePackage" value="com.dao"/></bean><!-- 配置事務管理器 --><bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><!-- 注入數據庫連接池 --><property name="dataSource" ref="dataSource"/></bean><!-- 配置基于注解的聲明式事務 --><tx:annotation-driven transaction-manager="transactionManager"></tx:annotation-driven></beans>
  • 創建SpringMVC配置文件，文件位置 resources/spring/applicationContext-spring.xml
<?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:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsd"><context:component-scan base-package="com.*"/><!-- 開啟SpringMVC注解模式 --><mvc:annotation-driven/><!-- 靜態資源默認servlet配置 --><mvc:default-servlet-handler/><bean name="mappingJacksonHttpMessageConverter"class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"><property name="supportedMediaTypes"><list><value>text/html;charset=UTF-8</value></list></property></bean><!-- 啟動SpringMVC的注解功能，完成請求和注解POJO的映射 --><bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"><property name="messageConverters"><list><ref bean="mappingJacksonHttpMessageConverter"/> <!-- JSON轉換器 --></list></property></bean><!-- 定義跳轉的文件的前后綴 ，視圖模式配置 --><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="order" value="1"/><property name="prefix" value="/jsp/" /><property name="suffix" value=".jsp"/></bean><!--這里是對靜態資源的映射--><mvc:resources mapping="/js/**" location="/js/" /><mvc:resources mapping="/css/**" location="/css/" /><mvc:resources mapping="/img/**" location="/img/" /><!-- 文件上傳配置 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!-- 默認編碼 --><property name="defaultEncoding" value="UTF-8"/><!-- 上傳文件大小限制為31M，31*1024*1024 --><property name="maxUploadSize" value="32505856"/><!-- 內存中的最大值 --><property name="maxInMemorySize" value="4096"/></bean>
</beans>

創建JDBC配置文件，文件位置 resources/properties/jdbc.properties

#數據庫配置
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://master1:3306/db_telecom?useUnicode=true&characterEncoding=UTF-8
jdbc.username=root
jdbc.password=Qst@123456
#連接池配置
#最大連接數
c3p0.maxPoolSize=30000
#最小連接數
c3p0.minPoolSize=10
#關閉連接后不自動commit
c3p0.autoCommitOnClose=false
#獲取連接超時時間
c3p0.checkoutTimeout=10000
#當獲取連接失敗重試次數
c3p0.acquireRetryAttempts=2

  • 啟動項目

點擊

按鈕運行Tomcat

運行后如下圖

項目會自動打開Web瀏覽器，輸入“數據生產”中的模擬的手機號和模擬數據對應的日期，如下圖；

點擊“查詢按鈕”，結果如下：

上圖展示的圖表依模擬數據的豐富程度決定，建議在模擬數據時盡量運行的時間長一點，則顯示的圖標將更加豐富。

注：如果運行Tomcat時報錯“java: Compilation failed: internal java compiler error”，則是IDEA的JDK版本與項目的JDK版本不一致，依次點擊【File】->【Settings...】如下圖將項目的JDK修改為【8】后嘗試再次運行

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/39137.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/39137.shtml
英文地址，請注明出處：http://en.pswp.cn/web/39137.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

新疆水博會將舉辦多場高端論壇探析水利科技創新發展

新疆水博會將舉辦多場高端論壇探析水利科技創新發展

由新疆維吾爾自治區水利學會主辦的第三屆新疆國際水利科技博覽會暨新疆水利科技創新發展論壇&#xff0c;將于2024年8月8日至9日在新疆國際會展中心召開&#xff0c;同期將舉辦第三屆新疆國際供排水及智慧水務技術設備展覽會。 據悉&#xff0c;新疆水博會期間將舉辦新疆水利科…
閱讀更多...
springboot旅游管理系統-計算機畢業設計源碼16021

springboot旅游管理系統-計算機畢業設計源碼16021

摘 要 本文旨在設計和實現一個基于Spring Boot框架的旅游管理系統。該系統通過利用Spring Boot的快速開發特性和豐富的生態系統&#xff0c;提供了一個高效、可靠和靈活的解決方案。系統將實現旅游景點信息的管理、線路規劃、跟團游玩、旅游攻略、酒店信息管理、訂單管理和用戶…
閱讀更多...
MySQL—創建和修改數據表結構

MySQL—創建和修改數據表結構

創建表 實例&#xff1a; CREATE TABLE user (id INT,name VARCHAR(255),password VARCHAR(255),birthday DATE) CHARACTER SET utf8 COLLATE utf8_bin ENGINE INNODB; 顯示數據庫中的表 show tables from hsp; 顯示表結構 desc dept; 修改表 實例&#xff1a; 代碼&…
閱讀更多...
Rust破界：前端革新與Vite重構的深度透視（中）

Rust破界：前端革新與Vite重構的深度透視（中）

Rust破界&#xff1a;前端革新與Vite重構的深度透視 Rust 重構 Vite 的深度剖析技術瓶頸與 Rust 的解法實例分析&#xff1a;性能躍升的實踐 Rust 在前端工具鏈的廣泛影響從 Vite 到更廣闊的舞臺成功案例&#xff1a;其他前端項目的 Rust 實踐技術動因與行業趨勢多樣性思考&…
閱讀更多...
第十五章 路由器綜合路由配置

第十五章 路由器綜合路由配置

實驗目標 掌握綜合路由器的配置方法&#xff1b; 掌握查看通過路由重分布學習產生的路由&#xff1b; 熟悉廣域網線纜的鏈接方式&#xff1b; 實驗背景 假設某公司通過一臺三層交換機連到公司出口路由器 R1 上&#xff0c;路由器 R1 再和公司外的另一臺路由器 R2 連接。…
閱讀更多...
C++中using關鍵字介紹

C++中using關鍵字介紹

C中using關鍵字介紹 C中using關鍵字有兩種用法&#xff0c;using 指令&#xff08;Using Directive&#xff09;和using 聲明&#xff08;Using Declaration&#xff09; using 指令影響整個命名空間&#xff0c;using 聲明只影響特定名稱。 using 指令 定義&#xff1a;usi…
閱讀更多...
【Python實戰因果推斷】17_線性回歸的不合理效果7

【Python實戰因果推斷】17_線性回歸的不合理效果7

目錄 Regression for Dummies Conditionally Random Experiments Dummy Variables Regression for Dummies 回歸和正交化固然很好&#xff0c;但歸根結底&#xff0c;你必須做出獨立性假設。你必須假設&#xff0c;在考慮到某些協變量的情況下&#xff0c;干預看起來與隨機分…
閱讀更多...
k8s 常用的命令

k8s 常用的命令

k8s 常用的操作 查找資源 kubectl get&#xff1a; 獲取所有的資源&#xff0c;包括node、namespace、pod 、service、deployment等&#xff0c;可以展示一個或者多個資源。 創建資源 kubectl create &#xff1a;Kubernetes 的清單文件可以用 json 或 yaml 定義。 更新資源 …
閱讀更多...
SQL Error: 1054, SQLState: 42S22

SQL Error: 1054, SQLState: 42S22

SQL 錯誤 1054 通常與 SQL 查詢中的未知列有關&#xff0c;SQLState 42S22表示列未找到錯誤。 解決方式&#xff1a; 檢查列名&#xff1a; 確保您在SQL查詢中使用的列名實際存在于您查詢的表中。可能存在拼寫錯誤或列名錯誤。驗證表名&#xff1a; 確認SQL查詢中的表名是否正…
閱讀更多...
python 獲取Shopee蝦皮商家店鋪商品列表 蝦皮api數據采集

python 獲取Shopee蝦皮商家店鋪商品列表 蝦皮api數據采集

此api接口可用于獲取蝦皮平臺商家店鋪的商品列表&#xff0c;目前land參數支持id、vn、my、th、sg、ph、tw&#xff08;印尼、越南、馬來、泰國、新加坡、菲律賓、臺灣&#xff09;。 若有需要&#xff0c;請點擊文末鏈接聯系我們。 詳細采集頁面如下 https://shopee.tw/yue…
閱讀更多...
使用Adobe Acrobat對PDF文檔進行數字簽名

使用Adobe Acrobat對PDF文檔進行數字簽名

文章目錄 前言一、使用Adobe Acrobat對PDF文檔進行數字簽名1.使用Adobe Acrobat打開需要進行簽名的PDF文檔2. 點擊【查看更多】3.點擊【使用證書】4.點擊【數字簽名】5.使用鼠標選定一個區域6.選擇您需要使用的證書 → 點擊【繼續】7.點擊【簽名】8.簽名成功 前言 一、使用Ado…
閱讀更多...
嵌入式C語言中指針與鏈表的關系詳解

嵌入式C語言中指針與鏈表的關系詳解

假定給你一塊非常小的內存，這塊內存只有8字節，這里也沒有高級語言，沒有操作系統，你操作的數據單位是單個字節，你該怎樣讀寫這塊內存呢？ 注意這里的限定，再讀一遍，沒有高級語言，沒有操作系統，在這樣的限制之下，你必須直面內存讀寫的本質。 這個本質是什么呢？ 本質…
閱讀更多...
C++中constexpr和#define定義常量的區別

C++中constexpr和#define定義常量的區別

在C中&#xff0c;使用 constexpr 來定義常量和使用宏 #define 有幾個關鍵區別&#xff1a; 類型安全&#xff1a;constexpr 常量有類型&#xff0c;宏沒有類型。作用域&#xff1a;constexpr 常量遵循C的作用域規則&#xff0c;而宏是文本替換&#xff0c;不遵循作用域規則。…
閱讀更多...
基于xilinx FPGA的GTX/GTH/GTY位置信息查看方式（如X0Y0在bank幾）

基于xilinx FPGA的GTX/GTH/GTY位置信息查看方式（如X0Y0在bank幾）

目錄 1 概述2 參考文檔3 查看方式4查詢總結&#xff1a; 1 概述 本文用于介紹如何查看xilinx fpga GTX得位置信息&#xff08;如X0Y0在哪個BANK/Quad&#xff09;。 2 參考文檔 《ug476_7Series_Transceivers》 《pg156-ultrascale-pcie-gen3-en-us-4.4》 3 查看方式 通過…
閱讀更多...
語音大模型引領自然交互新時代，景聯文科技推出高質量語音大模型數據庫

語音大模型引領自然交互新時代，景聯文科技推出高質量語音大模型數據庫

近期&#xff0c;OpenAI正式發布語音大模型GPT-4o&#xff0c;可以綜合利用語音、文本和視覺信息進行推理&#xff0c;扮演一個個人語音交互助手。 在音頻處理方面&#xff0c;它不僅能識別和轉錄多種口音和方言&#xff0c;改變語音的速度音調和振動&#xff0c;還能進行聲音模…
閱讀更多...
vue中數據響應式選擇ref還是reactive?

vue中數據響應式選擇ref還是reactive?

vue中響應式選擇ref還是reactive合適 語法上來說&#xff0c;兩者都可以實現響應式&#xff0c;之所以有ref和reactive&#xff0c;是為了更加方便的將不同的數據類型分類處理。 主要區別&#xff1a;reactive只能聲明對象/數組&#xff0c;ref可以響應任意數據類型&#xff…
閱讀更多...
Vue.js 中的 v-if 和 v-show

Vue.js 中的 v-if 和 v-show

Vue.js 中的 v-if 和 v-show&#xff1a;詳細解析與比較 在 Vue.js 中&#xff0c;v-if 和 v-show 是兩個常用的指令&#xff0c;用于控制元素的顯示和隱藏。盡管它們都能達到類似的效果&#xff0c;但它們的工作原理和適用場景有著顯著的區別。本文將深入探討這兩者之間的異同…
閱讀更多...
Codeforces Round 952 (Div. 4) G. D-Function 題解 數學 數論

Codeforces Round 952 (Div. 4) G. D-Function 題解 數學 數論

D-Function 題目描述 Let D ( n ) D(n) D(n) represent the sum of digits of n n n. For how many integers n n n where 1 0 l ≤ n < 1 0 r 10^{l} \leq n < 10^{r} 10l≤n<10r satisfy D ( k ? n ) k ? D ( n ) D(k \cdot n) k \cdot D(n) D(k?n)k?D…
閱讀更多...
mybatisplus新增數據時生成的雪花id太長前端接收不準確怎么辦？

mybatisplus新增數據時生成的雪花id太長前端接收不準確怎么辦？

這是后端返回的&#xff1a;1807308955001573377 這是前端接收的&#xff1a;1807308955001573400 返回的long類型超過前端的最大長度了&#xff0c;渲染不了 只需要在WebMvcConfiguration配置類中重寫方法&#xff0c;如下 Overrideprotected void configureMessageConver…
閱讀更多...
深度學習：C++和Python如何對大圖進行小目標檢測

深度學習：C++和Python如何對大圖進行小目標檢測

最近在醫美和工業兩條線來回穿梭&#xff0c;甚是疲倦&#xff0c;一會兒搞搞醫美的人像美容&#xff0c;一會兒搞搞工業的檢測&#xff0c;最近新接的一個項目&#xff0c;關于瑕疵檢測的&#xff0c;目標圖像也并不是很大吧&#xff0c;需要放大后&#xff0c;才能看見細小的…
閱讀更多...
最新文章

Copyright @ 2022~2023