核心思路:

前端在导航栏新增一个添加客户信息栏目,点击后切换到 /student/add 链接中,填写表单,经 Parsley 校验后提交即可。

后端则根据传过来的json对象解析后使用 respository.save 保存。

前端

表单:

<form id="form" data-parsley-validate="">  
  <div class="form-group">  
    <label for="name">姓名</label>  
    <input type="text" class="form-control" name="name" id="name" placeholder="输入姓名" required="" data-parsley-trigger="focus">  
  </div>  
  <div class="form-group">  
    <label>性别</label><br/>  
    <label class="radio radio-inline radio-primary" for="radio_man">  
      <input type="radio" name="e" required="" id="radio_man"><span>男</span>  
    </label>  
    <label class="radio radio-inline radio-primary" for="radio_woman">  
      <input type="radio" name="e" required="" id="radio_woman"><span>女</span>  
    </label>  
  </div>  
  <div class="form-group">  
    <label for="age">年龄</label>  
    <input type="text" class="form-control" name="age" id="age" placeholder="请输入年龄" required="" data-parsley-trigger="change" data-parsley-type="number" max="150" min="1">  
  </div>  
  <div class="form-group">  
    <label for="address">地址</label>  
    <input type="text" class="form-control" name="address" id="address" placeholder="请输入地址" required="" data-parsley-trigger="change" >  
  </div>  
  <input type="submit" class="btn btn-primary" value="提交">  
</form>

Parsley校验:

$('#form').parsley().on('field:validated', function() {
    let ok = $('.parsley-error').length === 0;
    if(ok)
      console.log("校验通过")
    else
      console.log("校验不通过")
  }).on('form:submit', function() {
    submit()
    return false; // Don't submit form for this demo
  });
 
  function submit () {
    let name = $('#name').val()
    let age = $('#age').val()
    let address = $('#address').val()
    let isMan = $('#radio_man').val()
    let data = {
      name: name,
        age: age,
        address: address,
      sex : isMan ? '男' : '女'
    }
    console.log(data)
    $.ajax('/student/add', {
      data: data,
        type: 'POST',
      dataType: 'json',
      success: function (data) {
        if(data.success)
            $.confirm({
                title: '提示',
                content: '添加成功',
                type: 'green',
                buttons: {
                ok: {
                    text: '确定',
                    btnClass: 'btn-primary',
                    keys: ['enter'],
                    action: function(){
                    window.location.href = '/student/index'
                    }
                }
                }
            })
            else
            $.confirm({
                title: '提示',
                content: '添加失败',
                type: 'red',
                buttons: {
                ok: {
                    text: '确定',
                    btnClass: 'btn-primary',
                    keys: ['enter'],
                    action: function(){
                    window.location.href = '/student/index'
                    }
                }
                }
            })
      }
    })
  }

后端

@GetMapping("/student/add")  
public String add() {  
    return "student/add";  
}  
@PostMapping(value = "/student/add", produces = "application/json;charset=UTF-8")  
@ResponseBody  
public Response add(Customer customer) {  
    return customerService.addCustomer(customer);  
}

Service:

@Override  
public Response addCustomer(Customer customer) {  
    try {  
        customerRepository.save(customer);  
        return Response.success("添加成功");  
    }    catch (Exception e) {  
        return Response.failure("添加失败");  
    }}