添加员工页面我们要进行修改,删除和添加这些操作,所以我们添加一些按钮如下:
表头位置添加一个操作选项
然后每一行的后边增加两个按钮,分别是编辑和删除
启动springboot来看
可以看到多了操作和删除按钮
然后我们再把Section title变成一个添加按钮
下面我们来实现添加功能,
我们给button添加一个a标签来实现跳转,路径改为/emp
然后在EmployeeController里边写上跳转到添加页面
我们在resources里边的emps里的list.html复制一份,然后改名为add.html
并把add.html里边的内容改了,先把main标签里边的内容删掉,然后换成下边的代码
<form> <div class="form-group"> <label>LastName</label> <input type="text" name="lastName" class="form-control" placeholder="张三"/> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" placeholder="zhangsan@example.com"> </div> <div class="form-group"> <label>Gender</label> <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" name="department.id"> <label>Birth</label> <input name="birth" type="text" class="form-control" placeholder="zhangsan"> </div> <button type="submit" class="btn btn-primary">添加</button> </form>
这样我们点击添加就可以进入到添加页面
有关部门这一块,我们需要是从数据库中读取出来,所以当我们要添加员工的时候,就要把数据库里的部门读取出来,我们利用DepartmentDao来读出所有的部门,然后去选项里边遍历
利用th:each来读取所有的,放入option
可以看到这里是一个个的对象,所以我们直接取出departmentName
填完后当我们提交我们的表单的时候,option返回的其实是一个value属性,去进行数据库的查询比较,
到此我们的添加页面设计完成