008 使用MyBatis,easyUI实现CRUD操作样例-CUD(CRUD完毕)

008 使用MyBatis,easyUI实现CRUD操作样例-CUD

视频发布在youtube上面了
https://youtu.be/EaT-EpD-1fM
优酷上面的链接
http://v.youku.com/v_show/id_XMjgwODcyNzg5Ng==.html?f=49760672

接着007的项目操作。

数据库的主键改为自增，主键的相关处理这里不是重点。

添加信息

HTTP POST 请求/users 带着一个user对象JSON格式创建一个新的user

显示添加页面Get请求 Uri: user
提交添加信息POST请求 Uri: user

body里面添加addUser对话框

...<!-- create user dialog --><div id="dlg" class="easyui-dialog"data-options="iconCls:'icon-save',resizable:true,modal:true"style="width: 400px; height: 280px; padding: 10px 20px" closed="true"buttons="#dlg-buttons"><div class="ftitle">用户信息</div><form id="fm" method="post"><div class="fitem"><label for="name">用户名:</label> <input name="name"class="easyui-validatebox" type="text" data-options="required:true"></div><div class="fitem"><label for="age">年 龄:</label> <input name="age"class="easyui-numberbox" type="text"data-options="required:true,validType:'number'"></div><div class="fitem"><label for="gender">性 别:</label> <input id="state1" name="gender"value="男" type="radio" checked="true" />男 <input id="state2"name="gender" value="女" type="radio" />女</div><div class="fitem"><label for="email">Email:</label> <input name="email"class="easyui-validatebox" type="text"data-options="required:true,validType:'email'"></div><div class="fitem"><label for="teacherId">教 师:</label> <input id="cc"class="easyui-combobox" name="teacherId"data-options="valueField:'id',textField:'name',panelHeight:80,editable:false,method:'get',url:'${pageContext.request.contextPath}/getTeacherComboData'"></div></form></div><div id="dlg-buttons"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"onclick="save()">Save</a> <a href="#" class="easyui-linkbutton"data-options="iconCls:'icon-cancel'"onclick="javascript:$('#dlg').dialog('close')">Cancel</a></div></body>

然后添加ITeacherService接口，给Controller使用。

public Teacher getTeacherById(long id);public List<Teacher> getTeachers();

修改teacherMapper添加Dao操作

/**
* Select all teachers
* @return
*/
List<Teacher> selectTeachers();

修改TeacherMapper.xml增加getTeachers映射

<select id="selectTeachers" resultMap="BaseResultMap">select * from teacher
</select>

添加实现类ITeacherServiceImpl

@Service("teacherService")
@Transactional
public class ITeacherServiceImpl implements ITeacherService
{@AutowiredTeacherMapper teacherMapper;@Overridepublic List<Teacher> getTeachers(){return teacherMapper.selectTeachers();}@Overridepublic Teacher getTeacherById(long id){return teacherMapper.selectByPrimaryKey(id);}
}

添加TeacherController实现easyUI需要的数据接口

@Controller
public class TeacherController
{private static final Logger logger = LogManager.getLogger(TeacherController.class.getName());@AutowiredITeacherService teacherService;@ResponseBody@RequestMapping(value = "/getTeacherComboData", method = RequestMethod.GET)public List<Teacher> teachers(HttpServletRequest request, HttpServletResponse response){List<Teacher> teachers = teacherService.getTeachers();logger.info("getUsers api jsonObj:" + JSON.toJSONString(teachers));return teachers;}
}

/src/main/webapp/commons/js目录下新建commons.js获取项目路径，网上找的代码，注释信息保留了。

