008 使用MyBatis,easyUI實現CRUD操作樣例-CUD(CRUD完畢)

阿新 • • 發佈：2019-01-16

008 使用MyBatis,easyUI實現CRUD操作樣例-CUD

接著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
{
    @Autowired
    TeacherMapper teacherMapper;

    @Override
    public List<Teacher> getTeachers()
    {
        return teacherMapper.selectTeachers();
    }

    @Override
    public Teacher getTeacherById(long id)
    {
        return teacherMapper.selectByPrimaryKey(id);
    }
}

新增TeacherController實現easyUI需要的資料介面

@Controller
public class TeacherController
{
    private static final Logger logger = LogManager.getLogger(TeacherController.class.getName());

    @Autowired
    ITeacherService 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獲取專案路徑，網上找的程式碼，註釋資訊保留了。

/*!
 * [email protected] - 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指令碼處理增加，刪除，修改操作

/*!
 * [email protected] - 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 message
                            title : '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>
{

    @Override
    public 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功能基本上就實現完畢了。

008 使用MyBatis,easyUI實現CRUD操作樣例-CUD(CRUD完畢)