员工管理系统文档【基础功能开发全细节】

1、首页实现

1.1、访问index1.2、给index.html引入thymeleaf 2、页面国际化

2.1、统一properties编码2.2、编写i18n国际化资源文件2.3、配置国际化资源文件名称2.4、首页获取显示国际化2.5、配置国际化组件实现中英文切换

2.5.1、添加中英文切换标签链接2.5.2、自定义地区解析器组件 4、登录功能实现

【注意： url泄露信息】【注意：拦截无权限访问】 5、登录拦截器

1、存session信息2、自定义HandlerInterceptor接口的preHandle方法3、在配置类中注入bean 6、展示员工信息

1、实现Customers视图跳转2、提取页面公共部分3、点击高亮处理4、显示员工信息 7、增加员工

1、list页面增加 添加员工 按钮2、创建添加员工页面add3、add页面添加员工请求 8、修改员工信息

1、list页面编辑按钮，添加请求2、创建编辑员工页面edit3、edit页面编辑完成提交请求

【注意：修改时隐藏提交id】 4、删除员工信息

【注意：restFul风格的thymeleaf请求风格】 9、 404页面定制10、注销操作

由于template包下的静态文件不能直接访问，所以需要间接访问到；需要进行视图跳转；

在主程序统计目录下新建config包用来存放自己的配置类在其中建立自己的配置类MyMvcConfig用来增加自己的视图跳转

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

要先要导入thymeleaf依赖后，启动才有效！

启动主程序后访问测试，访问localhost:8080/或localhost:8080/index.html

显然，此时前端html代码有问题，一些静态资源没有成功引入。

上述测试可以看到页面有图片没有加载出来，且没有css和js的样式，这就是因为我们html页面中静态资源引入的语法出了问题，在SpringBoot中，推荐使用Thymeleaf作为模板引擎，我们将其中的语法改为Thymeleaf，所有页面的静态资源都需要使用其接管

注意所有html都需要引入Thymeleaf命名空间

xmlns:th="http://www.thymeleaf.org"

然后修改所有的页面静态资源的引入，使用@{…}链接表达式

在此访问，正确显示页面：

在IDEA中统一设置properties的编码为UTF-8

在resources目录下新建一个i18n包，其中放置国际化相关的配置

其中新建三个配置文件，用来配置语言：

login.properties: 无语言配置时生效；

login_en_US.properties:英文生效；

login_zh_CN.properties:中文生效；

命名方式是下划线的组合： 文件名_语言_国家.properties

以此命名方式，IDEA会帮助我们识别这是个国际化配置，自动绑定在一起转换如下的模式：

绑定在一起后，我们想要添加更多的语言配置，只需要在大的资源包右键添加到该绑定文件即可

此时只需要输入区域名即可创建成功，比如：en_US，就会自动识别为美国：

然后打开英文或是中文语言的properties文件，点击Resources Bundle进入可视化编辑页面

进入到可视化编辑页面后

点击+添加属性：首先创建一个login.tip代表首页中的提示（自定义起名login.XXX)

然后对提示分别做三种情况的语言配置，三个对应的输入框输入即可

类似配置tip提示，我们在配置更多的信息

然后打开三个配置文件查看其中的文本内容，可以看到已经做好了全部的配置

login.properties(默认)

login.btn=登录
login.password=密码
login.remember=记住我
login.tip=请登录 
login.username=用户名

login_en_US.properties(英文)

login.btn=login
login.password=password
login.remember=remember me
login.tip=Please sign in
login.username=username

login_zh_CN.properties(中文)

login.btn=登录
login.password=密码
login.remember=记住我
login.tip=请登录
login.username=用户名

在Spring程序中，国际化主要是通过ResourceBundleMessageSource这个类来实现的

Springboot通过MessageSourceAutoConfiguration为我们自动配置好管理国际化资源文件的组件

先来看看这个类

@Configuration(proxyBeanMethods = false)
@ConditionalOnMissingBean(name = AbstractApplicationContext.MESSAGE_SOURCE_BEAN_NAME, search = SearchStrategy.CURRENT)
@AutoConfigureOrder(Ordered.HIGHEST_PRECEDENCE)
@Conditional(ResourceBundleCondition.class)
@EnableConfigurationProperties
public class MessageSourceAutoConfiguration {

