手把手教你基于【SpringBoot+MyBatis】实现员工管理系统‍【前端界面设计】

灰小猿
312 阅读8分钟

​

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

一、写在前面

Hello，你好呀，我是灰小猿，一个超会写BUG的程序猿🙊！

近期在学习springboot框架相关的内容，相比于SSM，**SpringBoot最大的特点就是集成了Spring和SpringMVC，让之前繁琐的配置工作变得更加简洁，**同时对于业务逻辑层的处理也更加的友好，

所以今天就使用SpringBoot整合MyBatis来做一个完整的员工管理系统。实现登录验证、国家化、CRUD等操作。带大家熟悉一下SpringBoot的操作流程，以及整合MyBatis的具体步骤。整个项目你将会学到SpringBoot框架、mybatis框架、BootStrap框架、thymleaf、Lombok插件等技术！

小伙伴们一键三连➕关注！灰小猿带你上高速啦🎉🎉🎉**！**

使用springboot+mybatis进行项目开发，我简单的给大家划分了几个步骤。平常的开发我们只需要按照这个过程进行就可以了。

SpringBoot整合Mybatis基本步骤

  1. 搭建springboot环境
  2. 进行配置处理
    1. 在pom.xml中引入所需依赖
    2. 配置application
  3. 进行前端页面布局
  4. 引入数据源
  5. 配置mybatis操作

二、进行项目配置

（1）引入pom.xml配置

虽然springboot大大的简化的配置的过程，但是不代表所有的配置都可以由springboot自动完成，所以，当我们需要使用其他相关依赖的时候（如thymleaf、lombok），同样需要在pom.xml中引入相应的配置依赖。

在这个项目中我们需要引入的依赖有

Mybatis依赖

        <!--mybatis依赖-->
        <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

数据库驱动

        <!--数据库驱动-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.37</version>
            <scope>runtime</scope>
        </dependency>

LomBok依赖

        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

Thymleaf依赖

        <!--thymleaf 基于3.x开发-->
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>

（2）、配置application

当我们在对项目进行操作的时候，一般需要引入或修改一些springboot的默认配置。方便我们的开发使用，**springboot的配置文件可以是properties后缀，也可以是ymal后缀。**我这里使用的properties后缀的配置文件。

在这个项目中我们需要引入数据源、并进行以下一些配置。

# 清除thymeleaf的缓存
spring.thymeleaf.cache=false

# 设置一个页面的访问路径
server.servlet.context-path=/gyg

# 告诉springboot国际化放置的位置
spring.messages.basename=i18n.login

# 配置日期格式，自定义日期格式转换器
spring.mvc.format.date=yyyy-MM-dd

# 配置数据源
spring.datasource.username=root
spring.datasource.password=ADMIN
#serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
spring.datasource.url=jdbc:mysql://localhost:3306/springboot_emps?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

# 配置mybatis
mybatis.type-aliases-package=com.gyg.pojo
mybatis.mapper-locations=classpath:mybatis/mapper/*.xml

配置完以上这两项之后就算是完成了项目开发的基本工作，其他详细的配置我们在项目中用到的时候接着说，接下来就是布局前端页面和实现数据处理的过程。

三、前端实现

因为整个项目是尽可能采用前后端分离的思想来做的，所以这里我就把前后端分开和大家讲解。首先来做前端部分，包括登录验证、页面布局、国际化、数据传值、注销操作等。

（1）、登录验证

一般的管理系统都是需要使用到登录以及验证操作的，验证用户的登录信息是否正确，判断用户有没有非法的翻越登录界面直接进入主页这些操作。

**一般判断用户有没有在未登录的情况下页面的方法的是：**在用户第一次登录成功时设置一个session并赋值，同时在请求主页的时候验证session是否存在，如果不存在，则说明用户并没有进行登录操作就直接的访问了主页，这样显然是违法的。

在这里补充一个关于session生命周期的知识点：

Sessinon在用户访问第一次访问服务器时创建，需要注意只有访问JSP、Servlet等程序时才会创建Session，只访问HTML、IMAGE等静态资源并不会创建Session，但可调用request.getSession(true)强制生成Session。服务器会把长时间没有活动的Session从服务器内存中清除，此时Session便失效。Tomcat中Session的默认失效时间为20分钟。同时还可以调用Session的invalidate方法将session清除。

​

在这里，用户点击登录时向控制器发送登录请求，判断用户输入的信息是否正确，如果正确就创建session，并重定向到主页；否则就重新回到登录页面。

代码如下：

    @RequestMapping("/user/login")
//    @ResponseBody //返回json字符串
    public String login(@RequestParam("username") String username, @RequestParam("password") String password,
                        Model model, HttpSession session) {
//        如果用户名不为空，且密码正确，就跳转页面
        if (!StringUtils.isEmpty(username) && "666666".equals(password)) {
            session.setAttribute("loginUser", username);
            return "redirect:/main.html";
        } else {
            model.addAttribute("msg", "用户名或密码输入错误！");
            return "index";
        }
     /*   model.addAttribute("username",username);
        model.addAttribute("password",password);*/

    }

