SSM+JSP
一、任务要求
- 对多张表增删改查 （数据表字段类型包括字符、数值、时间）
- Controller、Dao、 Service 分层
- 代码及命名规范
- 页面展示使用多种形式（radio 、checkbox 、下拉框、日期选择等）
- 多种条件查询( 文本框、radio 、checkbox 、下拉框、日期选择等 )，多种匹配模式（精确匹配、模糊匹配、范围匹配等）
- 查询分页
- 前台JS 控制
- 前、后台校验
- 查询页面，包括显示列的字典翻译、URL、查询条件的字典、字典级联。
- 表单页面，包括字段的字典、字典级联、字典过滤、自动带值、操作校验等。
二、页面搭建
BootStrap + JQuery
三、曲折过程
以下是遇到的问题以及使用到的小知识点，分享出来给有需要的后来人~
1、后端返回json中格式化时间
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
2、jsp中格式化时间
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<fmt:formatDate value="${requireInfoBean.releaseTime}" pattern="yyyy-MM-dd"/>
3、首页跳转另一个jsp页面
<jsp:forward page="/list"></jsp:forward>
4、标签JQuery赋值问题
$('#msg').val("姓名为1-6个汉字！");
$('#msg').html("姓名为1-6个汉字！");
// 前者无效，可能是因为 span 没有value属性。
5、400错误原因
在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里；
原因：
1.前端提交数据的字段名称或者是字段类型和后台的实体类不一致 导致无法封装。解决：使用浏览器的开发者工具进行检查；
2.前端提交的到后台的数据应该是json字符串类型，解决：后端接收参数的对象使用 @RequestBody 修饰。
6、前台传 date 类型参数，400错误
jsp 项目中，当前台input 设置为type=date时，传到后台的数据对不上，需要在model实体类中的相应的字段上加上注解 @DateTimeFormat 即可。
@DateTimeFormat(pattern = "yyyy-MM-d")
private Date stuDate; // 入学时间
7、注解中使用动态SQL
使用script标签包裹起来
@Update("<script>update student" +
" <set>" +
"<if test='stuName != null'>set stu_name = #{stuName},</if>" +
"<if test='stuSex != null'>set stu_sex = #{stuSex},</if>" +
"<if test='stuLoves != null'>set stu_loves = #{stuLoves},</if>" +
"<if test='stuDate != null'>set stu_date = #{stuDate},</if>" +
"<if test='stuGrade != null'>set stu_grade = #{stuGrade},</if>" +
"</set>" +
"where stu_id = #{stuId}</script>")
void updateStu(Student student);
8、信息回显
总结：radio 和 checkbox 的 check属性，以及 option 的selected 属性，在jsp中实现信息回显的时候，都需要写里面！(PS: 以下均在 jsp 页面！!)
(1) radio
正确写法：
<input type="checkbox"${stu.stuSex == '0' ? 'checked' : ''}>
以下写法是错误写法：
<input type="checkbox" checked="${stu.stuSex == '0'}">
(2) date
正确写法：
<input type="date" value="<fmt:formatDate value="${stu.stuDate}" pattern="yyyy-MM-dd"/>">
以下写法是错误写法：
<input type="date" value="${stu.stuDate}"">
(3) checkbox
正确写法：
<input type="checkbox" id="inlineCheckbox3" name="stuLoves" value="思考" ${stu.stuLoves.contains("思考") ? "checked='checked'" : ''}> 思考
以下写法是错误写法：
<input type="checkbox" id="inlineCheckbox3" name="stuLoves" value="思考" checked="${stu.stuLoves.contains("思考")}"> 思考
(4) option
正确写法：
<option value="3" ${stu.stuGrade == '3' ? 'selected' : ''}>大三</option>
以下写法是错误写法：
<option value="3" selected="${stu.stuGrade == '3'}" >大三</option>
9、分页条的不可点击
Bootstrap的分页组件中，标签 li 上加了disable后还是可以点击，因为 a 标签，所以应该给 a 标签加！
例如：
<li>
<a href="#" class="btn disabled" >首页</a>
</li>
注意：必须加 btn ！
10、、JQuery的 submit() 无法提交表单
问题描述：
- 我是先做的条件查询，当时是用的
<input type="submit">这个按钮进行提交的，当时妥妥的！ - 然后条件查询 整合 分页查询，给每个分页条绑定了个方法，在方法了进行表单的提交。我当时使用的就是如下的代码！
- 看上去没啥毛病吧。。。然后问题就来了，这个表单就死活提交不上去！打断点调试的时候甚至不进这个方法，当时心态蹦了啊。。。一顿尝试，把
input type="submit"改成了input type="button"，然后通过给这个按钮，绑定如下的方法，进行提交，也不行！心态炸裂。。。一个个的去翻百度上各位前辈的错误总结，最后找到了原因！ - 原因：
$('#xxx').submit(function ());该方法仅仅是表单提交的监听校验，并不会提交表单，坑爹啊！！！最后在这个方法后，又加了个$('#xxx').submit()，最后得以成功！
<script>
// 提交条件查询表单
function findByPageAndCondition(pn,size) {
$('#findForm').attr('action','/list/'+pn+'/'+size);
// 表单校验
$('#findForm').submit(function () {
if( !checkName() ){ // 如果未通过，不予提交
return false;
}
});
}
</script>
11、JSR303 后端校验
校验主要在 Controller 中，使用 @Valid和 @Validated ，我都用了！ 两者皆可！
BindingResult 对象获取校验失败的信息
StudentController：观察一个例子即可上手使用！
package com.feng.controller;
import com.feng.pojo.QueryCondition;
import com.feng.pojo.Student;
import com.feng.service.StudentService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;
import javax.validation.Valid;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
public class StudentController {
@Autowired
StudentService studentService;
/**
* 根据条件，分页查询
* @param model
* @param pn
* @param size
* @param condition
* @return
*/
@RequestMapping("/list/{pn}/{size}")
public String list2(Model model, @PathVariable(value = "pn",required = false)
Integer pn
, @PathVariable(value = "size",required = false) Integer size
, @Valid QueryCondition condition , BindingResult bindingResult){
// 判断是否通过 JSR303 校验，如果未通过，打印错误信息，并返回 fail.jsp 页面！
if(bindingResult.hasErrors()){
for (FieldError fieldError : bindingResult.getFieldErrors()) {
System.out.println(fieldError.toString());
}
return "fail";
}
/*
...
*/
return "stuList";
}
}
pojo对象如下：
public class Student {
private Integer stuId; // id
@Pattern(regexp = "^[\\u4E00-\\u9FA5]{1,6}$",message = "名字应为1-6个汉字！")
private String stuName; // 姓名
@Range(min = 0,max = 1,message = "性别为男，或者女！")
private Integer stuSex; // 1-男，0-女
@Size(max = 12,min = 0,message = "爱好仅可选择给定选项！")
private String stuLoves; // 爱好
// @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
@JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd")
@Past(message = "入学时间不可大于当前时间！")
private Date stuDate; // 入学时间
@Range(min = 1,max = 4,message = "年级为大一至大四！")
private Integer stuGrade; // 年级, 1-大一，2-大二
12、可输入值的下拉框
<input class="form-control major" id="inputSelectMajor" name="majNameStr" list="majors">
<datalist id="majors" name="majNameStr">
<option value="111">一曲肝肠断</option>
</datalist>
坑1：datalist 下的 option 中的value，会被显示到文本上。
如上述代码则会显示为：
111
一曲肝肠断
坑2：如果datalist下，还使用了 select ，那么每次提交时，选中的都是select 下的第一个option。
总之就是，datalist下，不能使用 select ！
浙公网安备 33010602011771号