Kite的学习历程之SpringBoot中添加以及修改
Kite学习框架的第十七天
1. 使用thymeleaf抽取公共部分
1. 1 首先找到页面公共的部分
公共的部分为：上面的部分， 左边的部分。
1.2 抽取的方法
1、抽取公共片段
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名
3、默认效果：
insert的公共片段在div标签中
如果使用th:insert等属性进行引入，可以不用写~{}：
行内写法可以加上：[[~{}]];[(~{})]；
三种引入公共片段的th属性：
th:insert：将公共片段整个插入到声明引入的元素中
th:replace：将声明引入的元素替换为公共片段（我主要使用的方法）
th:include：将被引入的片段的内容包含进这个标签中
我这里公共部分的代码
第一种方式：th:fragment=“topbar”
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
第二种方式：使用id
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
公共部分的引入：
使用 replace的方式引入
<div th:replace="commons/bar::topbar"></div>
<div th:replace="commons/bar::#sidebar"></div>
2. 员工的添加
员工添加的页面
<form>
<div class="form-group">
<label>LastName</label>
<input type="text" class="form-control" placeholder="zhangsan">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="[email protected]">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" class="form-control" placeholder="zhangsan">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
创建控制类
/**
* 员工添加的控制类
*/
@GetMapping("/emp")
public String toAddPage(Model model){
//将查询到的部门信息显示到页面
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
//跳转到添加页面
return "emp/add";
}
/**
* 员工添加请求
* SpringMVC自动将请求参数和入参对象的属性进行一一绑定：要求了请求参数的名字和javabean的入参对象里面的属性名一样
* @return
*/
@PostMapping("/emp")
public String addEmp(Employee employee){
//来到员工列表
//redirect：表示重定向到一个地址 / 表示当前的项目路径
//forward：表示转发到一个地址
//System.out.println(employee);
employeeDao.save(employee);
return "redirect:/emps";
}
3 .员工的修改
我这里使用的修改页面与添加页面使用的是同一个页面，不过在里面添加了判断条件
主要的判断条件就是：是否含有通过id获取的员工对象
emp。然后通过th:if进行判断
add.html页面 的代码
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
<style type="text/css">
/* Chart.js */
@-webkit-keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
@keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
.chartjs-render-monitor {
-webkit-animation: chartjs-render-animation 0.001s;
animation: chartjs-render-animation 0.001s;
}
</style>
</head>
<body>
<!--
引入抽取的topbar
模板的命名：使用thymeleaf的前后配置规则进行解析
-->
<div th:replace="commons/bar::topbar"></div>
<div class="container-fluid">
<div class="row">
<!-- 引入侧边-->
<div th:replace="commons/bar::#sidebar(activeUrl='emps')"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<!--这里需要区分是修改员工，还是添加员工-->
<form th:action="@{/emp}" method="post">
<!--
发送put请求修改员工数据
1.SpringMVC配置HiddenHttpMethod；（SpringBoot已经为我们配置好了）
2.创建一个post表单
3.创建input项，name=_method;值就是我们指定的请求方式
-->
<input type="hidden" name="_method" value="put" th:if="${emp!=null}">
<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
<div class="form-group">
<label>LastName</label>
<input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
</div>
<div class="form-group">
<label>Email</label>
<input name="email" type="email" class="form-control" placeholder="[email protected]" th:value="${emp!=null}?${emp.email}">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.getGender()==1}">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<!--部门信息-->
<label>department</label>
<select class="form-control" name="department.id" >
<option th:selected="${emp!=null}?${dept.id==emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:MM')}">
</div>
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="asserts/js/popper.min.js"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#007bff',
borderWidth: 4,
pointBackgroundColor: '#007bff'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
}
}
});
</script>
</body>
</html>
控制类的代码
- 首先获取要修改的员工的id
/**
* 修改员工的数据，查出要修改的员工，回显给添加页面
* @param id
* @return
*/
@GetMapping("emp/{id}")
public String toEditPage(@PathVariable("id") Integer id, Model model){
Employee employee = employeeDao.get(id);
model.addAttribute("emp",employee);
//页面还要获取所有的部门列表
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
//回到修改页面（add是一个修改和添加二合一的页面）
return "emp/add";
}
- 获取修改后的对象，进行数据存储
/**
* 员工的修改：需要提交员工的id
* @param employee
* @return
*/
@PutMapping("/emp")
public String updateEmployee(Employee employee){
System.out.println("修改员工的值："+ employee);
employeeDao.save(employee);
return "redirect:/emps";
}
上面就是今天的学习内容了，今天发现了一个网页的框架往网站
前端框架连接