    private static final Resource[] NO_RESOURCES = {};

    @Bean
    @ConfigurationProperties(prefix = "spring.messages")
    public MessageSourceProperties messageSourceProperties() {
        return new MessageSourceProperties();
    }

    @Bean
    public MessageSource messageSource(MessageSourceProperties properties) {
        ...
    }
}

主要了解一下messageSource()这个方法

可以看到，此方法的参数为messageSourceProperties对象，来分析一下这个类：

public class MessageSourceProperties {

    
    private String basename = "messages";

    
    private Charset encoding = StandardCharsets.UTF_8;

意思是：

如果你不在springboot配置文件中指定以.分隔开的国际化资源文件名称的话他默认会去类路径下找messages.propertiese作为国际化资源文件

因为我们自定义了国际化资源文件，因此我们需要在springboot配置文件application.propreties中加入以下配置指定我们配置文件的名称

spring.message

利用#{…}消息表达式，去首页index.html获取国际化的值

重启项目，访问首页，已经自动识别为中文

index.html中底部可以看到两个标签

中文
English

要通过这两个标签实现中英文切换，首先要在这两个标签上加跳转链接并带上响应参数

中文
English

因此我们需要自定义地区解析器MyLocaleResolver中，需要处理这个带参数的链接请求

LocaleResolver：地区解析器

在WebMvcAutoConfiguration中，找到**localeResolver()**方法

该方法作用是：获取LocaleResolver地区对象解析器：

如果用户配置了则使用用户配置的地区解析器如用户没有配置，就用默认的

@Override
@Bean
@ConditionalOnMissingBean(name = DispatcherServlet.LOCALE_RESOLVER_BEAN_NAME)
public LocaleResolver localeResolver() {
    if (this.webProperties.getLocaleResolver() == WebProperties.LocaleResolver.FIXED) {
        return new FixedLocaleResolver(this.webProperties.getLocale());
    }
    AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
    localeResolver.setDefaultLocale(this.webProperties.getLocale());
    return localeResolver;
}

因此我们要实现自定义的国际化资源生效，需要自己编写一个地区解析器，来继承LocleResolver接口，重写其方法即可。

public class MyLocaleResolver implements LocaleResolver {
    //解析请求
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        //获取请求中的国际化参数
        String language = request.getParameter("l");
        //默认的地址
        Locale locale = Locale.getDefault();
        //如果请求的链接参数不为空，携带了国际化参数
        if(!StringUtils.isEmpty(language)){
            String[] split = language.split("_");//zh_CN(语言_地区)
            locale = new Locale(split[0], split[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {

    }
}

为了我们的区域化信息能够生效，我们需要配置一下这个组件！在我们的MyMvcConfig配置类下添加bean

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    
    ...
        
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }
}

我们重启项目，来访问一下，发现点击按钮可以实现切换！

当我们点击登录按钮时，会进入一个界面（dashboard页面）

1、首先在index.html的表单中更改提交地址/user/login, 并给名称和密码输入框添加name属性为了后面传参

2、编写控制层的controller

@Controller
public class LoginController {

