1.2. Sql 映射配置小风 Java 实战系列教程 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//dtd Mapper 3.0//EN" "

本章学习目标小风 Java 实战系列教程 CRM 开发环境搭建客户列表展示客户分页显示客户添加客户信息修改回显客户信息更新保存客户信息删除 1. 客户列表展示 1.1. Mapper 接口 package cn.sm1234.dao; import java.util.list; import cn.sm1234.domain.customer; public interface CustomerMapper { /** * 查询所有数据 */ public List<Customer> findal();

1.2. Sql 映射配置小风 Java 实战系列教程 <?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.sm1234.dao.customermapper">  <select id="findal" resulttype="cn.sm1234.domain.customer"> SELECT id, NAME, gender, telephone, address FROM ssm.t_customer </select> </mapper> 1.3. Service 接口 : package cn.sm1234.service; import java.util.list;

import cn.sm1234.domain.customer; public interface CustomerService { /** * 查询所有数据 */ public List<Customer> findall(); 实现 : package cn.sm1234.service.impl; import java.util.list; import javax.annotation.resource; import org.springframework.stereotype.service; import org.springframework.transaction.annotation.transactional; import cn.sm1234.dao.customermapper; import cn.sm1234.domain.customer; import cn.sm1234.service.customerservice; @Service("customerService") @Transactional public class CustomerServiceImpl implements CustomerService {

// 注入 Mapper 接口对象 @Resource private CustomerMapper customermapper; public List<Customer> findall() { return customermapper.findal(); 1.4. Controller package cn.sm1234.controller; import java.util.list; import javax.annotation.resource; import org.springframework.stereotype.controller; import org.springframework.web.bind.annotation.requestmapping; import org.springframework.web.bind.annotation.responsebody; import cn.sm1234.domain.customer; import cn.sm1234.service.customerservice; @Controller @RequestMapping("/customer") public class CustomerController {

// 注入 service 对象 @Resource private CustomerService customerservice; /** * 查询所有数据, 给页面返回 json 格式数据 * easyui 的 datagrid 组件, 需要展示数提供 json 数据 : [ {id:1,name:xxx,{id:1,name:xxx ] */ @RequestMapping("/list") @ResponseBody // 用于转换对象为 json public List<Customer> list(){ // 查询数据 List<Customer> list = customerservice.findall(); return list; 这时可以运行项目测试, 发现错误 : 原因 :SpringMVC 在转换 Java 对象为 json 数据的时候,jackson 插件的版本太低, 导致转换失败解决办法 :

升级 jackson 插件的版本, 最好升级都 2.6 以上小风 Java 实战系列教程 1.5. 页面在页面导入 easyui 的资源文件 :  <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_cn.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link id="themelink" rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <table id="list"></table> <script type="text/javascript"> $(function(){ $("#list").datagrid({ //url: 后台数据查询的地址 url:"customer/list.action", //columns: 填充的列数据 //field: 后台对象的属性 //tille: 列标题 columns:[[ { field:"id", title:" 客户编号 ", width:100,

checkbox:true, { field:"name", title:" 客户姓名 ", width:200, { field:"gender", title:" 客户性别 ", width:200, { field:"telephone", title:" 客户手机 ", width:200, { field:"address", title:" 客户住址 ", width:200 ]] ); ); </script>

2. 客户分页显示小风 Java 实战系列教程 2.1. 页面 $(function(){ $("#list").datagrid({ //url: 后台数据查询的地址 url:"customer/listbypage.action", //columns: 填充的列数据 //field: 后台对象的属性 //tille: 列标题 columns:[[ { field:"id", title:" 客户编号 ", width:100, checkbox:true, { field:"name", title:" 客户姓名 ", width:200, { field:"gender", title:" 客户性别 ", width:200, {

field:"telephone", title:" 客户手机 ", width:200, { field:"address", title:" 客户住址 ", width:200 ]], // 显示分页 pagination:true ); ); 2.2. Controller 2.2.1. 使用 mybatis 分页插件 2.2.1.1. 导入 mybatis 分页插件的 jar 包 2.2.1.2. 配置 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:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemalocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">  <context:property-placeholder location="classpath:jdbc.properties"/>  <bean id="datasource" class="org.apache.commons.dbcp.basicdatasource"> <property name="url" value="${jdbc.url"/> <property name="driverclassname" value="${jdbc.driverclass"/> <property name="username" value="${jdbc.user"/> <property name="password" value="${jdbc.password"/> <property name="maxactive" value="10"/> <property name="maxidle" value="5"/> </bean>  <bean id="sqlsessionfactory" class="org.mybatis.spring.sqlsessionfactorybean">

<property name="datasource" ref="datasource"/>  <property name="mapperlocations" value="classpath:mapper/*.xml"/>  <property name="plugins"> <array>  <bean class="com.github.pagehelper.pageinterceptor"> <property name="properties">  <value> helperdialect=mysql </value> </property> </bean> </array> </property> </bean>   <bean class="org.mybatis.spring.mapper.mapperscannerconfigurer">  <property name="basepackage" value="cn.sm1234.dao"/>

</bean>  <context:component-scan base-package="cn.sm1234"/>   <bean id="transactionmanager" class="org.springframework.jdbc.datasource.datasourcetransactionmanager"> <property name="datasource" ref="datasource"/> </bean>  <tx:annotation-driven transaction-manager="transactionmanager"/> </beans> package cn.sm1234.controller; import java.util.hashmap; import java.util.list; import java.util.map; import javax.annotation.resource; import org.springframework.stereotype.controller; import org.springframework.web.bind.annotation.requestmapping; import org.springframework.web.bind.annotation.responsebody; import cn.sm1234.domain.customer;

import cn.sm1234.service.customerservice; import com.github.pagehelper.pagehelper; import com.github.pagehelper.pageinfo; @Controller @RequestMapping("/customer") public class CustomerController { // 注入 service 对象 @Resource private CustomerService customerservice; /** * 查询所有数据, 给页面返回 json 格式数据 * easyui 的 datagrid 组件, 需要展示数提供 json 数据 : [ {id:1,name:xxx,{id:1,name:xxx ] */ @RequestMapping("/list") @ResponseBody // 用于转换对象为 json public List<Customer> list(){ // 查询数据 List<Customer> list = customerservice.findall(); return list; // 设计 Map 聚合存储需要给页面的对象数据 private Map<String,Object> result = new HashMap<String,Object>();

/** * 分页查询 */ @RequestMapping("/listByPage") @ResponseBody public Map<String,Object> listbypage(integer page,integer rows){ // 设置分页参数 PageHelper.startPage(page, rows); // 查询所有数据 List<Customer> list = customerservice.findall(); // 使用 PageInfo 封装查询结果 PageInfo<Customer> pageinfo = new PageInfo<Customer>(list); // 从 PageInfo 对象取出查询结果 // 总记录数 long total = pageinfo.gettotal(); // 当前页数据列表 List<Customer> custlist = pageinfo.getlist(); result.put("total", total); result.put("rows", custlist); return result;

3. 客户添加小风 Java 实战系列教程 3.1. 页面设计一个工具条 :  <div id="tb"> <a id="addbtn" href="#" class="easyui-linkbutton" data-options="iconcls:'icon-add',plain:true"> 添加 </a> <a id="editbtn" href="#" class="easyui-linkbutton" data-options="iconcls:'icon-edit',plain:true"> 修改 </a> <a id="deletebtn" href="#" class="easyui-linkbutton" data-options="iconcls:'icon-remove',plain:true"> 删除 </a> </div> 在 datagrid 上面绑定 : 设计一个录入窗口

<div id="win" class="easyui-window" title=" 客户数据编辑 " style="width:500px;height:300px" data-options="iconcls:'icon-save',modal:true,closed:true"> <form method="post"> 客户姓名 :<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/><br/> 客户性别 : <input type="radio" name="gender" value=" 男 "/> 男 <input type="radio" name="gender" value=" 女 "/> 女 <br/> 客户手机 :<input type="text" name="telephone" class="easyui-validatebox" data-options="required:true"/><br/> 客户住址 :<input type="text" name="address" class="easyui-validatebox" data-options="required:true"/><br/> <a id="savebtn" href="#" class="easyui-linkbutton" data-options="iconcls:'icon-save'"> 保存 </a> </form> </div> 点击按钮, 打开窗口 // 打开编辑窗口 $("#addbtn").click(function(){ $("#win").window("open"); );

提交表单数据小风 Java 实战系列教程 // 保存数据 $("#savebtn").click(function(){ $("#editform").form("submit",{ //url: 提交到后台的地址 url:"customer/save.action", //onsubmit: 表单提交前的回调函数,true: 提交表单 false: 不提交表单 onsubmit:function(){ // 判断表单的验证是否都通过了 return $("#editform").form("validate");, //success: 服务器执行完毕回调函数 success:function(data){ //data: 服务器返回的数据, 类型字符串类 // 要求 Controller 返回的数据格式 : // 成功 :{success:true 失败 :{success:false,msg: 错误信息 // 把 data 字符串类型转换对象类型 data = eval("("+data+")"); if(data.success){ $.messager.alert(" 提示 "," 保存成功 ","info"); else{ $.messager.alert(" 提示 "," 保存失败 :"+data.msg,"error"); );

); 3.2. Controller /** * 保存数据 */ @RequestMapping("/save") @ResponseBody public Map<String,Object> save(customer customer){ try { customerservice.save(customer); result.put("success", true); catch (Exception e) { e.printstacktrace(); result.put("success", false); result.put("msg", e.getmessage()); return result; 3.3. Service 接口 : public void save(customer customer); 实现 : public void save(customer customer) {

customermapper.save(customer); 3.4. Mapper package cn.sm1234.dao; import java.util.list; import cn.sm1234.domain.customer; public interface CustomerMapper { /** * 查询所有数据 */ public List<Customer> findal(); /** * 保存数据 * @param customer */ public void save(customer customer);

3.5. sql 映射文件小风 Java 实战系列教程 <?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.sm1234.dao.customermapper">  <select id="findal" resulttype="cn.sm1234.domain.customer"> SELECT id, NAME, gender, telephone, address FROM ssm.t_customer </select>  <insert id="save" parametertype="cn.sm1234.domain.customer"> INSERT INTO ssm.t_customer ( NAME, gender, telephone, address )

VALUES ( #{name, #{gender, #{telephone, #{address ) </insert> </mapper> 4. 客户修改的数据回显 4.1. 页面 // 修改数据 $("#editbtn").click(function(){ // 判断只能选择一行 var rows = $("#list").datagrid("getselections"); if(rows.length!=1){ $.messager.alert(" 提示 "," 修改操作只能选择一行 ","warning"); return; // 表单回显 $("#editform").form("load","customer/findbyid.action?id="+rows[0].id); $("#win").window("open");

); 4.2. Controller /** * 根据 id 查询对象 */ @RequestMapping("/findById") @ResponseBody public Customer findbyid(integer id){ Customer cust = customerservice.findbyid(id); return cust; 4.3. Service 接口 : public Customer findbyid(integer id); 实现 : public Customer findbyid(integer id) { return customermapper.findbyid(id); 4.4. Mapper /** * 根据 id 查询对象

* @param id * @return */ public Customer findbyid(integer id); 4.5. sql 映射文件  <select id="findbyid" parametertype="int" resulttype="cn.sm1234.domain.customer"> SELECT id, NAME, gender, telephone, address FROM ssm.t_customer where id = #{value </select> 5. 客户修改的更新保存 5.1. 页面 <form id="editform" method="post"> <%-- 提供 id 隐藏域 --%> <input type="hidden" name="id"> 客户姓名 :<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/><br/> 客户性别 :

<input type="radio" name="gender" value=" 男 "/> 男 <input type="radio" name="gender" value=" 女 "/> 女 <br/> 客户手机 :<input type="text" name="telephone" class="easyui-validatebox" data-options="required:true"/><br/> 客户住址 :<input type="text" name="address" class="easyui-validatebox" data-options="required:true"/><br/> <a id="savebtn" href="#" class="easyui-linkbutton" data-options="iconcls:'icon-save'"> 保存 </a> </form> 5.2. Controller 无 5.3. Service public void save(customer customer) { // 判断是添加还是修改 if(customer.getid()!=null){ // 修改 customermapper.update(customer); else{ // 增加 customermapper.save(customer);

5.4. Mapper 小风 Java 实战系列教程 /** * 修改对象数据 * @param customer */ public void update(customer customer); 5.5. sql 映射文件  <update id="update" parametertype="cn.sm1234.domain.customer"> UPDATE ssm.t_customer SET NAME = #{name, gender = #{gender, telephone = #{telephone, address = #{address WHERE id = #{id </update> 6. 客户删除 6.1. 页面 // 删除 $("#deletebtn").click(function(){ var rows =$("#list").datagrid("getselections");

if(rows.length==0){ $.messager.alert(" 提示 "," 删除操作至少选择一行 ","warning"); return; // 格式 : id=1&id=2&id=3 $.messager.confirm(" 提示 "," 确认删除数据吗?",function(value){ if(value){ var idstr = ""; // 遍历数据 $(rows).each(function(i){ idstr+=("id="+rows[i].id+"&"); ); idstr = idstr.substring(0,idstr.length-1); // 传递到后台 $.post("custmer/delete.action",idstr,function(data){ if(data.success){ // 刷新 datagrid $("#list").datagrid("reload"); $.messager.alert(" 提示 "," 删除成功 ","info"); else{ $.messager.alert(" 提示 "," 删除失败 : "+data.msg,"error");,"json"); );

); 6.2. Controller /** * 删除数据 */ @RequestMapping("/delete") @ResponseBody public Map<String,Object> delete(integer[] id){ try { customerservice.delete(id); result.put("success", true); catch (Exception e) { e.printstacktrace(); result.put("success", false); result.put("msg", e.getmessage()); return result; 6.3. Service 接口 : public void delete(integer[] id); 实现 : public void delete(integer[] id) {

customermapper.delete(id); 6.4. Mapper /** * 删除数据 * @param id */ public void delete(integer[] id); 6.5. sql 映射文件  <delete id="delete" parametertype="integer[]"> DELETE FROM ssm.t_customer <where> id <foreach collection="array" item="id" open="in (" close=")" separator=","> #{id </foreach> </where> </delete>

1.2. Sql 映射配置 小风 Java 实战系列教程 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//dtd Mapper 3.0//EN" "

1.2. Sql 映射配置小风 Java 实战系列教程 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//dtd Mapper 3.0//EN" "