【Spring Boot】7.web开发3

时间  2019-11-11
标签 Spring Boot 7.web web 开发 栏目 HTML 繁體版
原文   原文链接

简介

前面咱们完成了基本的框架搭建，如今咱们继续WEB的开发javascript

员工添加

咱们已经完成了跳转到员工添加页面的操做以及页面的制做，如今咱们来完善员工添加页面：html

add.html

<body>
		<div th:replace="commons/bar::#topbar"></div>
		<div class="container-fluid">
			<div class="row">
				<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<form action="/emp" method="post">
						<div class="form-group">
							<label>LastName</label>
							<input name="lastName" type="text" class="form-control" placeholder="zhangsan">
						</div>
						<div class="form-group">
							<label>Email</label>
							<input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com">
						</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 name="department.id" class="form-control">
								<option th:each="department:${departments}" th:value="${department.id}" th:text="${department.departmentName}"></option>
							</select>
						</div>
						<div class="form-group">
							<label>Birth</label>
							<input name="birth" type="text" class="form-control" placeholder="zhangsan">
						</div>
						<button type="submit" class="btn btn-primary">添加</button>
					</form>
				</main>
			</div>
		</div>
        </body>

其中java

  • 咱们应该按照restful风格定义提交页面，即post形式的emp地址；
  • 接受处理的controller提供一个emp对象给咱们传入，为了让spring mvc底层直接映射，须要将表单的name属性的值表述的和emp对应的属性同样；另外要注意部门属性那里，写为department.id这样进行内部对象的二次属性映射；

EmployeeController.class

@Controller
public class EmployeeController {

    @Autowired
    private DepartmentDao departmentDao;

    @Autowired
    private EmployeeDao employeeDao;

    @RequestMapping("/emps")
    @GetMapping
    public String emps(Model model){
        model.addAttribute("emps", employeeDao.getAll());
        return "emp/list";
    }

    /**
     * 接收前往员工添加页面的请求，并跳转到添加页面emp/add.html
     * @return
     */
    @GetMapping("/emp")
    public String toAddPage(Model model){
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("departments", departments);
        return "emp/add";
    }

    @PostMapping("/emp")
    public String emp(Employee emp){
        // 添加员工到内存库
        employeeDao.save(emp);
        // 重定向到emps请求
        return "redirect:/emps";
    }
}

其中jquery

  • 日期格式springboot默认处理'yyyy/MM/dd'格式，若是咱们须要修改的话在配置文件里配置属性:spring.mvc.date-format，如spring.mvc.date-format=yyyy-MM-dd将默认请求日期格式yyyy/MM/dd修改成yyyy-MM-dd，则此时咱们提交的日期内容必须为'2017-12-01'这样的，不然会报错；
  • 经过@GetMapping和@PostMapping处理相同地址但不一样的请求方式的请求(method=post or get),get是默认形式，知足restful，此处是提交数据，所以咱们处理的是post方式提交的/emp请求；
  • 重定向(redirect:)、转发(forward:),/表明当前项目路径；
  • 在controller的请求方法处直接添加对象参数，spring mvc会为咱们自动的进行字段绑定，将表单数据和参数对象进行数据映射，前提是咱们保证对应的字段名和表单name属性相等；

员工信息修改

点击编辑按钮来到修改页面

教程这里将添加和修改员工信息的页面进行了合成（add.html），其实总体看下来，这样作有些不必，其优势是明显的，修改的时候能够同步进行。可是付出的代价太大了（太多的三元判断，代码可阅读性差），因此推荐仍是新建一个edit.html页面好些。spring

首先咱们修改编辑按钮的跳转连接bootstrap

list.html

<a class="btn btn-sm btn-primary" th:href="@{/emp/} + ${emp.id}">edit</a>

注意拼接字符串的写法。而后须要控制台映射/emp/{id}进行处理，并跳转到员工信息修改的页面。springboot

EmployeeController.class

@GetMapping("/emp/{id}")
    public String toEditPage(@PathVariable(value = "id") Integer id,
                             Model model){
        Employee employee = employeeDao.get(id);
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("departments", departments);
        model.addAttribute("emp", employee);
        return "emp/edit";
    }

其中：restful

  • toEditPage方法映射了/emp/{id}路径，{id}是路径变量，咱们能够经过添加参数，并注明注解@PathVariable("id")的方式获取到路径变量的值，即咱们的请求通常是/emp/1000其中1000是员工的ID，经过此ID，咱们就能够肯定当前员工的信息了;

