08-Easyui-SpringMVC-MyBatisPlus
目录：
1、创建Maven项目并完成数据库获取数据
2、配置SpringMVC
3、实现MVC请求
4、数据对接
5、完成添加数据
1、创建Maven项目并完成数据库获取数据
创建数据库（spring-mybatisplus-yh）和表（tb_door）
导入jar包
<dependencies>
<!-- mp 依赖 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus</artifactId>
<version>2.3</version>
</dependency>
<!--junit 测试-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.9</version>
</dependency>
<!-- 数据源 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.10</version>
</dependency>
<!-- 数据库驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.37</version>
</dependency>
<!-- spring -->
<!-- spring-orm :用来提供数据库框架操作的统一接口-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>4.3.14.RELEASE</version>
</dependency>
<!-- 提供MVC支持 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.9.RELEASE</version>
</dependency>
<!-- Lombok：简化JavaBean。如get/set/toString等方法的编写。 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.10</version>
</dependency>
<!--json包：jackson-databind用来 数据绑定-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.5.4</version>
</dependency>
</dependencies>配置jdbc.properties
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql:///spring-mybatisplus-yh?useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=root配置数据库相关配置spring-dao.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:aop="http://www.springframework.org/schema/aop" xmlns:context="http://www.springframework.org/schema/context"
xmlns:jee="http://www.springframework.org/schema/jee" xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-4.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">
<!-- 配置整合mybatis-plus过程 -->
<!-- 1、配置数据库相关参数properties的属性：${url} -->
<context:property-placeholder location="classpath:jdbc.properties" />
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<property name="url" value="${jdbc.url}"></property>
<property name="username" value="${jdbc.username}"></property>
<property name="password" value="${jdbc.password}"></property>
</bean>
<!-- mybatis的sqlsessionFactorybean：org.mybatis.spring.SqlSessionFactoryBean -->
<!-- 3、配置mybatis-plus的sqlSessionFactory -->
<bean id="sqlSessionFactory"
class="com.baomidou.mybatisplus.spring.MybatisSqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:mybatis-config.xml" />
<property name="typeAliasesPackage" value="com.jt.entity" />
</bean>
<!-- 4、DAO接口所在包名，Spring会自动查找其下的类 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.jt.dao" />
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
</bean>
</beans>配置mybatis的Mapper映射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>创建实体类和Mapper接口
Door.java
package com.jt.entity;
import java.io.Serializable;
import com.baomidou.mybatisplus.activerecord.Model;
/**
* @Data:提供了get().set(),equals(),hashCode(),toString()方法,不可连续点方法
* @Accessors（访问器）:用来配置lombok如何产生和显示getters和setters的方法，可连续点方法
* fluent = true:使用fluent属性，getter和setter方法的方法名都是属性名，且setter方法返回当前对象
* chain = true :使用chain属性，setter方法返回当前对象
* prefix = “f” :使用prefix属性，getter和setter方法会忽视属性名的指定前缀（遵守驼峰命名）
* @EqualsAndHashCode(callSuper=true):默认子类不会包含或者考虑基类的属性
* @TableName:指定表名
*/
import com.baomidou.mybatisplus.annotations.TableField;
import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baomidou.mybatisplus.enums.IdType;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;
@Data
@EqualsAndHashCode(callSuper=true)
@Accessors(chain=true)
@TableName(value="tb_door")
public class Door extends Model<Door>{
/**
*
*/
private static final long serialVersionUID = -617598147423699680L;
//value与数据库主键列名一致，若实体类属性名与表主键列名一致可省略value
@TableId(type=IdType.AUTO)
private Integer id;
//若没有开启驼峰命名，或者表中列名不符合驼峰规则，可通过该注解指定数据库表中的列名，exist标明数据表中有没有对应列
@TableField(value ="door_name",exist=true)
private String doorName;
private String tel;
@Override
protected Serializable pkVal() {
// TODO Auto-generated method stub
return id;
}
}DoorDao.java
package com.jt.dao;
import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.jt.entity.Door;
public interface DoorDao extends BaseMapper<Door>{
}创建测试类DoorTest测试是否能从数据库获得数据
package doortest;
import java.sql.SQLException;
import java.util.List;
import org.junit.Before;
import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.jt.dao.DoorDao;
import com.jt.entity.Door;
public class DoorTest {
private ApplicationContext context;
private DoorDao doorDao;
@Before
public void getApplication(){
context =
new ClassPathXmlApplicationContext("classpath:spring-dao.xml");
doorDao = context.getBean("doorDao", DoorDao.class);
}
/**
* 查询一条数据
* @throws SQLException
*/
@Test
public void testSelect() throws SQLException{
Door door = doorDao.selectById("1");
System.out.println(door.toString());
}
}2、配置SpringMVC
在Web.xml配置DispatcherServlet和配置spring文件扫描及*.do拦截
<?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_3.xsd" version="2.3">
<display-name>EasyuiDemo-01</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class> org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-*.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>配置spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans default-lazy-init="true"
xmlns="http://www.springframework.org/schema/beans" xmlns:p="http://www.springframework.org/schema/p"
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" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:util="http://www.springframework.org/schema/util"
xmlns:jpa="http://www.springframework.org/schema/data/jpa"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-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://www.springframework.org/schema/util
http://www.springframework.org/schema/util/spring-util-4.3.xsd
http://www.springframework.org/schema/data/jpa
http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.3.xsd">
<!-- 配置组件扫描 -->
<context:component-scan base-package="com.jt" />
<!-- 启用MVC注解扫描 -->
<mvc:annotation-driven />
<!-- 配置视图解析器 -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
3、实现MVC请求
创建jsp文件并进入Easyui官网copy前端代码
点击 EasyUl Demo
创建webapp/WEB-INF/pages/demo.jsp复制前端代码粘入
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic CRUD Application</h2>
<p>Click the buttons on datagrid toolbar to do crud actions.</p>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
url="get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
<h3>User Information</h3>
<div style="margin-bottom:10px">
<input name="firstname" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="lastname" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="phone" class="easyui-textbox" required="true" label="Phone:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
<script type="text/javascript">
var url;
function newUser(){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'save_user.php';
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('destroy_user.php',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
</script>
</body>
</html>实现MVC请求
创建com.jt.collection.DoorCollection.java
@Controller
@RequestMapping("/door")
public class DoorCollection {
@RequestMapping("/demo")
public String demo() {
return "demo";
}
}开始启动访问出现页面说明ok，否则MVC配配置有问题
4、数据对接
更改前端表单数据宇实体类字段一致
原表单：
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
url="get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>改为：
<table id="dg" title="门店信息" class="easyui-datagrid" style="width:700px;height:250px"
url="getDoors.do"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" width="50">id</th>
<th field="doorName" width="50">门店名称</th>
<th field="tel" width="50">联系电话</th>
</tr>
</thead>
</table>处理getDoors.do请求
在com.jt.collection.DoorCollection.java加入处理获取数据的的方法
@RequestMapping("getDoors")
@ResponseBody
public List<Door> getDoors(Integer page,Integer rows) {
Page<Door> pages = new Page<Door>(page, rows);
List<Door> listDoor =doorDao.selectPage(pages, null);
System.out.println(listDoor);
return listDoor;
}效果：
5、完成添加数据
修改前端页面
原demo.jsp
<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
<h3>User Information</h3>
<div style="margin-bottom:10px">
<input name="firstname" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="lastname" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="phone" class="easyui-textbox" required="true" label="Phone:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%">
</div>
</form>改为：
<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
<h3>User Information</h3>
<div style="margin-bottom:10px">
<input name="doorName" class="easyui-textbox" required="true" label="门店名称:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="tel" class="easyui-textbox" required="true" label="联系电话:" style="width:100%">
</div>
</form>把原js中的url改为saveDoor.do：
function saveUser(){
$('#fm').form('submit',{
url: url,//saveDoor.do
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}在web.xml中添加过滤器防止乱码
<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>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>在com.jt.collection.DoorCollection.java加入处理获取数据的的方法