                        課程
                    
                        /后端開發
                        
                            /Java
                        
                        /MyBatis-Plus + SpringBoot實現簡單權限管理

客戶新增，增加按鈕點擊后無法彈窗頁面

/**
?*?進入新增頁
?*?@return
?*/
@GetMapping("toAdd")
public?String?toAdd(){
????return?"customer/customerAdd";
}


/**
?*?新增客戶
?*?@param?customer
?*?@return
?*/
@PostMapping
@ResponseBody
public?R<Object>?add(@RequestBody?Customer?customer){
????boolean?success?=?customerService.save(customer);
????if?(success){
????????return??R.ok(null);
????}
???return?R.failed("操作失敗");
}

customerAdd.html：

<!DOCTYPE?html>
<html?xmlns:th="http://www.thymeleaf.org">
<head>
???<meta?charset="UTF-8">

</head>
<body>
<form?class="layui-form"??id="addForm"
?????method="post"?th:action="@{/customer}">
???<div?class="layui-form-item">
??????<label?class="layui-form-label">真實姓名</label>
??????<div?class="layui-input-block">
?????????<input?type="text"?name="realName"?placeholder="請輸入姓名"
???????????????autocomplete="off"?class="layui-input"?lay-verify="required"?maxlength="50">
??????</div>
???</div>
???<div?class="layui-form-item">
??????<label?class="layui-form-label">性別</label>
??????<div?class="layui-input-block">
?????????<input?type="radio"?name="sex"?value="男"?title="男">?<input
????????????type="radio"?name="sex"?value="女"?title="女"?checked>
??????</div>
???</div>
???<div?class="layui-form-item">
??????<label?class="layui-form-label">年齡</label>
??????<div?class="layui-input-block">
?????????<input?type="text"?name="age"?placeholder="請輸入年齡"?autocomplete="off"
???????????????class="layui-input"?lay-verify="number"?maxlength="3">
??????</div>
???</div>
???<div?class="layui-form-item">
??????<label?class="layui-form-label">郵箱</label>
??????<div?class="layui-input-block">
?????????<input?type="text"?name="email"?placeholder="請輸入郵箱"
???????????????autocomplete="off"?class="layui-input"?lay-verify="email"?maxlength="100">
??????</div>
???</div>
???<div?class="layui-form-item">
??????<label?class="layui-form-label">手機號碼</label>
??????<div?class="layui-input-block">
?????????<input?type="text"?name="phone"?placeholder="手機號碼"
???????????????autocomplete="off"?class="layui-input"?lay-verify="phone"?maxlength="11">
??????</div>
???</div>
???<div?class="layui-form-item">
??????<label?class="layui-form-label">地址</label>
??????<div?class="layui-input-block">
?????????<input?type="text"?name="address"?placeholder="地址"
???????????????autocomplete="off"?class="layui-input"?maxlength="200">
??????</div>
???</div>
???<div?class="layui-form-item">
??????<div?class="layui-input-block">
?????????<button?class="layui-btn"?lay-submit?lay-filter="addSubmit">立即提交</button>
?????????<button?type="reset"?class="layui-btn?layui-btn-primary">重置</button>
??????</div>
???</div>
</form>
</body>
</html>

customerList.html文件：

<!DOCTYPE?html>
<html?xmlns:th="http://www.thymeleaf.org">
<head>
<meta?charset="UTF-8">
???<link?rel="stylesheet"??th:href="@{/webjars/layui/css/layui.css}">
</head>
<body>

???<div?class="layui-form-item">

??????<div?class="layui-inline">
?????????<label?class="layui-form-label">真實姓名</label>
?????????<div?class="layui-input-inline"?style="width:?150px;">
????????????<input?type="text"?id="realName"?autocomplete="off"?class="layui-input">
?????????</div>
??????</div>

??????<div?class="layui-inline">
?????????<label?class="layui-form-label">手機號碼</label>
?????????<div?class="layui-input-inline"?style="width:?150px;">
????????????<input?type="text"?id="phone"?autocomplete="off"
???????????????class="layui-input">
?????????</div>
??????</div>

??????<div?class="layui-inline">
?????????<div?class="layui-input-inline">
????????????<button?class="layui-btn"?onclick="query()">查詢</button>
?????????</div>
??????</div>

???</div>

???<button?class="layui-btn"?onclick="toAdd()">增加</button>

???<table?id="customerList"></table>

???<script?th:src="@{/webjars/layui/layui.all.js}"></script>
???<script?th:src="@{/webjars/jquery/jquery.js}"></script>
???<script?th:src="@{/js/customer/customer.js}"></script>

???<script?type="text/html"?id="barDemo">
??????<a?class="layui-btn?layui-btn-xs"?lay-event="detail">查看</a>
??????<a?class="layui-btn?layui-btn-xs"?lay-event="edit">編輯</a>
??????<a?class="layui-btn?layui-btn-danger?layui-btn-xs"?lay-event="del">刪除</a>
???</script>
</body>
</html>

customer.js文件：

var?table??=?layui.table;

//第一個實例
var?tableIns?=?table.render({
????elem:'#customerList'
????,url:'/customer/list'?//數據接口
????,page:?true?//開啟分頁

????,parseData:?function(res){?//res?即為原始返回的數據
????????return?{
????????????"code":?res.code,?//解析接口狀態
????????????"msg":?res.msg,?//解析提示文本
????????????"count":?res.data.count,?//解析數據長度
????????????"data":?res.data.records?//解析數據列表
????????};
????}
????,cols:?[[?//表頭
????????{field:'realName',title:?'真實姓名'}
????????,{field:?'sex',title:?'性別'}
????????,{field:?'age',title:?'年齡'}
????????,{field:?'phone',title:?'手機號'}
????????,{field:?'createTime',title:?'創建時間'}
????????,{title:?'操作',toolbar:'#barDemo'}
????]]
});

/**
?*?按條件查詢
?*/
function?query()?{
????tableIns.reload({

????????where:{?//設定異步數據接口的額外參數，任意設
????????????realName:?$("#realName").val()
????????????,phone:$("#phone").val()
????????}
????????,page:?{
????????????curr:?1?//重新從第一頁開始
????????}

????});
}

function?toAdd()?{
????$.get('/customer/toAdd',?function?(res)?{
????????layui.open({
????????????type:?1
????????????,?title:?'新增客戶'
????????????,?area:?['800px',?'450px']
????????????,?content:?res
????????});
????????layui.form.render();
???????layui.form.on('submit(addSubmit)',?function?(data)?{
????????????$.ajax({
????????????????url:?data.form.action
????????????????,?async:?false
????????????????,?type:?'POST'
????????????????,?contentType:?'application/json;charset=utf-8'
????????????????,?data:?JSON.stringify(data.field)
????????????????,?success:?function?(res)?{
????????????????????if?(res.code?==?0)?{
????????????????????????layer.closeAll();
????????????????????????query();
????????????????????}?else?{
????????????????????????layer.alert(res.msg);
????????????????????}
????????????????}

????????????});
????????????return?false;?//阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
????????});

????});
}