添加功能-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

显示添加页面

在list.jsp中，通过<a href="${ctx}/emp" target="_blank">新增</a>跳转到处理添加页面的请求处理方法。

@RequestMapping("/emp")
public String save(Model model) {
	//加载部门信息
	getDepts(model);
	return "save";
}

跳转到页面的同时，要加载部门信息。 getDepts(model)方法如下：

/**
  * 加载部门信息
  */
private void getDepts(Model model) {
	List<Dept> depts = deptService.getAll();
	model.addAttribute("depts", depts);
}

deptService.getAll()的方法也很简单。如下：

@Service
public class DeptService {

    @Autowired
    private DeptMapper deptMapper;
    
    public List<Dept> getAll() {
        return deptMapper.selectByExample(null);
    }
}

save.jsp的主要代码：

<form action="${ctx}/emp" method="post">
    <table>
        <tr>
            <td>姓名：</td>
            <td>
                <input type="text" name="name" value="${param.name}" placeholder="请输入姓名" id="name"/>
                <span id="msg" style="color: red"></span>
            </td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" name="email" value="${param.email}" placeholder="请输入邮箱"/></td>
        </tr>
        <tr>
            <td>性別：</td>
            <td>
                <input type="radio" name="gender" value="M" checked="checked"/> 男
                <input type="radio" name="gender" value="F"/> 女
            </td>
        </tr>
        <tr>
            <td>部门：</td>
            <td>
                <select name="deptId">
                    <option value="0">请选择</option>
                    <c:forEach var="dept" items="${depts}">
                        <option value="${dept.id}">${dept.name}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="保存"/></td>
        </tr>
    </table>
</form>

${param.属性} 用来回显用户输入的数据。
加载部门信息：

<select name="deptId">
    <option value="0">请选择</option>
    <c:forEach var="dept" items="${depts}">
	<option value="${dept.id}">${dept.name}</option>
    </c:forEach>
</select>

校验姓名的唯一性

填好姓名后，需要校验唯一性。
t_emp表是这样定义的：name varchar(255) not null unique 有unique唯一约束。

引入jQuery：

<head>
    <title>SSM_CRUD_SIMPLE</title>
    <script src="${ctx}/webjars/jquery/3.3.1-2/jquery.min.js"></script>
</head>

注意：这里jquery的引入方式，使用的是webjars。网址：https://www.webjars.org/

当填入姓名的文本框发生变化时，发送ajax请求，验证唯一性。代码：

<script>
    $(function () {
        $("#name").change(function(){
            $.ajax({
                url:"${ctx}/checkName",
                data:"name="+$(this).val(),
                type:"get",
                success:function (result) {
                    if(result){
                        $("#msg").text("");
                    }else{
                        $("#msg").text("该姓名不可用，请更换");
                    }
                }
            });
        });
    });
</script>

url:"${ctx}/checkName" 表示/checkName 处理对应的请求。后台代码如下：

@ResponseBody  
@RequestMapping("/checkName")
public boolean checkName(String name) {
	boolean flag = empService.checkName(name);
	return flag;
}

@ResponseBody 表示返回json数据。
empService.checkName(name); 的方法如下：

public boolean checkName(String name) {
	EmpExample example = new EmpExample();
	example.createCriteria().andNameEqualTo(name);
	int count = empMapper.countByExample(example);
	return count == 0;  // 返回0表示姓名可用，否则不可用。
}

页面的处理：

<td>
	<input type="text" name="name" value="${param.name}" placeholder="请输入姓名" id="name"/>
	<span id="msg" style="color: red"></span>
</td>

增加一个<span> 标签，来显示提示信息。

JSR303的后端数据校验

提交表单的处理方法是：

@RequestMapping(value = "/emp", method = RequestMethod.POST)
public String save(@Valid Emp emp, BindingResult result, Model model) {

}

@Valid 要验证的数据
Emp emp 封装表单填入的数据
BindingResult result 封装了校验的信息

如何验证Emp呢？

public class Emp {
    private Long id;

    @NotEmpty(message = "姓名不能为空")
    @Pattern(regexp = "(^[a-zA-Z0-9_-]{3,16}$)|(^[\\u2E80-\\u9FFF]{2,5})",
            message = "用户名必须是2-5位中文或者3-16位英文和数字的组合")
    private String name;

    private String gender;

    @NotEmpty(message = "邮箱不能为空")
    @Email(message = "邮箱格式不正确")
    private String email;

    private Long deptId;
    
    private Dept dept;

    //......	
}

@NotEmpty 验证非空
@Pattern正则表达式验证
@Email邮箱验证

更多验证，可参阅如下包：
javax.validation.constraints
org.hibernate.validator.constraints

代码

@RequestMapping(value = "/emp", method = RequestMethod.POST)
    public String save(@Valid Emp emp, BindingResult result, Model model) {
        if (result.hasErrors()) {
            List<FieldError> errors = result.getFieldErrors();
            model.addAttribute("errors", errors);

            //加载部门信息
            getDepts(model);

            return "save";
        } else {
            boolean flag = checkName(emp.getName());
            // 姓名唯一性，不滿足
            if (!flag) {
                FieldError error = new FieldError("name", "name", "该姓名不可用，请更换-后台提示");
                List<FieldError> errors = new LinkedList();  //源码是用的LinkedList，跟源码保持一致
                errors.add(error);
                model.addAttribute("errors", errors);
                //加载部门信息
                getDepts(model);
                return "save";
            }
            empService.saveEmp(emp);
            return "redirect:/emps";
        }
    }

在save.jsp显示错误消息

<%--显示错误消息--%>
<c:if test="${not empty errors}">
    <c:forEach var="error" items="${errors}">
        <div style="color: red">${error.defaultMessage}</div>
    </c:forEach>
</c:if>