【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教程