数据可视化

已于 2023-03-26 17:04:27 修改
阅读量858 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 大数据实训 文章标签： 数据库 大数据 sqoop centos echarts
于 2022-10-20 00:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53488289/article/details/127397360
本文详细介绍了如何通过Navicat连接数据库并创建关系型数据库，然后利用Sqoop进行数据迁移。接着，文章重点讲解了使用Echarts进行数据可视化的过程，包括职位区域分布、薪资分布、福利标签词云图和技能标签词云图的实现。最后，讨论了页面展示的步骤，涉及启动mariadb和tomcat，并展示了页面访问地址。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、数据迁移

1.使用Navicat 15 for MySQL ，连接数据库，新建查询

2.创建关系型数据库

3.通过 Sqoop 实现数据迁移

4.查看数据 

二、数据可视化

1.实现职位区域分布展示

1.1CityPojo.java

1.2CityMapper.java

 1.3CityMapper.xml

1.4CityService.java

1.5 CityServiceImpl.java

1.6 IndexController.java

1.7 echarts-view.js

2.实现薪资分布展示

2.1 SalaryPojo.java

2.2 SalaryMapper.java

2.3 SalaryMapper.xml

2.4 SalaryService.java

2.5 SalaryServiceImpl.java

2.6 IndexController.java

2.7 echarts-view.js

3.实现福利标签词云图

3.1 CompanyPojo.java

3.2 CompanyMapper.java

3.3 CompanyMapper.xml

3.4 CompanyService.java

3.5 CompanyServiceImpl.java

3.6 IndexController.java

3.7 echarts-view.js

4.实现技能标签词云图

4.1 KillPojo.java

4.2 KillMapper.java

4.3 CompanyMapper.xml

4.4 KillService.java

4.5 KillServiceImpl.java

4.6 IndexController.java

4.7 echarts-view.js

 5.springmvc.xml 

6.applicationContext.xml 

7.web.xml

8.db.properties

9.mybatis-Config.xml

 10.pom.xml 

三、页面展示

1.打开idea,做好准备工作

 ​编辑

2.启动mariadb

3.启动tomcat4.

4.在跳转的页面中输入

http://localhost:8080/job_web_war/index.html  

5查看页面

一、数据迁移

1.使用Navicat 15 for MySQL ，连接数据库，新建查询

2.创建关系型数据库

CREATE DATABASE JobData CHARACTER SET utf8 COLLATE utf8_general_ci;


