開發平臺
阿新 • • 發佈：2020-09-10
前端頁面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-2.1.1.js" type="text/javascript"></script><title>Title</title>
</head>
<body>
<form action="#" class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label>名稱:</label>
<div class="layui-inline">
<input type="text" name="getwayApiName" autocomplete="off" placeholder="請輸入名稱"class="layui-input">
</div>
狀態:
<div class="layui-inline">
<select name="state">
<option value="">請選擇</option>
<option value="0">無效</option>
<option value="1">有效</option></select>
</div>
<button class="layui-btn" lay-submit lay-filter="customer-table">搜尋</button>
</div>
</div>
</form>
<script type="text/html" id="customer-head-bar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="goEdit"><i class="layui-icon"></i>新增</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon"></i>刪除
</button>
</div>
</script>
<script type="text/html" id="customer-customer-bar">
<a class="layui-btn layui-btn-xs" lay-event="edit-customer">編輯</a>
</script>
<table class="layui-table" lay-filter="customer-table" id="customer-table"></table>
<script type="text/javascript" >
layui.use(['table', 'layer', 'form'], function () {
var table = layui.table;
var layer = layui.layer;
var form = layui.form;
form.render();
table.render({
id: "customer-table",
elem: '#customer-table'
, toolbar: '#customer-head-bar'
, cellMinWidth: 80
, url: 'router/getRouter' //資料介面
, page: true //開啟分頁
, cols: [[
{checkbox: true},
{field: 'id', title: 'ID', sort: true}
, {field: 'getwayApiName', title: '路由名稱'}
, {field: 'insideApiUrl', title: '服務介面地址'}
, {field: 'serviceld', title: '服務名稱'}
, {field: 'description', title: '介紹資訊'}
, {
field: 'state', title: '狀態', templet: function (data) {
return (data.state == 1) ? '<span class="layui-badge layui-bg-green">有效</span>' : '<span class="layui-badge layui-bg-red" >無效</span>'
}
}
,{
field: 'idempotents', title: '冪等性', templet: function (data) {
return (data.idempotents == 1) ? '<span class="layui-badge layui-bg-green">冪等</span>' : '<span class="layui-badge layui-bg-red" >非冪等</span>'
}
}
,{
field: 'needfee', title: '是否收費', templet: function (data) {
return (data.needfee == 1) ? '<span class="layui-badge layui-bg-blue">收費</span>' : '<span class="layui-badge layui-bg-green" >免費</span>'
}
}
, {fixed: 'right', title: '操作', toolbar: '#customer-customer-bar', width: 180}
]]
});
//頭工具欄事件
table.on('toolbar(customer-table)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id); //獲取選中行狀態
switch (obj.event) {
case 'goEdit':
openEditWindow(null);
break;
case 'delete':
var data = checkStatus.data;
var str = JSON.stringify(data);
alert(str)
layui.$.ajax({
url: "router/delete",
type: "post",
contentType: "application/json",
data: str,
success: function (ret) {
alert(ret)
layer.close(layer.index);
window.location.reload();
}
})
break;
}
;
});
//監聽行工具事件
table.on('tool(customer-table)', function (obj) {
var data = obj.data;
switch (obj.event) {
case 'edit-customer': {
openEditWindow(data);
break;
}
}
});
function openEditWindow(data) {
layer.open({
type: 1,
content: data == null ? $('#customer-add-layer').html():$('#customer-edit-layer').html(),
title: '編輯'
, area: ['500px', '400px'],
btn: ['提交', '取消'] //可以無限個按鈕
, yes: function (index, layero) {
layer.load()
$.ajax({
url: "router/" + (data == null ? 'add' : 'update'),
// url: '/sys/customer/update',
data: data == null ?$("#customer-add-form").serialize():$("#customer-edit-form").serialize(),
method: 'post',
success: function (result) {
if (result.status) {
table.reload('customer-table', {});
layer.close(index);
} else {
alert(result.message)
}
layer.closeAll('loading');
}
})
}, success: function (layero, index) {
form.render()
if (data != null) {
form.val("customer-edit-form", data);
form.val("customer-edit-form", {
"state": data.state + ""
});
}
}
});
}
form.on('submit(customer-table)', function (data) {
table.reload('customer-table', {
page: {
curr: 1 //重新從第 1 頁開始
},
where: data.field
});
return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});
})
;
</script>
<script type="text/html" id="customer-add-layer">
<form id="customer-add-form" style="width: 80%" class="layui-form" lay-filter="customer-edit-form">
<input type="hidden" name="id">
<div class="layui-form-item">
<label class="layui-form-label">路由名稱</label>
<div class="layui-input-block">
<input type="text" name="getwayApiName" required lay-verify="required" placeholder="請輸入路由名稱"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">服務介面地址</label>
<div class="layui-input-block">
<input type="text" name="insideApiUrl" required lay-verify="required" placeholder="請輸入服務介面地址"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">服務名稱</label>
<div class="layui-input-block">
<input type="text" name="serviceld" required lay-verify="required" placeholder="請輸入服務名稱"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">介紹資訊</label>
<div class="layui-input-block">
<input type="text" name="description" required lay-verify="required" placeholder="請輸入地址"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">狀態</label>
<div class="layui-input-block">
<input type="radio" name="state" title="有效" value="1" checked/>
<input type="radio" name="state" title="無效" value="0"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">冪等性</label>
<div class="layui-input-block">
<input type="radio" name="idempotents" title="冪等" value="1" checked/>
<input type="radio" name="idempotents" title="非冪等" value="0"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否收費</label>
<div class="layui-input-block">
<input type="radio" name="needfee" title="收費" value="1" checked/>
<input type="radio" name="needfee" title="免費" value="0"/>
</div>
</div>
</form>
</script>
controller控制層：
@Controller
@RequestMapping("/router")
public class RouterController {
@Autowired
private RouterService routerService;
@RequestMapping("/getRouter")
@ResponseBody
public Map getRouter(Integer page,Integer limit,String getwayApiName,Integer state){
Router router = new Router();
if (getwayApiName != null && getwayApiName != ""){
router.setGetwayApiName(getwayApiName);
}
if (state == null){
state = 2;
}
List<Router> routerList = routerService.getAll(page, limit,router.getGetwayApiName(),state);
List<Router> routers = routerService.find();
Map<String,Object> map = new HashMap<>();
map.put("msg", "查詢失敗");
map.put("code", 0);
map.put("data", routerList);
map.put("count",routers.size());
return map;
}
@RequestMapping("/add")
@ResponseBody
public Map addRouter(String getwayApiName,String insideApiUrl,String serviceld,String description,int state,int idempotents,int needfee){
Router router = new Router(0,getwayApiName,insideApiUrl,serviceld,description,state,idempotents,needfee);
System.out.println(router);
routerService.insertRouter(router);
Map<String,String> map = new HashMap<>();
map.put("status", "true");
return map;
}
@RequestMapping("/delete")
@ResponseBody
public String deleteRouter(@RequestBody Router[]routers){
routerService.deleteRouter(routers);
return "success";
}
@RequestMapping("/update")
@ResponseBody
public Map updateRouter(int id,String getwayApiName,String insideApiUrl,String serviceld,String description,int state,int idempotents,int needfee) {
Router router = new Router(id,getwayApiName,insideApiUrl,serviceld,description,state,idempotents,needfee);
routerService.updateRouter(router);
Map<String,String> map = new HashMap<>();
map.put("status", "true");
return map;
}
}
service層：
public interface RouterService {
List<Router> getAll(int page,int size,String getwayApiName,int state);
boolean insertRouter(Router router);
boolean updateRouter(Router router);
boolean deleteRouter(Router[]router);
Router findById(int id);
List<Router> find();
dao層：
public interface RouterDao {
List<Router> findAll(@Param("page")int page,@Param("size")int size,@Param("getwayApiName")String getwayApiName,@Param("state")int state);
int insertRouter(Router router);
int updateRouter(Router router);
int deleteRouter(Router router);
Router findById(int id);
List<Router> find();
}
效果展示：