四 前端页面
1 index.html -- static 目录下的首页
java
<!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
java
<!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
java
<!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
java
<!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
java
<!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
java
<!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
java
<!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
java
<!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
java
<!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
java
<!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>