    @RequestMapping("/user/login")
    public String login(@RequestParam("username") String username, 
                        @RequestParam("passwrod") String password, 
                        Model model){
        if("admin".equals(username) && "123123".equals(password)){
            return "dashboard";
        }else{
            model.addAttribute("msg", "用户名或密码错误");
            return "index";
        }
    }
}

3、在index.html首页中，添加一个标签来显示从controller返回的登录错误信息

重启，进行测试：

此时登录功能实现完毕，但是现在有一个大问题，浏览器的url暴露了用户的用户名和密码，泄露了用户信息，此时我们需要编写一个映射！

我们在MyMvcConfig中加一句代码

registry.addViewController("/main.html").setViewName("dashboard");

​ 也就是访问main.html页面就跳转到dashboard页面

然后修改LoginController，当登录成功后重定向到main.html页面，也就跳转到了dashboard页面

...
if("admin".equals(username) && "123123".equals(password)){
    return "redirect:/main.html";
}else{
...    

因为：

==原来是请求转发：==到dashboard，还是原来的请求，转发到dashboard页面

重定向后：是去请求mian.html，请求变了！

再次重新测试，输入正确的用户名和密码登录成功后，浏览器不在携带泄露信息。

出现了新的问题，不论登不登陆，我们访问localhost:8080/main.html都会跳转到dashhoard页面，此时就需要拦截器了。

为了解决上述问题，我们需要自定义一个拦截器

在config目录下，新建一个登录拦截器类：LoginHandlerInterceptor

登录成功后，后台会得到我们的用户信息；如果没有登录，则不会有任何用户信息。我们通过这一点来用拦截器进行拦截：

将用户登录后的用户名信息放到session中，访问页面时首先判断session中有没有用户信息如果没有，拦截器进行拦截如果有，拦截器放行 1、存session信息

要先在LoginController中设计：用户登录成功后，存入用户信息到session中

@RequestMapping("/user/login")
public String login(@RequestParam("username") String username,
                    @RequestParam("password") String password,
                    Model model,
                    HttpSession session){
    if("admin".equals(username) && "123123".equals(password)){
        session.setAttribute("LoginUser", username);
        return "redirect:/main.html";
    }else{
        model.addAttribute("msg", "用户名或密码错误");
        return "index";
    }
}

2、再在config目录中新建一个自定义的LoginHanderInterceptor 类（继承HandlerInterceptor接口）

public class LoginHanderInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        HttpSession session = request.getSession();
        Object loginUser = session.getAttribute("LoginUser");

        //session中有LoginUser信息，放行
        if(loginUser != null){
            return true;
        }else{
        //session中没有LoginUser信息，就拒绝放行，并在请求上下文中放入msg信息，index的p标签提取
          ，请求转发到index.html页面
            request.setAttribute("msg", "权限不够，请先登录！");
            request.getRequestDispatcher("/index.html").forward(request,response);
            return false;
        }
    }
}

重写WebMvcConfigurer接口的addInterceptors方法

@Override
public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(new LoginHanderInterceptor())
        .addPathPatterns("
@RequestMapping("/emps")
public String list(Model model){
    Collection allEmployee = employeeDao.getAllEmployee();
    model.addAttribute(allEmployee);

    return "emp/list";
}

3、修改list.html 和 dashboard.html中Customers链接请求路径

		


		

			

				

            
            ....

Collection allEmployee = employeeDao.getAllEmployee();
model.addAttribute("emps", allEmployee);

    

        

            
id
            
lastName
            
email
            
gender
            
department
            
date
        
    
    

        

            

            

            

            

            

            

            
        
    

添加员工

2、编写/emp对应的controller，在EmployeeController中添加一个toAdd方法用来处理list页面中的按钮提交动作，返回到add.html页面

@GetMapping("/emp")
public String toAdd(Model model){
    Collection allDepartments = departmentDao.getAllDepartments();
    model.addAttribute("departments", allDepartments);

    return "emp/add";
}

【注意】

add.html中，有一个部分选项：需要前端获取到所有的departments信息，所以在toAdd方法中有两个作用：

将departments信息放入model中；跳转到add.html界面

1、在templates/emp目录下新建add.html

2、我们复制list.html中的内容，修改掉中心内容信息，更改为我们的表格

    

        LastName
        
    
    

        Email
        
    
    

        Gender

        

            
            男
        
        

            
            女
        
    
    

        department
        
        
            
        
    
    

        Birth
        
        
    
    添加

重启后看看

点击添加员工—>成功跳转到add.html页面

【注意】

department下拉框应该是所有的部分，是我们前端获取到departments后遍历显示得到

注意后台接收的是employee对象，其中department属性是对象，所以前端不能name是department但是值是department.id，后端参数解析器会配置错误！直接让前端传入的是department.id，后端后自行实例化对象，只不过departmentName属性可能是NULL

在add.html页面，我们填写完信息，点击添加按钮后，应该完成添加返回到list页面，展示新的员工信息；

因此在add.html点击按钮的一瞬间，我们同样发起post请求/emp(restF风格)

然后编写对应的controller: EmployeeController下的add方法

@PostMapping("/emp")
public String add(Employee employee){
    employeeDao.insert(employee);

    return "redirect:/emps";
}

注意增加后，重定向至emps，获取数据库中所用员工信息，后到list.html页面展示.

重启后测试：

点击添加按钮，成功实现添加员工

点击编辑后，应该跳转到edit.html进行编辑

首先就是要将list.html的标签添加href属性，实现点击请求/edit/id号 （restFul风格）

编辑

然后编写对应的controller，在EmployeeController类下添加新的方法叫edit来处理list页面点击编辑后的操作，返回到edit.html编辑员工页面

 
    @RequestMapping("/edit/{id}")
    public String edit(@PathVariable("id") Integer id, Model model){
        //查询指定id的员工，添加到employee中，用于前端接收
        Employee employee = employeeDao.getEmployeeByID(id);
        model.addAttribute("employee", employee);

        //查出所有部分的信息，添加到departments中，用于前端接收（和add一样）
        Collection allDepartments = departmentDao.getAllDepartments();
        model.addAttribute("departments", allDepartments);

        return "/emp/edit";
    }

edit.html

修改处：

th:value="${employee.getLastName()}"提前放值，不同类型的标签，属性不同！th:checked="${employee.getGender() == 1}"th:selected="${department.getId() == employee.getDepartment().getId()}"

    

        LastName
        
    
    

        Email
        
    
    

        Gender

        

            
            男
        
        

            
            女
        
    
    

        department
        
        
            
            
        
    
    

        Birth
        
        
    
    修改

启动主程序测试：

【注意】

要将日期格式提前修改

【注意：修改employee的date属性格式】

@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date date;

使其能够兼容得到前端传回的时间格式参数。

在edit.html点击修改按钮后，我们需要返回到list页面，更新员工信息，因此我们需要添加href属性，实现点击按钮后的请求:/editEmp

编写对应的controller，处理修改按钮的请求, editEmp方法

    @RequestMapping("/editEmp")
    public String editEmp(Employee employee){
        employeeDao.insert(employee);

        return "redirect:/emps";
    }

如果按照add.html样式提交修改后的信息，向后端传入的参数中id=null，后端接收到的employee对象因此没有id值，就会触发自增id条件，生成了新的用户。

所以，需要在edit.html的from表单中添加隐藏提交值

然后点击修改后，正常完成修改，并返回到list.html页面。

给list中的删除标签写请求(注意写法)

删除

{id}(id=${…})—参数给值

然后编写controller，处理删除标签的请求，删除指定id的员工

 
    @RequestMapping("/delete/{id}")
    public String deleteEmp(@PathVariable("id") Integer id){
        employeeDao.deleteEmployeeByID(id);

        return "redirect:/emps";
    }

重新启动后测试，成功删除，刷新页面。

只需要在templates目录下新建一个error包，然后将404.html放入其中，报错Springboot就会自动找到这个页面

测试：随便访问一个不存在的页面

出现的404页面即是我们自己的404.html

在common页面中，修改顶部导航栏标签的href属性，实现点击发起请求/logout

            Sign out

然后编写对应的controller，处理点击注销的请求，在LoginController中编写方法，清除session，重定向到首页

    @RequestMapping("/logout")
    public String signout(HttpSession session){
        session.invalidate();

        return "redirect:index.html";
    }

重新测试，登录成功后，点击sign out退出首页。

员工id
* @return 重定向到emps，刷新列表
*/
@RequestMapping("/delete/{id}")
public String deleteEmp(@PathVariable(“id”) Integer id){
employeeDao.deleteEmployeeByID(id);

    return "redirect:/emps";
}

重新启动后测试，成功删除，刷新页面。



# 9、 404页面定制

只需要在templates目录下新建一个error包，然后将404.html放入其中，报错Springboot就会自动找到这个页面



测试：随便访问一个不存在的页面

[外链图片转存中...(img-VdUALG20-1642820791754)]

出现的404页面即是我们自己的404.html



# 10、注销操作

在common页面中，修改顶部导航栏标签的href属性，实现点击发起请求/logout

```html

            Sign out

然后编写对应的controller，处理点击注销的请求，在LoginController中编写方法，清除session，重定向到首页

    @RequestMapping("/logout")
    public String signout(HttpSession session){
        session.invalidate();

        return "redirect:index.html";
    }

重新测试，登录成功后，点击sign out退出首页。