用户列表显示与新增功能实现
需求, 用户列表显示和实现新增功能
1. userList.html函数显示list,并增加”用户添加”button
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<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 th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link th:href="@{/assets/css/dashboard.css}" rel="stylesheet">
</head>
<body>
<!--在原来的位置引用公共的头部元素，原来的 <nav元素就是在这里的
commonsHead：模板名，根据Spring Boot配置的Thymeleaf映射查找
head：是模板中公用的代码片段-->
<div ></div>
<div class="container-fluid">
<div class="row">
<!-- 在原来的左侧菜单位置引用抽取好的公共左侧菜单代码
1、这是使用的 id选择器 进行的引用
2、引用公共代码的片段的同时传递参数值过去-->
<div></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h2><a th:href="@{/userCRUD}" class="btn btn-primary">用户添加</a></h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>邮箱</th>
<th>性別</th>
<th>生日</th>
<th>所属部门</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- th:each 表示遍历，userList是后台的参数名；循环时每次的变量名为 user
如同JSTL 一样，当userList为null 或者大小为0 时，不会报错-->
<tr th:each="user:${userList}">
<!-- th:text 为标签赋值-->
<td th:text="${user.uId}"></td>
<!-- 这是行内写法，写成： <td th:text="${user.uName}"></td> 也是可以的-->
<td>[[${user.uName}]]</td>
<td th:text="${user.email}"></td>
<!-- 三元运算符，User的gender为0则表示女生，1表示南山-->
<td th:text="${user.gender}==0?'女':'男'"></td>
<!-- 这是 Thymeleaf 的日期格式化，如同JSTL的日期格式类似；可以官方文档-->
<td th:text="${#dates.format(user.birth, 'yyyy-MM-dd')}"></td>
<!-- 这是级联获取属性值，因为User中关联了 Department 对象-->
<td th:text="${user.department.depName}"></td>
<td>
<a class="btn btn-sm btn-primary" th:href="@{/userCRUD/}+${user.uId}">修改</a>
<button class="btn btn-sm btn-danger deleteBtn">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
</body>
2. 在UserController增加String findAllUsers(Model model)函数public String toAddUser(Model model) 函数和public String addUser(User user)
函数
@Controller
public class UserController {
@Resource
private UserDaoImpl userDaoImpl;
@Resource
private DepartmentDaoImpl departmentDao;
/**
* 跳转到用户列表页面
*
* @param model 用户设值返回页面
* @return
*/
@GetMapping("userlist")
public String findAllUsers(Model model) {
List<User> userList = userDaoImpl.getAll();
model.addAttribute("userList", userList);
/** 往前端 Thymeleaf 模板引擎时，开头不要加 "/" ，因为它默认配置的前缀就是：
* spring.thymeleaf.prefix=classpath:/templates/
*/
System.out.println("findAllUsers");
return "userList";
}
/**
* 用户添加前页面跳转---用户点击"添加"按钮
*
* @param model
* @return
*/
@GetMapping("userCRUD")
public String toAddUser(Model model){
List<Department> departmnetList=departmentDao.getDepartmentList();
model.addAttribute("departmentList",departmnetList);
return "addUser";
}
/**
* 用户添加-----用户添加提交时进入
* <p/>
* SpringMVC 自动将请求参数和入参对象的属性进行一一映射绑定
* 要求是请求参数的名字和 User 的属性名一样
*
* @param user
* @return
*/
@PostMapping("userCRUD")
public String addUser(User user)
{
System.out.println("====="+user);
userDaoImpl.saveUser(user);
return "redirect:/userlist";
}
}
3. 新增添加页面 AddUser.html
<!DOCTYPE
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta 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>
<link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
<script src="assets/js/jquery-3.4.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div ></div>
<div class="container-fluid">
<div class="row">
<!-- 在原来的左侧菜单位置引用抽取好的公共左侧菜单代码
1、这是使用的 id选择器 进行的引用
2、引用公共代码的片段的同时传递参数值过去-->
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<!--提交后进入后台地址-->
<form method="post" th:action="@{/userCRUD}">
<div class="form-group">
<label>姓名</label>
<input name="uName" type="text" class="form-control" placeholder="华安">
</div>
<div class="form-group">
<label>邮箱</label>
<input name="email" type="email" class="form-control" placeholder="huanan@163.com">
</div>
<div class="form-group">
<label>性别</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>所属部门</label>
<!--部门表所有部门，进行遍历显示，供用户选择
注意：select的 name="department.depId"，Spring MVC 会自动封装关联类 Department的depId，但是depName为null-->
<select class="form-control" name="department.depId">
<option th:each="department:${departmentList}"
th:text="${department.depName}"
th:value="${department.depId}">
</option>
</select>
</div>
<div class="form-group">
<label>生日</label>
<input name="birth" type="text" class="form-control" placeholder="1893/08/25">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
</main>
</div>
</div>
</body>
</html>
在UserDaoImp.java增加 public void saveUser(User user) 函数
@Repository
public class UserDaoImpl {
@Resource
private DepartmentDaoImpl deparmentDao;
private static List<User> userList = null;
static {
userList = new ArrayList<>();
userList.add(new User(1001, "E-AA", "aa@163.com", 1, new Department(101, "D-AA")));
userList.add(new User(1002, "E-BB", "bb@163.com", 1, new Department(102, "D-BB")));
userList.add(new User(1003, "E-CC", "cc@163.com", 0, new Department(103, "D-CC")));
userList.add(new User(1004, "E-DD", "dd@163.com", 0, new Department(104, "D-DD")));
userList.add(new User(1005, "E-EE", "ee@163.com", 1, new Department(105, "D-EE")));
userList.add(new User(1006, "E-FF", "ff@163.com", 0, new Department(101, "D-AA")));
userList.add(new User(1007, "E-GG", "gg@163.com", 1, new Department(102, "D-BB")));
userList.add(new User(1008, "E-HH", "hh@163.com", 0, new Department(103, "D-CC")));
userList.add(new User(1009, "E-II", "ii@163.com", 1, new Department(104, "D-DD")));
userList.add(new User(10010, "E-JJ", "jj@163.com", 1, new Department(105, "D-EE")));
}
/**
* 模拟查询所有员工
*/
public List<User> getAll() {
return userList;
}
/**
* 添加用户
*/
public void saveUser(User user)
{
if(user==null)
{
return ;
}
user.setUId(userList.get(userList.size()-1).getUId()+1);
user.setDepartment(deparmentDao.getDepartmentById(user.getDepartment().getDepId()));
userList.add(user);
}}
User类
com.lulu.domain;
import java.util.Date;
public class User {
private Integer uId;
private String uName;
private String email;
/**
* 用户性别：1 男, 0 女
* 生日
*/
private Integer gender;
private Date birth;
/**
* 所在的部门
*/
private Department department;
public Integer getUId() {
return uId;
}
public void setUId(Integer uId) {
this.uId = uId;
}
public String getuName() {
return uName;
}
public void setuName(String uName) {
this.uName = uName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public Integer getGender() {
return gender;
}
public void setGender(Integer gender) {
this.gender = gender;
}
public Department getDepartment() {
return department;
}
public void setDepartment(Department department) {
this.department = department;
}
public Date getBirth() {
return birth;
}
public void setBirth(Date birth) {
this.birth = birth;
}
public User(Integer uId, String uName, String email, Integer gender,
Department department) {
super();
this.uId = uId;
this.uName = uName;
this.email = email;
this.gender = gender;
this.department = department;
this.birth = new Date();
}
public User() {
}
@Override
public String toString() {
return "User{" +
"birth=" + birth +
", uId=" + uId +
", uName='" + uName + '\'' +
", email='" + email + '\'' +
", gender=" + gender +
", department=" + department +
'}';
}
}
Department类
com.lulu.domain;
public class Department {
/**主键id*/
private Integer depId;
/**部门名称*/
private String depName;
public Department() {
}
public Department(int depId, String depName) {
this.depId = depId;
this.depName = depName;
}
public Integer getDepId() {
return depId;
}
public void setDepId(Integer depId) {
this.depId = depId;
}
public String getDepName() {
return depName;
}
public void setDepName(String depName) {
this.depName = depName;
}
@Override
public String toString() {
return "Department{" +
"depId=" + depId +
", depName='" + depName + '\'' +
'}';
}
}
DepartmentDaoImpl类
com.lulu.dao;
import com.lulu.domain.Department;
import org.springframework.stereotype.Repository;
import java.util.ArrayList;
import java.util.List;
@Repository
public class DepartmentDaoImpl {
private static List<Department> departmentList=null;
static {
departmentList=new ArrayList<>();
departmentList.add(new Department(101,"信息部"));
departmentList.add(new Department(102,"研发部"));
departmentList.add(new Department(103,"采购部"));
departmentList.add(new Department(104,"财务部"));
departmentList.add(new Department(105,"后勤部"));
departmentList.add(new Department(106,"人力部"));
}
public static List<Department> getDepartmentList() {
return departmentList;
}
public Department getDepartmentById(Integer id) {
if (departmentList != null && departmentList.size() > 0) {
for (Department department : departmentList) {
if (department.getDepId() == id) {
return department;
}
}
}
return null;
}
}
4.运行效果：
http://localhost:8090/tiger/userlist
用户添加
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
