四 前端页面
1 index.html – static 目录下的首页
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>客户端关系系统</title>
</head>
<body>
<a href="/customer" target="_blank">客户管理</a><br>
<a href="/sysDictType" target="_blank">数据字典</a>
</body>
</html>
2 customer 包对应页面 – templates 目录下
① view.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><meta charset="UTF-8"><title>客户列表</title><link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"><script src="/js/jquery/jquery.min.js"></script><script src="/js/bootstrap/js/bootstrap.js"></script>
</head>
<body style="margin-top: 20px;margin-left: 20px"><div class="row"><div class="col-md-1"><a href="/customer/add" class="btn btn-primary">新增</a></div></div><div class="row"><table class="table table-hover"><thead><tr><th>客户名称</th><th>联系方式</th><th>常住地</th><th>最高学历</th><th>操作</th></tr></thead><tbody><tr th:each="customer:${customerList}"><td th:text="${customer.name}">Huang</td><td th:text="${customer.phone}">Huang</td><td th:text="${customer.sourceType.dict_label}">Huang</td><td th:text="${customer.schoolType.dict_label}">Huang</td><td><a th:href="|/customer/edit?id=${customer.id}|" class="btn btn-warning">编辑</a><!--另一种写法--><!--<a th:href="@{'/customer/edit/'+${customer.id}}" class="btn btn-warning">编辑</a>--></td></tr></tbody></table></div>
</body>
</html>
② add.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><meta charset="UTF-8"><title>客户信息保存</title><link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"><script src="/js/jquery/jquery.min.js"></script><script src="/js/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div style="margin-top: 20px"><form class="form-horizontal m" action="/customer/saveOrUpdate" method="post"><div class="form-group"><label class="col-sm-3 control-label is-required">客户名称：</label><div class="col-sm-8"><input name="name" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">联系方式：</label><div class="col-sm-8"><input name="phone" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">常住地：</label><div class="col-sm-8"><select class="form-control" name="sourceType.dict_value"><option th:each="dictData:${sourceTypeList}" th:text="${dictData.dict_label}"th:value="${dictData.dict_value}"></option></select></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">最高学历：</label><div class="col-sm-8"><select class="form-control" name="schoolType.dict_value"><option th:each="dictData:${schoolTypeList}" th:text="${dictData.dict_label}"th:value="${dictData.dict_value}"></option></select></div></div><div class="form-group"><label class="col-sm-6"></label><div class="col-sm-6"><input class="btn btn-primary" type="submit" value="提交"></div></div></form>
</div>
</body>
</html>
③ edit.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><meta charset="UTF-8"><title>客户信息保存</title><link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"><script src="/js/jquery/jquery.min.js"></script><script src="/js/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div style="margin-top: 20px"><form class="form-horizontal m" action="/customer/saveOrUpdate" method="post" th:object="${customer}"><input type="hidden" name="id" th:value="*{id}"><div class="form-group"><label class="col-sm-3 control-label is-required">客户名称：</label><div class="col-sm-8"><input name="name" class="form-control" th:value="*{name}" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">联系方式：</label><div class="col-sm-8"><input name="phone" class="form-control" th:value="*{phone}" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">常住地：</label><div class="col-sm-8"><select class="form-control" name="sourceType.dict_value" id="sourceTypeId"><option th:each="dictData:${sourceTypeList}" th:text="${dictData.dict_label}"th:value="${dictData.dict_value}"></option></select></div></div><script>$("#sourceTypeId").val([[${customer.sourceType.dict_value}]])</script><div class="form-group"><label class="col-sm-3 control-label is-required">最高学历：</label><div class="col-sm-8"><select class="form-control" name="schoolType.dict_value" th:field="*{schoolType.dict_value}"><option th:each="dictData:${schoolTypeList}" th:text="${dictData.dict_label}"th:value="${dictData.dict_value}"></option></select></div></div><div class="form-group"><label class="col-sm-6"></label><div class="col-sm-6"><input class="btn btn-primary" type="submit" value="提交"></div></div></form>
</div>
</body>
</html>
3 sysDictData 包对应页面 – templates 目录下
① view.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><meta charset="UTF-8"><title>数据字典明细列表</title><link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"><script src="/js/jquery/jquery.min.js"></script><script src="/js/bootstrap/js/bootstrap.js"></script>
</head>
<body style="margin-top: 20px;margin-left: 20px"><div class="row"><div class="col-md-12">数据字典:[[${sysDictType.dictName}]]</div><div class="col-md-1"><a th:href="|/sysDictData/add?dictType=${sysDictType.dictType}|" class="btn btn-primary">新增</a></div></div><div class="row"><table class="table table-hover"><thead><tr><th>编号</th><th>类型</th><th>标签</th><th>键值</th><th>排序</th><th>备注</th><th>操作</th></tr></thead><tbody><tr th:each="sysDictData:${sysDictDataList}"><td th:text="${sysDictData.dict_code}">Huang</td><td th:text="${sysDictData.dict_type}">Huang</td><td th:text="${sysDictData.dict_label}">Huang</td><td th:text="${sysDictData.dict_value}">Huang</td><td th:text="${sysDictData.dict_sort}">Huang</td><td th:text="${sysDictData.remark}">Huang</td><td><a th:href="|/sysDictData/edit?dict_code=${sysDictData.dict_code}|" class="btn btn-warning">编辑</a></td></tr></tbody></table></div>
</body>
</html>
② add.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><meta charset="UTF-8"><title>数据字典明细新增</title><link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"><script src="/js/jquery/jquery.min.js"></script><script src="/js/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div style="margin-top: 20px"><form class="form-horizontal m" action="/sysDictData/saveOrUpdate" method="post"><input type="hidden" name="dict_type" th:value="${sysDictType.dictType}"/><div class="form-group"><label class="col-sm-3 control-label is-required">字典类型：</label><div class="col-sm-8"><input name="dict_type" disabled th:value="${sysDictType.dictName}" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典标签：</label><div class="col-sm-8"><input name="dict_label" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典键值：</label><div class="col-sm-8"><input name="dict_value" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典排序：</label><div class="col-sm-8"><input name="dict_sort" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典备注：</label><div class="col-sm-8"><input name="remark" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-6"></label><div class="col-sm-6"><input class="btn btn-primary" type="submit" value="提交"></div></div></form>
</div>
</body>
</html>
③ edit.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><meta charset="UTF-8"><title>数据字典明细新增</title><link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"><script src="/js/jquery/jquery.min.js"></script><script src="/js/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div style="margin-top: 20px"><form class="form-horizontal m" action="/sysDictData/saveOrUpdate" method="post" th:object="${sysDictData}"><input type="hidden" name="dict_type" th:value="${sysDictType.dictType}"/><input type="hidden" name="dict_code" th:value="*{dict_code}"/><div class="form-group"><label class="col-sm-3 control-label is-required">字典类型：</label><div class="col-sm-8"><input name="dict_type" disabled th:value="${sysDictType.dictName}" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典标签：</label><div class="col-sm-8"><input name="dict_label" th:value="*{dict_label}" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典键值：</label><div class="col-sm-8"><input name="dict_value" th:value="*{dict_value}" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典排序：</label><div class="col-sm-8"><input name="dict_sort" th:value="*{dict_sort}" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典备注：</label><div class="col-sm-8"><input name="remark" th:value="*{remark}" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-6"></label><div class="col-sm-6"><input class="btn btn-primary" type="submit" value="提交"></div></div></form>
</div>
</body>
</html>
4 sysDictType 包对应页面 – templates 目录下
① view.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><meta charset="UTF-8"><title>数据字典列表</title><link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"><script src="/js/jquery/jquery.min.js"></script><script src="/js/bootstrap/js/bootstrap.js"></script>
</head>
<body style="margin-top: 20px;margin-left: 20px"><div class="row"><div class="col-md-1"><a href="/sysDictType/add" class="btn btn-primary">新增</a></div></div><div class="row"><table class="table table-hover"><thead><tr><th>ID</th><th>名称</th><th>类型</th><th>备注</th><th>操作</th></tr></thead><tbody><tr th:each="sysDictType:${sysDictTypeList}"><td th:text="${sysDictType.dictId}">Huang</td><td th:text="${sysDictType.dictName}">Huang</td><td th:text="${sysDictType.dictType}">Huang</td><td th:text="${sysDictType.remark}">Huang</td><td><a th:href="|/sysDictData?dictType=${sysDictType.dictType}|" class="btn btn-info">列表</a><a th:href="|/sysDictType/edit?id=${sysDictType.dictId}|" class="btn btn-warning">编辑</a></td></tr></tbody></table></div>
</body>
</html>
② add.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><meta charset="UTF-8"><title>数据字典新增</title><link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"><script src="/js/jquery/jquery.min.js"></script><script src="/js/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div style="margin-top: 20px"><form class="form-horizontal m" action="/sysDictType/saveOrUpdate" method="post"><div class="form-group"><label class="col-sm-3 control-label is-required">字典名称：</label><div class="col-sm-8"><input name="dictName" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典类型：</label><div class="col-sm-8"><input name="dictType" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典备注：</label><div class="col-sm-8"><input name="remark" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-6"></label><div class="col-sm-6"><input class="btn btn-primary" type="submit" value="提交"></div></div></form>
</div>
</body>
</html>
③ edit.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><meta charset="UTF-8"><title>数据字典新增</title><link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"><script src="/js/jquery/jquery.min.js"></script><script src="/js/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div style="margin-top: 20px"><form class="form-horizontal m" action="/sysDictType/saveOrUpdate" method="post" th:object="${sysDictType}"><input type="hidden" name="dictId" th:value="${sysDictType.dictId}"/><div class="form-group"><label class="col-sm-3 control-label is-required">字典名称：</label><div class="col-sm-8"><input name="dictName" th:value="*{dictName}" class="form-control" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典类型：</label><div class="col-sm-8"><input name="dictType" disabled class="form-control" th:value="*{dictType}" type="text" required></div></div><div class="form-group"><label class="col-sm-3 control-label is-required">字典备注：</label><div class="col-sm-8"><input name="remark" class="form-control" th:value="*{remark}" type="text" required></div></div><div class="form-group"><label class="col-sm-6"></label><div class="col-sm-6"><input class="btn btn-primary" type="submit" value="提交"></div></div></form>
</div>
</body>
</html>
