Day37——员工添加页面

￡神魔★判官ぃ 2023-02-25 02:25 48阅读 0赞

### 文章目录 ###

*  一. 回顾
 *  二. 效果
 *  三. 后台返回部门数据给前台展示
 *  四. 获取Bootstrap的form表单代码的途径

# 一. 回顾 #

前面学习了[Day36——链接高亮以及完成列表展示数据][Day36]，今天完成员工添加页面

# 二. 效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

# 三. 后台返回部门数据给前台展示 #

后台controller方法，如下：

//来到员工添加页面
        @GetMapping(value="/emp")
        public String toAddPage(Model model){ 
            //查出所有的部门信息,在页面显示
            Collection<Department> departments = departmentDao.getDepartments();
            model.addAttribute("depts", departments);
            return "emp/add";
        }

前台展示，如下：

贴出员工添加页面的表单，如下：

<form>
    	    <div class="form-group">
    			<label>LastName</label>
    			<input type="text" class="form-control" placeholder="zhangsan">
    		</div>
    		<div class="form-group">
    			<label>Email</label>
    			<input 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>男</label>
    			</div>
    			<div class="form-check form-check-inline">
    				<input class="form-check-input" type="radio" name="gender" value="0">
    				<label>女</label>
    			</div>
    		</div>
    		<div class="form-group">
    			<label>department</label>
    			<select class="form-control">
    				
    				<option th:each="dept:${depts}" th:text="${dept.departmentName}" th:value="${dept.id}"></option>
    			</select>
    		</div>
    		<div class="form-group">
    			<label>Birth</label>
    			<input class="form-control" placeholder="zhangsan">
    		</div>
    		<button type="submit" class="btn btn-primary">添加</button>
    </form>

# 四. 获取Bootstrap的form表单代码的途径 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]

[Day36]: https://blog.csdn.net/qq_40634846/article/details/107244850
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230209/30c5616e86c6403e99f62ce6348717f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: /images/20230209/1ff171e24fff4cc3bbcec59b8464e301.png