（狂神）SpringBoot笔记-----08

员工管理系统：展示员工列表

运行：

我们现在想我们点击员工管理可以跳到我们自己的页面中去，显示我们员工的信息：

 我们要跳转页面肯定要先写controller再把映射和前端地址对应：

 

运行：

 

现在页面跳转成功。我们发现我们的main页面和我们的list页面的左侧和上面是相同的部分，既然是相同的部分，我们就可以把它们分离出来。

相同部分，我们就在其中一个里面加上fragment，然后在另一个里面取引用它。

这里引用fragment我们用浪号表达式。

我们去运行一下：

我们发现页面没有任何变化，但是我们的代码重复性大大降低了。

  我们把顶部也用同样的方法处理一下：

再运行一下：

页面没什么变化，我们再进行一步改进：

当我们想改这种文字的时候，我们在这一个里面改，list和main的页面也都会同时发生变化

 我们把之前的头部栏和侧边栏放到这个新的html中。

我们把这两个文件中只要用th:replace去引入commons里的两个边栏就可以了。

运行

我们接下来去改一下高亮：

 

我们发现这里标注的link有active的就有高亮，没有active的就没有高亮。

我们登录后首页高光，我们点击员工管理后，员工管理高光。

运行：

我们目前的页面设计做了以下几件事：

提取公共页面：

1.th:fragment="sidebar"

2.th:replace="~{commons/commons::topbar}"

3.如果要传递参数，可以直接使用()传参，接收判断即可！

 我们现在页面部分就差不多了。但是现在显示的是我们前端页面中写死的数据，我们现在去想办法把我们用户的数据在页面中显示出来：

我们主要用到的就是foreach。

运行查看结果：

 

员工管理系统：增加员工实现

我们添加员工分以下几步：

1.按钮提交

2.跳转到添加页面

3.添加员工成功

4.返回页面

1.提交按钮：

按钮添加成功。

2.跳转到添加页面：

先写出负责跳转的controller层：

我们去创建一个add页面，我们把list页面复制一份再做些改动就好：

我们先把main下的内容删除。

 我们在form中加入的表单就直接用网上的bootstramp代码了。

我们看看现在页面的效果：

页面跳转成功。

3.添加员工的功能

我们前端要得到后端传递的值，前端应该先把每个对应实体类属性的标签加上name属性。

我们先让controller层去获取到查询到的department的数据

 

在option中我们用循环遍历可选择的部门名称，显示出部门的名称，实际的值为部门的编号。

运行：

 

我们现在能跳转到添加页面，在我们添加数据成功后，我们应该再去返回到我们的list页面，添加完再查 出来，所以我们还要写一个完成实际添加功能的controller:

 

我们get和post的地址名相同都是emp，这也是restfull风格的一种写法。

我们去看看能否成功跳转页面：

我们点击添加按钮：

 

成功跳转到显示页面。

接下来我们要去把我们前端传来的数据发送到后台，后台接收后再返回给前端显示出来。

 

运行：

 

点击添加按钮：

 

 

报错了 我们看看错误在哪：

一个是我们的birth是new Date方式的，我们的格式错误应该是年/月/日还有一点是前端的问题：

 

我们的实体类中depatment是一个类对象，但是我们前端只想获取一个id属性，所以我们把name改成department.id就可以：

 

再去运行一下：

 

点击添加按钮：

 

名字没有传过来。

 

我们发现是实体类的属性名称和前端页面的name名字不一致，我们去改一下：

 

再去运行一次：

 

再点击一次添加按钮：

添加成功，我们这里有些数据是不对的。不过没关系，我们在做修改信息的时候再去改动它。

 

我们的日期类默认为这个格式。所以我们输入其它格式会报错。

 如果我们想改，我们可以在配置文件中去自定义，一般很多组件日期都会用-分割：