SSM进行首次进行crud中遇见的难点

这一篇文字中，主要是总结第一次独自在使用ssm过程，进行前段和后端开发可能遇到错误点，和卡住的点.

jsp配置绝对路径

<%
    pageContext.setAttribute("APP_PATH",request.getContextPath());
%>

@PathVariable注解

@RequestMapping("/stus/{pn}")
public String stus(@PathVariable("pn") Integer pn,Model model){

• @PathVariable("") 对应请求，{}中的内容，并将其赋值给参数

引入bootstrap的css

• 要使用link标签，并且要注明rel="stylesheet"

<link href="${APP_PATH}/lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">

jquery入口函数

• $()

响应返回json

• 前段使用ajax请求

  • ajax响应的result数据
  • 获得用add封装的数据 result.map.key

  1. map: {pageinfo: {…}}
  2. message: “成功”
  3. status: 200

• 后端，使用@requestComponent注解，返回使用Msg封装之后的数据

msg类

public class Msg {
    int status;
    String message;
    Map<String,Object> map = new HashMap<>();
    public Msg success(){
        Msg msg = new Msg();
        msg.status=200;
        msg.message="成功";
        return msg;
    }
    public  Msg add(String key,Object value){
        //设置调用者的map
        map.put(key, value);
        //返回调用者
        return this;
    }
    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Map<String, Object> getMap() {
        return map;
    }

    public void setMap(Map<String, Object> map) {
        this.map = map;
    }


}

清除之前的内容

• $("#pageinfo-text").empty()
  

表格

表单信息序列化

• $().serialize()

表单信息重置

• $(“form”)[0].reset();

jquery不可以重置表单信息

提交信息的验证和状态的反馈

前端校验

真的有点麻烦了。后端校验就ok了，

• 正则表达式

  • 或者 (表达式1) | (表达式2)
  • 正则表达式测试:test

  满足是true，不满足是false

• 验证状态

  • 清空之前的样式
    • removeclass(class1 class2)
    • text("")
  • 父元素class添加has-error
  • span添加文本信息

后端校验

• 是否用户名已存在

  • 返回msg

• jsr303

  • 添加依赖

    • hibernate validtor

      <dependency>
      			<groupId>org.hibernate</groupId>
      			<artifactId>hibernate-validator</artifactId>
      			<version>5.4.1.Final</version>
      		</dependency>
      

    • @Pattern(regexp="",message="")

    • @Vaild Student stu,BindingResult result

public Msg saveStu(@Valid Student student, BindingResult result){
    List<FieldError> allErrors = result.getFieldErrors();
    for (FieldError error : allErrors) {
        //错误字段
        System.out.println(error.getField());
        //错误信息
        System.out.println(error.getDefaultMessage());
    }
    stuService.saveStu(student);
    return Msg.success();
}

修改数据的逻辑

• 回显数据

  • 创建按钮时，设置按钮属性"edit-id"

  • 姓名要设置成static，禁止用户进行修改重要字段

  • 向服务器发送ajax请求，获得数据

  • 设置数据被选中

    • input .val()
    • 下拉框和按钮 val([])

  • 发服务器发送put请求，更改数据

    解决方法：

    ​ 配置过滤器：HttpPutFormContentFilter

    原理：使用inputstream封装参数，再进行重写servlet方法

    ​

bootstrap组件

分页条

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

模态框

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

• js出现 $("#myModal").model({backdrop:'static'})
• 模态框的关闭 $("").model('hide')