（2）WebMvc配置文件

但是由于我们需要返回页面跳转，所以我们需要设置像springmvc中的视图解析器一样的东西，来告诉springboot，对于一般的返回，我们应该如何跳转。

在这里我们需要写一个专门的配置类，来实现这些配置操作，这些配置类都需要使用@Configuration标识，这样系统才会认为这是一个配置类；使用@Configuration标识的类就相当于SSM中的xml配置文件。

Mvc的配置类需要实现WebMvcConfigurer接口，并且根据需要重写接口中的一系列方法。视图解析器的定义方法是这样的：

    /**
     * 配置一个自定义的视图控制器
     *
     * @param registry
     */
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
        registry.addViewController("/main.html").setViewName("dashboard");

    }

（3）页面布局实现

很多前端项目的布局都会使用到的一个框架bootstrap，这个框架提供了非常多的前端组件，我们可以直接导入相应的代码即可使用，像我们项目的页面中，按钮和表格布局，都是直接使用的bootstrap框架，想要了解如何使用的小伙伴们可以去它的官网查看【bootstrap官网】。然后对于想要快速搭建前端或者后台页面的小伙伴们还可以直接在网上搜索“bootstrap模版”即可。

​

（4）国际化操作

实现国际化的操作一般对于大型的网站开发还是非常常见的，所以在这个项目中我也在登录页面做了一个国际化的操作。

**Springboot实现国际化需要实现LocaleResolver接口，并实现其中方法，**这是springboot规定的语言解析接口，

该类的具体实现是这样的：

package com.gyg.config;

import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

/**
 * 国际化配置
 * @author 郭运刚
 */
public class MyLocaleResolver implements LocaleResolver {

    /**
     * 解析请求
     *
     * @param request
     * @return
     */
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
//        获取请求中的语言参数链接
        String language = request.getParameter("l");
//        如果没有就使用默认的
        Locale locale = Locale.getDefault();
//        判断请求中获取到的语言参数链接是否为空，如果不为空，就使用请求的链接
        if (!StringUtils.isEmpty(language)) {
//            zh_CN
            String[] splits = language.split("_");
//            国家  地区
            locale =  new Locale(splits[0], splits[1]);

        }

        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {

    }
}

之后通过mvc的配置类中重写addInterceptors方法，在其中添加实现语言解析的过滤器，addInterceptors方法的作用就是增加springboot访问的拦截器，里面的registry参数后面可以增加过滤器类或者增加需要过滤哪些内容，不需要过滤哪些内容。

如下面我们的方法中，增加了国际化过滤、过滤所有内容，同时还对于css、js、img等内容不过滤。

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginHandlerInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns("/index.html","/","/user/login","/css/**","/js/**","/img/**");

    }

以上设置完成之后，我们需要在target/classes下建立文件夹i18n,在其中建立三个国际化的配置文件夹，分别是默认语言、汉语、英语，

​

（5）注销登录

注销登录的操作实现其实还是比较简单的，我们上面也提到了，验证用户是否正常登录的操作是判断是否存在session，那么在进行注销登录的时候，我们只需要将session使用invalidate()方法清除掉即可，同时返回到登录页面。

    /**
     * 页面注销
     * @param session
     * @return
     */
    @RequestMapping("/user/logout")
    public String logout(HttpSession session){
//        使当前session作废
        session.invalidate();
        return "redirect:/index.html";
    }

直到这里，前端页面的一些核心操作才算是基本完成了，📢📢📢中间还有很多页面的代码我没有放出来，完整源码我整理好了，小伙伴们可以下载：【完整源码】

以上就是整个项目的基本配置和前台页面设计了，关于后台设计详情可以看下一篇文章哟！

​

avatar
文章
阅读
粉丝