                        課程
                    
                        /后端開(kāi)發(fā)
                        
                            /Java
                        
                        /MyBatis-Plus + SpringBoot實(shí)現(xiàn)簡(jiǎn)單權(quán)限管理

客戶(hù)新增，增加按鈕點(diǎn)擊后無(wú)法彈窗頁(yè)面

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


/**
?*?新增客戶(hù)
?*?@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">真實(shí)姓名</label>
??????<div?class="layui-input-block">
?????????<input?type="text"?name="realName"?placeholder="請(qǐng)輸入姓名"
???????????????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="請(qǐng)輸入年齡"?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="請(qǐng)輸入郵箱"
???????????????autocomplete="off"?class="layui-input"?lay-verify="email"?maxlength="100">
??????</div>
???</div>
???<div?class="layui-form-item">
??????<label?class="layui-form-label">手機(jī)號(hào)碼</label>
??????<div?class="layui-input-block">
?????????<input?type="text"?name="phone"?placeholder="手機(jī)號(hào)碼"
???????????????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">真實(shí)姓名</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">手機(jī)號(hào)碼</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()">查詢(xún)</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;

//第一個(gè)實(shí)例
var?tableIns?=?table.render({
????elem:'#customerList'
????,url:'/customer/list'?//數(shù)據(jù)接口
????,page:?true?//開(kāi)啟分頁(yè)

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

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

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

????});
}

function?toAdd()?{
????$.get('/customer/toAdd',?function?(res)?{
????????layui.open({
????????????type:?1
????????????,?title:?'新增客戶(hù)'
????????????,?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;?//阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。
????????});

????});
}

慕寶麟

2021-06-15

源自：MyBatis-Plus + SpringBoot實(shí)現(xiàn)簡(jiǎn)單權(quán)限管理 7-2

關(guān)注問(wèn)題我要回答

699

操作

收起

2 回答

老猿
2021-06-28

同學(xué)，問(wèn)題現(xiàn)在已經(jīng)解決了嗎？如果還沒(méi)解決，你可以按F12使用瀏覽器的調(diào)試模式，看看點(diǎn)擊新增按鈕時(shí)，JS是否報(bào)錯(cuò)，如果報(bào)錯(cuò)分析一下原因。如果不報(bào)錯(cuò)，你可以debug一下新增方法，看看調(diào)用沒(méi)，是什么原因?qū)е聫棽怀鰜?lái)。