那么，接下来，复制add.html内容为新文件edit.html，并修改相应的信息。mvc

edit.html

<div th:replace="commons/bar::#topbar"></div>
		<div class="container-fluid">
			<div class="row">
				<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<form action="/emp" method="post">
						<!-- put方式提交 -->
						<input type="hidden" name="_method" value="put"/>
						<!-- 提供ID属性 -->
						<input type="hidden" name="id" th:value="${emp.id}" />
						<div class="form-group">
							<label>LastName</label>
							<input name="lastName" type="text" class="form-control" th:value="${emp.id}">
						</div>
						<div class="form-group">
							<label>Email</label>
							<input name="email" type="email" class="form-control" th:value="${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.gender == 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.gender == 0}">
								<label class="form-check-label">女</label>
							</div>
						</div>
						<div class="form-group">
							<label>department</label>
							<select name="department.id" class="form-control">
								<option th:selected="${emp.department.id == department.id}" th:each="department:${departments}" th:value="${department.id}" th:text="${department.departmentName}"></option>
							</select>
						</div>
						<div class="form-group">
							<label>Birth</label>
							<input name="birth" type="text" class="form-control" th:value="${#dates.format(emp.birth, 'yyy-MM-dd HH:mm')}">
						</div>
						<button type="submit" class="btn btn-primary">修改</button>
					</form>
				</main>
			</div>
		</div>

注意其中进行信息展现的代码，另外：app

  • 此处提交方式应该设置为put，可是表单提交是没有这种选择的，所以，咱们须要走另一种方式进行put方式提交。所幸springMvc配置了一个Filter，名叫HiddenHttpMethodFilter，他能将咱们请求转化成指定的方式，而且SpringBoot已经将该过滤器自动的加载到了启动容器中，咱们直接使用便可：在edit.html页面建立一个post表单，而后再建立一个hidden类型的input项，其name属性设置为咱们指定的请求方式(put)便可；

接下来的工做就是处理这里提交的put请求，而后修改员工信息。

EmployeeController.class

@PutMapping("/emp")
    public String updateEmp(Employee emp){
        // 修改员工信息
        employeeDao.save(emp);
        // 重定向到emps请求
        return "redirect:/emps";
    }

员工删除

首先，写一个映射方法，用于处理delete方式提交的请求:

EmployeeController.class

@DeleteMapping("/emp/{id}")
    public  String deleteEmp(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return "redirect:/emps";
    }

在页面，对删除按钮进行操做，但这里一样须要修改其提交方式，咱们能够每次生成delete按钮的时候建立一个表单，但这显然比较笨重。咱们能够考虑将表单提出来，而后用其余的脚本将事件进行映射便可。

所以，咱们不妨经过jquery进行一下按钮事件绑定，叫其行为进行修改，使页面更加的简洁。

list.html

<body>
		<div th:replace="commons/bar::#topbar"></div>
		<div class="container-fluid">
			<div class="row">
				<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2><a class="btn btn-sm btn-primary" th:href="@{/emp}">add</a></h2>
					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
								<tr>
									<th>#</th>
									<th>lastName</th>
									<th>email</th>
									<th>gender</th>
									<th>department</th>
									<th>birth</th>
									<th>operate</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="emp:${emps}">
									<td th:text="${emp.id}"></td>
									<td th:text="${emp.lastName}"></td>
									<td th:text="${emp.email}"></td>
									<td th:text="${emp.gender} == 1? '男':'女'"></td>
									<td th:text="${emp.department.departmentName}"></td>
									<td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>
									<td><a class="btn btn-sm btn-primary" th:href="@{/emp/} + ${emp.id}">edit</a>
										<button class="btn btn-sm btn-warning" id="btnDelete" th:attr="uri=@{/emp/} + ${emp.id}">delete</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</main>
			</div>
		</div>
		<form method="post" id="deleteForm">
			<input type="hidden" name="_method" value="delete" />
		</form>
		<!-- 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>
			$(function(){
			    $("#btnDelete").click(function(){
					$("#deleteForm").attr("action", $(this).attr("uri")).submit();
				});
			})

		</script>
	</body>

至此为止，咱们已经完成了一个基本的CURD网站，接下来，将学习更深层次的业务处理办法，好比，错误处理机制。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程