添加功能

冷不防 2022-01-14 10:43 265阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

# 显示添加页面 #

在`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`的主要代码：

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

# 校验姓名的唯一性 #

填好姓名后，需要**校验唯一性**。  
`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/][https_www.webjars.org]

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

`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表示姓名可用，否则不可用。
    }

*  页面的处理：

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

![1240][]

# 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>

![1240 1][]

转载于:https://my.oschina.net/mondayer/blog/3033885

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/e08d65514f20468b938ebe82b62bfb11.png
[https_www.webjars.org]: https://www.webjars.org/
[1240]: /images/20220114/50a6c41027af43bf96593f1e4b2873a2.png
[1240 1]: /images/20220114/ebf513d82f41440183b2e5ea235c9992.png