*springboot專案介紹
-
實作一個后臺管理系統,完成用戶資訊的統計*
-
工具技術：spring boot+mybatisplus+thymeleaf+redis；
-
spring boot可以簡化開發流程，直接省去服務器的部署和視圖決議器的配置，最大的優勢實作很多的工具的自動化配置（里面集成大量開發需要的功能，支持自定義拓展）
mybatis-pluss可以很輕易的完成增刪改查功能，而不要自己寫SQL陳述句（對于復雜的連表查詢可能無法支持，需要自己拓展sql）；在大型專案開發可以結合注解開發實作資料庫的操作public City getById(Long id); @Insert("insert into city(`name`,`state`,`country`) values(#{name},#{state},#{country})") @Options(useGeneratedKeys = true,keyProperty = "id") public void insert(City city); //2 mybatisplus @Mapper public interface UserMapper extends BaseMapper<User> { } ``` -
thymeleaf是一個簡要輕量級的前端框架，可以實作前端html頁面和后端介面的系結（可以自動識別，需要添加其命名空間）
java xmlns:th="http://www.thymeleaf.org" -
redis是一個輕量級的非關系型快取資料庫，一般專案中結合mysql使用可以是資料庫的使用達到最優， 使用前需要進行配置（官方推薦linux系統，在windows中需要下載特定的redis包）
增刪改查CURD
1.增加用戶
1）前端+后端代碼奉獻
//1.添加頁面
@GetMapping("/toAdd")
public String toAdd(){
return "table/add";
}
@PostMapping("/user/add")
public String addUser(User user){
System.out.println(user);
userService.save(user);
return "redirect:/dynamic_table"; //重定向請求 攜帶引數
}
<form method="post" th:action="@{/user/add}">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="瑤瑤">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" name="email" id="exampleInputEmail1" placeholder="leejianlove@163.com">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input type="radio" class="form-control" name="gender" placeholder="男" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-control" name="gender" placeholder="男" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" name="birth" class="form-control">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-success">Submit(添加)</button>
</form>
2）分析：添加一個用戶：主要有以下幾點:1 主頁main中點擊添加按鈕---->走toAdd請求跳轉add.html頁面；填寫表單form項---->點擊提交走**/user/add**請求，后端執行保存save方法完成添加，
2.修改用戶
1）修改和增加用戶類似，也是對user物件的操作，在add.html中修改form表單，并且改變一些邏輯，
<form method="post" th:action="@{/user/update}">
<input type="hidden" name="id" th:value="${users.id}">
<div class="form-group">
<label for="name">Name</label>
<input th:text="${users.id}" type="text" class="form-control" id="name" name="name" placeholder="瑤瑤">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input th:value="${users.password}"type="password" class="form-control" name="password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label>Email address</label>
<input th:value="${users.email}" type="email" class="form-control" name="email" id="exampleInputEmail1" placeholder="leejianlove@163.com">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input th:checked="${users.gender==1}" type="radio" class="form-control" name="gender" placeholder="男" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input th:checked="${users.gender==0}" type="radio" class="form-control" name="gender" placeholder="男" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>Birth</label>
<input th:value="${users.birth}" type="text" name="birth" class="form-control">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-success">Submit(修改)</button>
</form>
//2：去修改頁面
@GetMapping("/user/toUpdate/{id}")
public String toUpdate(@PathVariable("id") int id,
Model model){
//可能需要查資料傳給前端:這里沒有需要轉換的資料 故不查
User user = userService.getById(id);
model.addAttribute("users",user); //前端的users值
//去頁面
return "table/update";
}
@PostMapping("/user/update")
public String updateUser(User user,Model model){
boolean updateById = userService.updateById(user);
model.addAttribute("idCount",updateById);
return "redirect:/dynamic_table"; //重定向請求 攜帶引數
}
2）分析與注釋：前端表單的幾個重要屬性：form標簽的action請求路徑、method（a標簽走的get請求，form表單走post請求）；input標簽的name屬性（決定了是否提交請求）
3.洗掉用戶
洗掉一個用戶是最簡單的操作，只要在用戶串列主頁中引入標簽按鈕，洗掉后則執行remove方法，最終在回傳用戶list主頁，
<td>
<a th:href="@{/user/delete/{id}(id=${user.id},pn=${users.current})}" class="btn btn-danger btn-sm" type="button">洗掉</a>
</td>
4.查詢用戶
所有的操作都在此基礎主頁中操作，該頁面可以展示出所有用戶的資訊表格，外加洗掉、修改、添加按鈕，對應不同的操作，且每次操作完都應該回傳更新后的主頁，
1）查詢代碼
@GetMapping("/dynamic_table")
public String dynamic_table(@RequestParam(value="pn",defaultValue = "1") Integer pn, Model model){
//從資料庫中查出user表中的用戶進行展示
//構造分頁引數
Page<User> page = new Page<>(pn, 2);
//呼叫page進行分頁
Page<User> userPage = userService.page(page, null);
model.addAttribute("users",userPage); //前端的users值
return "table/dynamic_table";
}
<section class="panel">
<header class="panel-heading">
Dynamic Table
<h2><a class="btn btn-sm btn-success" th:href="@{/toAdd}">添加</a></h2>
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="panel-body">
<div class="adv-table">
<table class="display table table-bordered table-striped" id="dynamic-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>email</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="gradeX" th:each="user: ${users.records}">
<td th:text="${user.id}"></td>
<td>[[${user.name}]]</td>
<td th:text="${user.password}">Win 95+</td>
<td th:text="${user.gender==0?'女':'男'}">Win 95+</td>
<td th:text="${user.email}">4</td>
<td th:text="${#dates.format(user.getBirth(),'yyyy-MM-dd HH:mm:ss')}">Win 95+</td>
<td>
<a th:href="@{/user/delete/{id}(id=${user.id},pn=${users.current})}" class="btn btn-danger btn-sm" type="button">洗掉</a>
</td>
<td>
<a th:href="@{/user/toUpdate/{id}(id=${user.id})}" class="btn btn-primary btn-sm" type="button">修改</a>
</td>
</tr>
</tfoot>
</table>
<div class="row-fluid">
<div class="span6">
<div class="dataTables_info" id="dynamic-table_info">
當前第[[${users.current}]]頁 總計 [[${users.pages}]]頁 共[[${users.total}]]條記錄
</div>
</div>
<div class="span6">
<div class="dataTables_paginate paging_bootstrap pagination">
<ul>
<li class="prev disabled"><a href="#">← 前一頁</a></li>
<li th:class="${num == users.current?'active':''}" th:each="num:${#numbers.sequence(1,users.pages)}" >
<a th:href="@{/dynamic_table(pn=${num})}">[[${num}]]</a>
</li>
<li class="next disabled"><a href="#">下一頁 → </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
2）其中table/dynamic_table即所謂的查詢主頁，所選擇的方法是mybatisplus中自帶的分頁顯示物件，可以通過構造分頁引數后在前端通過表格的形式顯示資料，
5.結果展示
6.小結
1）前端的書寫很難，一般后端開發人員中是需要模板參考的，推薦***https://www.bootcss.com/***官網，框架的學習主流是vue最多，但在基礎學習階段也還是需要了解jsp在ssm中的廣泛應用，Thymeleaf的應用也可以了解，根據官網教程選擇學習（列如實作資料的遍歷foreach），
2）在后端的學習中要學會總結，組件很多，要學會看官方檔案學習，隨著物聯網的快速發展，一套有一套的開發框架、微服務的解決辦法不斷推出，說明后端是活到老學到老，時刻注意與時俱進，
覺得本文不錯，可以打賞一波，想要原始碼以及各種開發工具溝通的小伙伴私信都可
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/396172.html
標籤：其他