核心思路:
前端在导航栏新增一个添加客户信息栏目,点击后切换到 /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("添加失败");
}}