/*!* imalex@163.com - v0.1 (2015-08-29 18:00:00 +0800)* Copyright 2015*/
var ctx=getBasePath();function getBasePath(){ var obj=window.location; var contextPath=obj.pathname.split("/")[1]; var basePath=obj.protocol+"//"+obj.host+"/"+contextPath; return basePath;
}// 格式化日期
Date.prototype.Format = function (fmt) {var o = {"y+": this.getFullYear(),"M+": this.getMonth() + 1,                 // 月份"d+": this.getDate(),                    // 日"h+": this.getHours(),                   // 小时"m+": this.getMinutes(),                 // 分"s+": this.getSeconds(),                 // 秒"q+": Math.floor((this.getMonth() + 3) / 3), // 季度"S+": this.getMilliseconds()             // 毫秒};for (var k in o) {if (new RegExp("(" + k + ")").test(fmt)){if(k == "y+"){fmt = fmt.replace(RegExp.$1, ("" + o[k]).substr(4 - RegExp.$1.length));}else if(k=="S+"){var lens = RegExp.$1.length;lens = lens==1?3:lens;fmt = fmt.replace(RegExp.$1, ("00" + o[k]).substr(("" + o[k]).length - 1,lens));}else{fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));}}}return fmt;
}

新建目录/src/main/webapp/commons/js/user
在user目录下新建userOper.js脚本处理增加，删除，修改操作

/*!* imalex@163.com - v0.1 (2015-08-29 18:00:00 +0800)* Copyright 2015*/
$(function() {});function insert() {$('#dlg').dialog('open').dialog('setTitle', '新建用户');$('#fm').form('clear');url = ctx + '/users';type = insert;
}function edit() {var row = $('#dg').datagrid('getSelected');if (row) {$('#dlg').dialog('open').dialog('setTitle', '编辑用户信息');$('#fm').form('load', row);//setCheckedValue(document.forms['fm'].elements['gender'], row['gender']);url = 'users/' + row.id;type = edit;}
}function save() {$('#fm').form('submit', {url : url,type:type,onSubmit : function(param) {if (type == edit) {//use put param._method ='PUT';}param.createTime = new Date().Format("yyyy-MM-dd hh:mm:ss");param.loginTime = param.createTime;var ret = $(this).form('validate');return ret;},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 del() {var row = $('#dg').datagrid('getSelected');if (row) {$.messager.confirm('确认', '请确认删除已选择用户?', function(r) {if (r) {$.post('users/' + row.id, {_method : 'DELETE'}, function(result) {if (result.status != null) {$('#dg').datagrid('reload'); // reload the user data} else {$.messager.show({ // show error messagetitle : 'Error',msg : result.errorMsg});}}, 'json');}});}
}

新建目录/src/main/webapp/commons/css，下面新建user.css用于格式化新建用户对话框的各个元素

<style type="text/css">
#fm {margin: 0;padding: 10px 30px;
}.ftitle {font-size: 14px;font-weight: bold;color: #666;padding: 5px 0;margin-bottom: 10px;border-bottom: 1px solid #ccc;
}.fitem {margin-bottom: 5px;
}.fitem label {display: inline-block;width: 80px;
}
</style>

引入自定义的脚本和css样式

...
<!-- 自定义的js脚本 -->
<script type="text/javascript" src="commons/js/commons.js"></script>
<script type="text/javascript" src="commons/js/user/userOper.js"></script>
<link rel="stylesheet" href="commons/css/user.css"></head>

IUserService和实现类增加插入用户的接口和实现代码

public int insertUser(User usr);@Override
public int insertUser(User usr)
{return userMapper.insert(usr);
}

UserController增加POST响应代码处理增加用户操作，这里使用POJO对象绑定请求参数值，spring会按照参数名和属性名自动匹配填充。

@Autowired
ITeacherService teacherService;@RequestMapping(value = "/users", method = RequestMethod.POST)
@ResponseBody
public Object addUsersProc(User user)
{// 处理新id生成// 处理teacher类对象user.setTeacher(teacherService.getTeacherById(user.getTeacherId()));int iRet = userService.insertUser(user);long newId = user.getId();Map<String, Object> map = new HashMap<String, Object>();if (iRet == 0){logger.info("addUsersProc: " + JSON.toJSON("新建失败：" + JSON.toJSONStringWithDateFormat(user, "yyyy-MM-dd HH:mm:ss")));map.put("status", "新建失败");map.put("retCode", -1);} else{logger.info("addUsersProc: " + JSON.toJSON("新建用户：" + JSON.toJSONStringWithDateFormat(user, "yyyy-MM-dd HH:mm:ss")));map.put("status", "新建成功");map.put("retCode", 0);}return map;
}

UserMapper.xml里面insert要添加一些配置，才会返回自增的ID，使用实体类的xx.GetId()来获取。

<insert id="insert" parameterType="com.study.model.User" useGeneratedKeys="true" keyProperty="id">
...

条件表单是字符串类型，实体类里面的日期是Date类型，涉及到了类型转换的处理。否则会遇到spring mvc form提交数据报400错误。
提交form表单报这个错误，有可能是你的controller接收数据类型与前台传递类型不符。例如前台传递String 后台用Date接受，就会报这个错误。

新建一个包com.study.converters
新建一个类DateTimeConverter实现spring的springframework.core.convert接口

@Component
public class DateTimeConverter implements Converter<String, Date>
{@Overridepublic Date convert(String source){DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Date date = null;try{date = df.parse(source);} catch (ParseException e){e.printStackTrace();}return date;}}

配置springmvc.xml使converter生效

<!-- 配置自动扫描的包 -->
<context:component-scan
    base-package="com.study.controller,com.study.service,com.study.converters"></context:component-scan>...
<!-- 对于mvc没有映射过的请求，交给容器默认handler来处理，例如：js,css等静态资源 -->
<mvc:default-servlet-handler />
<mvc:annotation-driven conversion-service="conversionService">...
</mvc:annotation-driven><!-- 配置转换服务 <mvc:annotation-driven conversion-service="conversionService"> -->
<bean id="conversionService"class="org.springframework.context.support.ConversionServiceFactoryBean"><property name="converters"><set><!-- 自定义的转换类，首字母小写 --><ref bean="dateTimeConverter" /></set></property>
</bean>

还有关于前台传数据到后台中文的乱码问题需要处理一下，在web.xml文件中添加配置，filter是有顺序的，这个最好放在最前面

<!-- 解决中文乱码问题，将参数编码为utf-8 -->
<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>

现在执行添加用户，应该能看到记录数有所增加。

删除信息

HTTP DELETE 请求/users/1 删除id=1的user

添加UserService接口和实现

public int deleteById(String id);@Override
public int deleteById(String id)
{return userMapper.deleteByPrimaryKey(Long.parseLong(id));
}

UserController里面添加响应代码

@RequestMapping(value = "/users/{id}", method = RequestMethod.DELETE)
@ResponseBody
public Object deleteUserProc(@PathVariable("id") String id)
{int iRet = userService.deleteById(id);Map<String, Object> map = new HashMap<String, Object>();if (iRet == 0){logger.error("deleteUserProc: 删除失败");map.put("status", "删除失败");map.put("retCode", -1);} else{logger.info("deleteUserProc: 删除成功");map.put("status", "删除成功");map.put("retCode", 0);}return map;
}

因为HiddenHttpMethodFilter的参数是
public static final String DEFAULT_METHOD_PARAM = “_method”;
所以说要把post请求转换成其他请求，提交的参数名就必须指定_method
而参数值必须是要转换的请求形式，这里是DELETE

修改信息

/users/1 PUT 更新资源 id=1

修改service增加更新接口

public int updateById(User user);@Override
public int updateById(User user)
{return userMapper.updateByPrimaryKey(user);
}

UserController里面增加响应处理

@RequestMapping(value = "/users/{id}", method = RequestMethod.PUT)
@ResponseBody
public Object updateUserProc(@PathVariable("id") long id, User user)
{int iRet = userService.updateById(user);Map<String, Object> map = new HashMap<String, Object>();if (iRet == 0){logger.error("updateUserProc: 更新失败");map.put("status", "更新失败");map.put("retCode", -1);} else{logger.info("updateUserProc: 更新成功");map.put("status", "更新成功");map.put("retCode", 0);}return map;
}

现在可以操作了。RESTFul风格的CRUD功能基本上就实现完毕了。