各位看官大家好，本人小白一枚，最近才开始接触研究比较火热的SpringBoot框架，并自己做了一些简单的整合：SpringBoot+mybatis连接oracle数据库，并整合Echarts显示数据，在此与大家分享一下在此过程中遇到的问题，最后附上完整的实例代码，废话不多说直接上图贴代码：
- 使用Eclipse创建Maven项目（创建过程不再赘述），pom文件导入相关依赖：
<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/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>springboot</groupId> <artifactId>com.springboot-mybatis2</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>com.springboot-mybatis2 Maven Webapp</name> <url>http://maven.apache.org</url> <!-- 核心依赖： --> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.2.RELEASE</version> </parent> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> </dependency> <!-- 支持常规的测试依赖，包括JUnit、Hamcrest、Mockito以及spring-test --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <!-- <version>1.5.2</version> <scope>test</scope> --> </dependency> <!-- Web依赖： --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 热部署 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> <!-- 这个需要为 true 热部署才有效 --> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.2</version> </dependency> <!-- oracle驱动:ojdbc7依赖 --> <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc7</artifactId> <version>12.1.0.2</version> </dependency> <!-- json --> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> <classifier>jdk15</classifier> </dependency> <!-- 导入JSP相关依赖 --> <!-- servlet依赖. --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> </dependency> <!-- 使用jsp引擎，springboot内置tomcat没有此依赖 --> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> <scope>provided</scope> </dependency> <!-- 引入前端框架:echarts和jquery --> <dependency> <groupId>org.webjars.bower</groupId> <artifactId>echarts</artifactId> <version>4.0.4</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1</version> </dependency> </dependencies> <build> <finalName>com.springboot-mybatis2</finalName> </build> </project>注：导入orale相关依赖步骤：
先复制oracle连接的jar包在电脑某个路径下，如：E:\ojdbc7.jar
在DOS窗口下执行以下命令，窗口提示：BUILD SUCESS表示成功，再引入oracle依赖即可；
mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc7 -Dversion=12.1.0.2 -Dpackaging=jar -Dfile=E:\ojdbc7.jar项目结构树如下所示：
2. 在com.springboot包下新建entity包，在entity包下新建一个实体类：student，快捷键Alt+Shift+S,然后选择Generate Getter and Setter
package com.springboot.entity;
public class student {
private String name;
private String math;
private String chinese;
private String language;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMath() {
return math;
}
public void setMath(String math) {
this.math = math;
}
public String getChinese() {
return chinese;
}
public void setChinese(String chinese) {
this.chinese = chinese;
}
public String getLanguage() {
return language;
}
public void setLanguage(String language) {
this.language = language;
}
@Override
public String toString() {
return "student [name=" + name + ", math=" + math + ", chinese=" + chinese + ",
language=" + language + "]";
}
}
3.在com.springboot包下新建mapper包，在mapper包下新建studentMapper接口（注意接口下面的方法名必须与后面配置的mapper文件的SQL下面的id保持一致）：
package com.springboot.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import com.springboot.entity.student;
@Mapper
public interface studentMapper {
public List<student> getStudentInfo();
}
4.在com.springboo包下新建Service包，在Service包下新建:studentSerice接口：
package com.springboot.service;
import java.util.List;
import com.springboot.entity.student;
public interface studentService {
public List<student> getStudentInfo();
}
5.在Service包下新建Imp包，并在Impl包下新建：studentServiceImpl类(相关注解不可少)：
package com.springboot.service.Impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.springboot.entity.student;
import com.springboot.mapper.studentMapper;
import com.springboot.service.studentService;
@Service
public class studentServiceImpl implements studentService {
@Autowired
studentMapper stuMapper;
public List<student> getStudentInfo() {
return stuMapper.getStudentInfo();
}
}
6.在com.springboot包下新建Controller包，并新建studentController类：
package com.springboot.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.springboot.entity.student;
import com.springboot.service.studentService;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
@Controller
public class studentController {
@Autowired
studentService stuService;
@RequestMapping("/getStudentInfo")
public String getInfo(Model model) {
JSONObject obj = new JSONObject();
JSONArray arr = new JSONArray();
List<student> list = stuService.getStudentInfo();
for(int i=0;i<list.size();i++) {
if(list.get(i) != null) {
obj.put("name", list.get(i).getName());
obj.put("math",list.get(i).getMath());
obj.put("language", list.get(i).getLanguage());
obj.put("chinese", list.get(i).getChinese());
arr.add(obj);
}
}
model.addAttribute("stu", arr);
return "student";
}
}
这边使用通过Model接口将Json数据传到前端JSP界面，return直接返回"student.jsp"：
7.com.springboot包下新建启动类：runApplication:
package com.springboot;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class runApplication {
public static void main(String[] args) {
SpringApplication.run(runApplication.class, args);
}
}
8.在/com.springboot-mybatis3/src/main/resources下准备配置文件：application.yaml(配置文件在理解的情况下直接复制粘贴，手打有时候出错)：
spring:
mvc:
view:
prefix: /WEB-INF/views/
suffix: .jsp
datasource:
url: jdbc:oracle:thin:@数据库服务器IP地址:1521:ylorcl
username: 名称
password: 密码
driver-class-name: oracle.jdbc.OracleDriver
mybatis:
mapper-locations: classpath:mapper/*Mapper.xml
type-aliases-package: com.springboot.entity.student9.在/com.springboot-mybatis3/src/main/resources新建mapper文件夹，在该文件夹下新建studenMapper.xml配置文件（注意：在select标签的id必须与上文第3点下studentMapper接口的方法名一致，使用resultMap标签而非resultType标签，result标签下的property的值对应实体类下的变量，column的值对应数据库这张表的字段）
<?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="com.springboot.mapper.studentMapper">
<resultMap type="com.springboot.entity.student" id="student">
<result property="name" column="name" />
<result property="math" column="math" />
<result property="language" column="language" />
<result property="chinese" column="chinese" />
</resultMap>
<select id="getStudentInfo" resultMap="student">
select name,math,language,chinese from student
</select>
</mapper>10.最后在/com.springboot-mybatis3/src/main/webapp/WEB-INF目录下views文件夹（该位置与application.yaml配置的路径一致），在该文件夹下新建JSP文件：student.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超神学生信息列表</title>
<script type="text/javascript" src="/webjars/echarts/4.0.4/dist/echarts.js"></script>
<script type="text/javascript" src="/webjars/echarts/4.0.4/dist/echarts.common.min.js"></script>
<script type="text/javascript" src="/webjars/jquery/3.3.1/jquery.js"></script>
<style type="text/css">
#main{
width: 850px;
height: 600px;
position:absolute;
top:40%;
left:50%;
margin:-300px 0 0 -425px;
</style>
</head>
<body>
<!-- 将后面mode传过来的值存放在input输入框中 -->
<input id = "stuURL" type="hidden" th:value = '${stu}'/>
<div id="main"></div>
<script th:inline="javascript">
var dataArr = ${stu};
var dataInfo = [dataArr.length];
var dataLegend = [dataArr.length];
for(var i=0;i<dataArr.length;i++){
dataInfo[i] = {value:dataArr[i].math,name:dataArr[i].name};
dataLegend[i] = dataArr[i].name
}
//整合echarts画图
var myCharts = echarts.init(document.getElementById('main'), 'echartsTheme');
var dataSeries = [
{
name:'战斗力',
type:'pie',
radius:'70%',
center:['50%','60%'],
label:{
formatter:'{a}:{b}-{c}',
fontSize:'100%'
},
data:dataInfo,
itemStyle:{
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
//指定图表的配置项和数据
var option = {
title:{
text:'战斗力评比',
x:'center',
top:'3%',
textStyle:{
fontSize: '200%'
}
},
//提示框，鼠标悬停时显示当前信息
tooltip:{
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color:['#4CB4E7','#FFC09F','#FFEE93','#E2DBBE','#C7B3E5','#BAD4AA'],
legend:[
{
orient: 'horizontal',
//top:'middle',
y:'70px',
data:dataLegend
}
],
series:dataSeries
};
myCharts.setOption(option);
</script>
</body>
</html>在Chrome浏览器输入：http://localhost:8080/getStudentInfo，效果图如下：
1656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