CREATE TABLE t_city_count(
city varchar(30) DEFAULT NULL,
count int(5) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


CREATE TABLE t_salary_dist(
salary varchar(30) DEFAULT NULL,
count int(5) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


CREATE TABLE t_company_count(
company varchar(30) DEFAULT NULL,
count int(5) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


CREATE TABLE t_kill_count(
kills varchar(30) DEFAULT NULL,
count int(5) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3.通过 Sqoop 实现数据迁移

[root@hadoop1 ~]# cd /usr/local/sqoop/

bin/sqoop export \
--connect jdbc:mysql://hadoop1:3306/JobData?characterEncoding=UTF-8 \
--username root \
--password 123456 \
--table t_city_count \
--columns "city,count" \
--fields-terminated-by ',' \
--export-dir /user/hive/warehouse/jobdata.db/t_ods_city


bin/sqoop export \
--connect jdbc:mysql://hadoop1:3306/JobData?characterEncoding=UTF-8 \
--username root \
--password 123456 \
--table t_salary_dist \
--columns "salary,count" \
--fields-terminated-by ',' \
--export-dir /user/hive/warehouse/jobdata.db/t_ods_salary

bin/sqoop export \
--connect jdbc:mysql://hadoop1:3306/JobData?characterEncoding=UTF-8 \
--username root \
--password 123456 \
--table t_company_count \
--columns "company,count" \
--fields-terminated-by ',' \
--export-dir /user/hive/warehouse/jobdata.db/t_ods_company

bin/sqoop export \
--connect jdbc:mysql://hadoop1:3306/JobData?characterEncoding=UTF-8 \
--username root \
--password 123456 \
--table t_kill_count \
--columns "kills,count" \
--fields-terminated-by ',' \
--export-dir /user/hive/warehouse/jobdata.db/t_ods_kill

4.查看数据 

二、数据可视化

1.实现职位区域分布展示

1.1CityPojo.java

package cn.itcast.pojo;

public class CityPojo {
	private String city;
	private int count;
	public String getCity() {
		return city;
	}
	public void setCity(String city) {
		this.city = city;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
	@Override
	public String toString() {
		return "{\"name\":\"" + city 
				+ "\", \"value\":" 
				+ String.valueOf(count) + "}";
	}
}

1.2CityMapper.java

package cn.itcast.mapper;

import java.util.List;
import cn.itcast.pojo.CityPojo;

public interface  CityMapper {
	public List<CityPojo> selectCity();
}

 1.3CityMapper.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">
<mapper namespace="cn.itcast.mapper.CityMapper">
	<select id="selectCity" resultType="cn.itcast.pojo.CityPojo">
		select * 
		from t_city_count ORDER BY count;
	</select>
</mapper>

1.4CityService.java

package cn.itcast.service;

public interface CityService {
	public String getCityData();
}

1.5 CityServiceImpl.java

package cn.itcast.service.impl;

import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import cn.itcast.mapper.CityMapper;
import cn.itcast.pojo.CityPojo;
import cn.itcast.service.CityService;

@Service
public class CityServiceImpl implements CityService {	
	@Autowired
	private CityMapper mapper;
	@Transactional
	public String getCityData() {
		List<CityPojo> lists = mapper.selectCity();
		List<String> resultData = new ArrayList<String>();
		for (CityPojo cityPojo : lists) {
			resultData.add(cityPojo.toString());
		}
		ObjectMapper om = new ObjectMapper();
		String beanJson = null;
		try {
			beanJson = om.writeValueAsString(resultData);
		} catch (JsonProcessingException e) {
			e.printStackTrace();
		}
		return beanJson;
	}
}

1.6 IndexController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.itcast.service.CityService;
@Controller
public class IndexController {
	@Autowired
	private CityService cityService;
	
	@RequestMapping("/index")
	public String showIndex() {
		return "index";
	}
	
	@RequestMapping(value = "/city", produces = "application/json;charset=UTF-8")
	@ResponseBody
	public String getCity() {
		String data = cityService.getCityData();
		return data;
	}
}

1.7 echarts-view.js


function city(){
	var JsonSeries = [];
	document.getElementById("dataView").className = 'general';
	var dataViewcharts
		=echarts.init(document.getElementById('dataView'));
	var dataViewoption = {
	 title : {
	        text: '职位区域分布',
	        subtext: '',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient : 'vertical',
	        x : 'left',
	        data:[]
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {
	                show: true, 
	                type: ['pie', 'funnel'],
	                option: {
	                    funnel: {
	                        x: '25%',
	                        width: '50%',
	                        funnelAlign: 'left',
	                        max: 1548
	                    }
	                }
	            },
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    series : [
	        {
	            name:'职位所在区域',
	            type:'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:[]
	        }]
		};

	$.get('http://localhost:8080/city').done(function(data) {
		data.forEach(function(element) {
			JsonSeries.push(JSON.parse(element));	
		});
		dataViewoption.series[0].data = JsonSeries;
		dataViewoption.legend.data = JsonSeries;
		dataViewcharts.clear();
		dataViewcharts.setOption(dataViewoption);
	});		
}

2.实现薪资分布展示

2.1 SalaryPojo.java

public class SalaryPojo {
	private String salary;
	private int count;
	public String getSalary() {
		return salary;
	}
	public void setSalary(String salary) {
		this.salary = salary;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}	
	@Override
	public String toString() {
		return "{\"name\":\"" + salary 
				+ "\", \"value\":" 
				+ String.valueOf(count) + "}";
	}
}

2.2 SalaryMapper.java

package cn.itcast.mapper;

import java.util.List;
import cn.itcast.pojo.SalaryPojo;

public interface SalaryMapper {
	public List<SalaryPojo> selectSalary();
}

2.3 SalaryMapper.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">
<mapper namespace="cn.itcast.mapper.SalaryMapper">
	<select id="selectSalary" resultType="cn.itcast.pojo.SalaryPojo">
		select * from t_salary_dist ORDER BY salary;
	</select>
</mapper>

2.4 SalaryService.java

public interface SalaryService {
	public String getSalaryData();
}

2.5 SalaryServiceImpl.java

import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import cn.itcast.mapper.SalaryMapper;
import cn.itcast.pojo.SalaryPojo;
import cn.itcast.service.SalaryService;
@Service
public class SalaryServiceImpl implements SalaryService {
	@Autowired
	private SalaryMapper mapper;
	@Transactional
	public String getSalaryData() {
		List<SalaryPojo> lists = mapper.selectSalary();
		List<String> resultData = new ArrayList<String>();
		for (SalaryPojo salaryPojo : lists) {
			resultData.add(salaryPojo.toString());
		}	
		ObjectMapper om = new ObjectMapper();
		String beanJson = null;
		try {
			beanJson = om.writeValueAsString(resultData);
		} catch (JsonProcessingException e) {
			e.printStackTrace();
		}
		return beanJson;
	}
}

2.6 IndexController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.itcast.service.CityService;
@Controller
public class IndexController {
	@Autowired
	private SalaryService salaryService;
	
	@RequestMapping(value = "/salary", 
			produces = "application/json;charset=UTF-8")
	@ResponseBody
	public String getSalary() {
		String data = salaryService.getSalaryData();
		return data;
	}
	}
}

2.7 echarts-view.js


function salary(){
	document.getElementById("dataView").className = 'general';
	var dataViewcharts
		=echarts.init(document.getElementById('dataView'));
		var dataViewoption = {
				 title : {
				        text: '全国大数据职位薪资区间分布',
				        subtext: ''
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['薪资区间']
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            data : []
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'薪资区间',
				            type:'bar',
				            data:[],
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            }
				        }]
			};
	var JsonxAxis = [];
	var JsonSeries = [];	

	$.get('http://localhost:8080/salary').done(function(data) {
		data.forEach(function(element) {
			for(var key in JSON.parse(element)){
				if(key == 'name'){
					JsonxAxis.push(JSON.parse(element)[key]);
				}else{
					JsonSeries.push(JSON.parse(element)[key]);
				}		
			}
		});
		dataViewoption.xAxis[0].data = JsonxAxis;
		dataViewoption.series[0].data = JsonSeries;
		dataViewcharts.clear();
		dataViewcharts.setOption(dataViewoption);
	});	
}

3.实现福利标签词云图

3.1 CompanyPojo.java

public class CompanyPojo {
	private int count;
	private String company;
	
	public String getCompany() {
		return company;
	}
	public void setCompany(String company) {
		this.company = company;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
	@Override
	public String toString() {
		return "{\"name\":\"" + company 
				+ "\", \"value\":" 
				+ String.valueOf(count) + "}";
	}
}

3.2 CompanyMapper.java

import java.util.List;
import cn.itcast.pojo.CompanyPojo;

public interface CompanyMapper {
	public List<CompanyPojo> selectCompany();
}

3.3 CompanyMapper.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">
<mapper namespace="cn.itcast.mapper.CompanyMapper">
	<select id="selectCompany" resultType="cn.itcast.pojo.CompanyPojo">
		select * from t_company_count;
	</select>
</mapper>

3.4 CompanyService.java

public interface CompanyService {
	public String getCompanyData();
}

3.5 CompanyServiceImpl.java

import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import cn.itcast.mapper.CompanyMapper;
import cn.itcast.pojo.CompanyPojo;
import cn.itcast.service.CompanyService;
@Service
public class CompanyServiceImpl implements CompanyService {
	@Autowired
	private CompanyMapper mapper;
	@Transactional
	public String getCompanyData(){
		
		List<CompanyPojo> lists = mapper.selectCompany();
		List<String> resultData = new ArrayList<String>();
		for (CompanyPojo companyPojo : lists) {
			resultData.add(companyPojo.toString());
		}	
		ObjectMapper om = new ObjectMapper();
		String beanJson = null;
		try {
			beanJson = om.writeValueAsString(resultData);
		} catch (JsonProcessingException e) {
			e.printStackTrace();
		}
		return beanJson;
	}
}

3.6 IndexController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.itcast.service.CityService;
@Controller
public class IndexController {
	@Autowired
	private CompanyService companyService;

	@RequestMapping(value = "/company",
			produces = "application/json;charset=UTF-8")
	@ResponseBody
	public String getCompany() {
		String data = companyService.getCompanyData();
		return data;
	}
}

3.7 echarts-view.js


function company(){
	document.getElementById("dataView").className = 'general';
	var dataViewcharts
		=echarts.init(document.getElementById('dataView'));
		var dataViewoption = {
			    title: {
			        text: '福利标签分析',
			        x: 'center',
			        textStyle: {
			            fontSize: 23,
			            color:'#FFFFFF'
			        }
			    },
			    tooltip: {
			        show: true
			    },
			    series: [{
			        name: '福利标签分析',
			        type: 'wordCloud',
			        sizeRange: [6, 66],
			        rotationRange: [-45, 90],
			        textPadding: 0,
			        autoSize: {
			            enable: true,
			            minSize: 6
			        },
			        textStyle: {
			            normal: {
			                color: function() {
			                    return 'rgb(' + [
			                        Math.round(Math.random() * 160),
			                        Math.round(Math.random() * 160),
			                        Math.round(Math.random() * 160)
			                    ].join(',') + ')';
			                }
			            },
			            emphasis: {
			                shadowBlur: 10,
			                shadowColor: '#333'
			            }
			        },
			        data: []
			    }]
			};
	var JosnList = [];
	

	$.get('http://localhost:8080/company').done(function(data) {
		data.forEach(function(element) {
			JosnList.push(JSON.parse(element));
			});
		dataViewoption.series[0].data = JosnList;
		dataViewcharts.clear();
		dataViewcharts.setOption(dataViewoption);
	});	
}

4.实现技能标签词云图

4.1 KillPojo.java

public class KillPojo {
	private String kills;
	private int count;
	public String getKills() {
		return kills;
	}
	public void setKills(String kills) {
		this.kills = kills;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
	@Override
	public String toString() {
		return "{\"name\":\"" + kills 
				+ "\", \"value\":" 
				+ String.valueOf(count) + "}";
	}
}

4.2 KillMapper.java

import java.util.List;
import cn.itcast.pojo.KillPojo;

public interface KillMapper {
	public List<KillPojo> selectKill();
}

4.3 CompanyMapper.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">
<mapper namespace="cn.itcast.mapper.KillMapper">
	<select id="selectKill" resultType="cn.itcast.pojo.KillPojo">
		select * from t_kill_count;
	</select>
</mapper>

4.4 KillService.java

public interface KillService {
	public String getKillData();
}

4.5 KillServiceImpl.java

import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import cn.itcast.mapper.KillMapper;
import cn.itcast.pojo.KillPojo;
import cn.itcast.service.KillService;
@Service
public class KillServiceImpl implements KillService {
	@Autowired
	private KillMapper mapper;
	@Transactional
	public String getKillData() {
		List<KillPojo> lists = mapper.selectKill();
		List<String> resultData = new ArrayList<String>();
		for (KillPojo killPojo : lists) {
			resultData.add(killPojo.toString());
		}	
		ObjectMapper om = new ObjectMapper();
		String beanJson = null;
		try {
			beanJson = om.writeValueAsString(resultData);
		} catch (JsonProcessingException e) {
			e.printStackTrace();
		}
		return beanJson;
	}
}

4.6 IndexController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.itcast.service.CityService;
@Controller
public class IndexController {
	@Autowired
	private KillService killService;
	@RequestMapping(value = "/kill",
			produces = "application/json;charset=UTF-8")
	@ResponseBody
	public String getKill() {
		String data = killService.getKillData();
		return data;
	}
}

4.7 echarts-view.js


function kill(){
	document.getElementById("dataView").className = 'general';
	var dataViewcharts
		=echarts.init(document.getElementById('dataView'));
		var dataViewoption = {
			    title: {
			        text: '技能标签分析',
			        x: 'center',
			        textStyle: {
			            fontSize: 23,
			            color:'#FFFFFF'
			        }
			    },
			    tooltip: {
			        show: true
			    },
			    series: [{
			        name: '技能标签分析',
			        type: 'wordCloud',
			        sizeRange: [6, 66],
			        rotationRange: [-45, 90],
			        textPadding: 0,
			        autoSize: {
			            enable: true,
			            minSize: 6
			        },
			        textStyle: {
			            normal: {
			                color: function() {
			                    return 'rgb(' + [
			                        Math.round(Math.random() * 160),
			                        Math.round(Math.random() * 160),
			                        Math.round(Math.random() * 160)
			                    ].join(',') + ')';
			                }
			            },
			            emphasis: {
			                shadowBlur: 10,
			                shadowColor: '#333'
			            }
			        },
			        data: []
			    }]
			};
	var JosnList = [];
	
	$.get('http://localhost:8080/kill').done(function(data) {
		data.forEach(function(element) {
			JosnList.push(JSON.parse(element));
			});
		dataViewoption.series[0].data = JosnList;
		dataViewcharts.clear();
		dataViewcharts.setOption(dataViewoption);
	});	
}

 5.springmvc.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:p="http://www.springframework.org/schema/p"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context-4.2.xsd">
    <context:component-scan base-package="cn.itcast.controller" />
    <mvc:annotation-driven />
    <bean
    class=
    "org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
    </bean>
        <mvc:resources location="/css/" mapping="/css/**"/>
        <mvc:resources location="/js/" mapping="/js/**"/>
        <mvc:resources location="/assets/" mapping="/assets/**"/>
        <mvc:resources location="/img/" mapping="/img/**"/>
    </beans>

6.applicationContext.xml 

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:context="http://www.springframework.org/schema/context" 
 xmlns:p="http://www.springframework.org/schema/p"
 xmlns:aop="http://www.springframework.org/schema/aop" 
 xmlns:tx="http://www.springframework.org/schema/tx"
 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-4.2.xsd
 http://www.springframework.org/schema/context
 http://www.springframework.org/schema/context/spring-context-4.2.xsd
 http://www.springframework.org/schema/aop 
 http://www.springframework.org/schema/aop/spring-aop-4.2.xsd
 http://www.springframework.org/schema/tx 
 http://www.springframework.org/schema/tx/spring-tx-4.2.xsd
 http://www.springframework.org/schema/util 
 http://www.springframework.org/schema/util/spring-util-4.2.xsd">
    <context:property-placeholder 
		location="classpath:properties/db.properties" />
 <bean id="dataSource" 
		class="com.alibaba.druid.pool.DruidDataSource"        
		destroy-method="close">
       <property name="url" value="${jdbc.url}" />
       <property name="username" value="${jdbc.username}" />
       <property name="password" value="${jdbc.password}" />
       <property name="driverClassName" value="${jdbc.driver}" />
       <property name="maxActive" value="10" />
       <property name="minIdle" value="5" />
  </bean>

  <bean id="sqlSessionFactory" 
		class="org.mybatis.spring.SqlSessionFactoryBean">
      <property name="dataSource" ref="dataSource" />

      <property name="configLocation" 
				value="classpath:mybatis/mybatis-config.xml" />
  </bean>
  <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
      <property name="basePackage" value="cn.itcast.mapper" />
  </bean>
  <bean id="transactionManager" 
		class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
      <property name="dataSource" ref="dataSource" />
  </bean>
  <tx:advice id="txAdvice" transaction-manager="transactionManager">
      <tx:attributes>
          <tx:method name="save*" propagation="REQUIRED" />
          <tx:method name="insert*" propagation="REQUIRED" />
          <tx:method name="add*" propagation="REQUIRED" />
          <tx:method name="create*" propagation="REQUIRED" />
          <tx:method name="delete*" propagation="REQUIRED" />
          <tx:method name="update*" propagation="REQUIRED" />
          <tx:method name="find*" 
					propagation="SUPPORTS" 
					read-only="true" />
              <tx:method name="select*" 
						propagation="SUPPORTS" 
						read-only="true" />
              <tx:method name="get*" 
						propagation="SUPPORTS" 
						read-only="true" />
          </tx:attributes>
      </tx:advice>
      <aop:config>
          <aop:advisor advice-ref="txAdvice" 
						pointcut="execution(* cn.itcast.service..*.*(..))" />
      </aop:config>
      <context:component-scan base-package="cn.itcast.service" />
</beans>

7.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
    <display-name>job-web</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/applicationContext.xml</param-value>
    </context-param>
    <listener>
        <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>
    <filter>
        <filter-name>CharacterEncodingFilter</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>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <servlet>
        <servlet-name>data-report</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring/springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>data-report</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <error-page>
        <error-code>404</error-code>
        <location>/WEB-INF/jsp/404.jsp</location>
    </error-page>
</web-app>

8.db.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://hadoop1:3306/JobData?characterEncoding=utf-8
jdbc.username=root
jdbc.password=123456

9.mybatis-Config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
</configuration>

 10.pom.xml 

<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.itcast.jobanalysis</groupId>
  <artifactId>job-web</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <dependencies>
  	<dependency>
	    <groupId>org.codehaus.jettison</groupId>
	    <artifactId>jettison</artifactId>
	    <version>1.1</version>
	</dependency>

  	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-context</artifactId>
		<version>4.2.4.RELEASE</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-beans</artifactId>
		<version>4.2.4.RELEASE</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-webmvc</artifactId>
		<version>4.2.4.RELEASE</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-jdbc</artifactId>
		<version>4.2.4.RELEASE</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-aspects</artifactId>
		<version>4.2.4.RELEASE</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-jms</artifactId>
		<version>4.2.4.RELEASE</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-context-support</artifactId>
		<version>4.2.4.RELEASE</version>
	</dependency>
	<dependency>
		<groupId>org.mybatis</groupId>
		<artifactId>mybatis</artifactId>
		<version>3.2.8</version>
	</dependency>
	<dependency>
		<groupId>org.mybatis</groupId>
		<artifactId>mybatis-spring</artifactId>
		<version>1.2.2</version>
	</dependency>
	<dependency>
		<groupId>com.github.miemiedev</groupId>
		<artifactId>mybatis-paginator</artifactId>
		<version>1.2.15</version>
	</dependency>
	<dependency>
		<groupId>mysql</groupId>
		<artifactId>mysql-connector-java</artifactId>
		<version>5.1.32</version>
	</dependency>
	<dependency>
		<groupId>com.alibaba</groupId>
		<artifactId>druid</artifactId>
		<version>1.0.9</version>
		<exclusions>
				<exclusion>
					<groupId>com.alibaba</groupId>
					<artifactId>jconsole</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.alibaba</groupId>
					<artifactId>tools</artifactId>
				</exclusion>
			</exclusions>
	</dependency>
	<dependency>
		<groupId>jstl</groupId>
		<artifactId>jstl</artifactId>
		<version>1.2</version>
	</dependency>
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>servlet-api</artifactId>
		<version>2.5</version>
		<scope>provided</scope>
	</dependency>
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jsp-api</artifactId>
		<version>2.0</version>
		<scope>provided</scope>
	</dependency>
	<dependency>
		<groupId>junit</groupId>
		<artifactId>junit</artifactId>
		<version>4.12</version>
	</dependency>
	<dependency>
		<groupId>com.fasterxml.jackson.core</groupId>
		<artifactId>jackson-databind</artifactId>
		<version>2.4.2</version>
	</dependency>
	<dependency>
	   <groupId>org.aspectj</groupId>
	   <artifactId>aspectjweaver</artifactId>
	   <version>1.8.4</version>
  	</dependency>
</dependencies>
<build>
	<finalName>${project.artifactId}</finalName>
	<resources>
		<resource>
			<directory>src/main/java</directory>
			<includes>
				<include>**/*.properties</include>
				<include>**/*.xml</include>
			</includes>
			<filtering>false</filtering>
		</resource>
		<resource>
			<directory>src/main/resources</directory>
			<includes>
				<include>**/*.properties</include>
				<include>**/*.xml</include>
			</includes>
			<filtering>false</filtering>
		</resource>
	</resources>
	<plugins>
		<plugin>
			<groupId>org.apache.maven.plugins</groupId>
			<artifactId>maven-compiler-plugin</artifactId>
			<version>3.2</version>
			<configuration>
				<source>1.8</source>
				<target>1.8</target>
				<encoding>UTF-8</encoding>
			</configuration>
		</plugin>
	</plugins>
</build>
</project>

三、页面展示

1.打开idea,做好准备工作

 

 

 

2.启动mariadb

[root@hadoop1 ~]# systemctl start mariad

3.启动tomcat4.

4.在跳转的页面中输入

http://localhost:8080/job_web_war/index.html  

5查看页面

数据库 可视化工具
10-30
mysql数据库 可视化工具，需要的下载 非常好用，破解版的
数据库的可视化
热门推荐
weixin_45931409的博客
06-18 1万+
数据可视化太丑？ECharts 图表的 5 种美化技巧
最新发布
聚焦学生开发者需求，分享课设毕设项目实战经验、系统开发技巧、数据库设计规范及文档排版实用方法。
05-27 884
本文分享了5种简单实用的ECharts图表美化技巧：1)自定义统一配色方案；2)开启平滑曲线和渐变底色增强可视化效果；3)添加加载动画提升交互体验；4)优化标题、图例等元素提高可读性；5)将图表放入卡片容器使页面更专业。还推荐使用schooltools.cn的辅助工具来帮助规划数据可视化结构。这些技巧能让课设项目的图表展示更美观专业，提升整体观感质量。
MySQL-学习笔记与个人总结
Chen__yu的博客
09-09 455
登录和退出MySQL服务器 # 登录MySQL $ mysql -u root -p12345612 # 退出MySQL数据库服务器 exit; 基本语法 -- 显示所有数据库 show databases; -- 创建数据库 CREATE DATABASE test; -- 切换数据库 use test; -- 显示数据库中的所有表 show tables; -- 创建数据表 CREATE TABLE pet ( name VARCHAR(20), owner V...
《MySQL数据库》 可视化工具的使用—/—＜3＞
wx_AHao1004Y的博客
08-08 4041
内容不多，扫一眼即可，简单快捷
什么是数据可视化
xiaodaitongxue的博客
07-06 1596
什么是数据可视化 可以将数据可视化简要分为以下几类： 统计数据、关系数据、地理空间数据、时间序列数据以及文本数据可视化 数据可视化的分类 统计数据可视化 https://new.qq.com/rain/a/20200610A088WX https://buckets.peterbeshai.com/app/#/playerView/201935_2015 关系数据可视化 http://fms.news.cn/swf/2017_sjxw/zhouqi/PC/index.html http://fms.n
Python数据可视化分析大作业-全国高校数据分析与可视化（源码 + 文档）.zip
09-03
在本项目中，"Python数据可视化分析大作业-全国高校数据分析与可视化" 是一个全面的实践教程，旨在通过Python编程语言来探索和呈现全国高校的数据。这个项目涵盖了数据科学的关键步骤，从数据预处理到最终的可视化...
R语言数据分析与数据可视化随身手册 R Studio数据分析编程 ggplot2数据可视化 速查表 精编版.pdf
07-02
R语言数据分析与数据可视化随身手册 R语言是一种广泛应用于数据分析和数据可视化的编程语言。RStudio是一个集成开发环境（IDE），提供了交互式的开发体验，支持数据分析、数据可视化和报告生成。ggplot2是一个基于...
基于Python实现猫眼电影数据爬取+数据分析+数据可视化（期末大作业）
06-13
基于Python实现猫眼电影数据爬取+数据分析+数据可视化（期末大作业）基于Python实现猫眼电影数据爬取+数据分析+数据可视化（期末大作业）基于Python实现猫眼电影数据爬取+数据分析+数据可视化（期末大作业）基于...
99套数据可视化源码.zip
05-02
99套数据可视化源码 99套数据可视化源码 99套数据可视化源码 99套数据可视化源码 99套数据可视化源码 99套数据可视化源码 99套数据可视化源码 99套数据可视化源码 99套数据可视化源码 99套数据可视化源码 ...
Python数据可视化任务教程（微课版）配套教案
02-25
《Python数据可视化任务教程（微课版）》是由郑丹青编著的一本专注于Python数据可视化的教材，其配套教案提供了丰富的教学资源，旨在帮助学习者深入理解和掌握Python在数据可视化领域的应用。这本书的标签表明它适合...
Navicat----数据库可视化工具
08-20
数据库可视化工具，可用从网上搜的激活码激活，亲测可用
SQL数据库可视化工具
03-06
数据库可视化工具，可查看表 视图 存储过程，修改表数据。
强大的数据库可视化工具，支持多种数据库
08-01
在是一个强大的数据库可视化工具,同时集成了mysql，oracle等多种主流数据库。。。。。。。。。。。。。。。
一款可视化数据库链接工具
08-03
一款可以链接任何数据库的可视化工具，包括，sqlserver,mysql,access,db2,oracle,odata,odbc,dbase,foxprd,sqlce,sqlazure等等等等
mysql（数据库）可视化工具——Navicat Premium
weixin_66547608的博客
06-01 1988
新手小白必入，从零开始教你，有详细图解。
常见数据库可视化工具【MySql、Oracel...】【Navicat...】
2301_76212351的博客
04-04 1万+
数据库可视化工具 客户端 【MSQL、Oracel...】【Navicat、DBeaver...】
数据可视化实战【mysql+pyecharts+web】
weixin_53144783的博客
05-10 3113
本次文章记录数据可视化第一次实战
Python爬虫数据可视化分析项目详解
在这个任务中，需要解析的文件是关于一个Python爬虫及其数据可视化分析的项目压缩包。根据提供的文件信息，我们将深入了解以下知识点： 1. Python编程语言基础：Python是一种广泛使用的高级编程语言，以其可读性强...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风--明月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值