前后端分离小项目springboot+vue+mybatis员工管理系统

最新推荐文章于 2025-04-15 08:55:44 发布

weixin_43879187

最新推荐文章于 2025-04-15 08:55:44 发布

阅读量2k

点赞数 4

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43879187/article/details/107160889

版权

这是一个使用SpringBoot、Vue和Mybatis实现的前后端分离的员工管理系统。本文档详细介绍了从环境搭建到功能实现的全过程，包括用户注册、登录、验证码、Local Storage管理、安全退出、用户信息展示、员工添加、删除和修改等功能的实现。项目源码和相关材料可在链接中获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前后端分离小项目springboot+vue+mybatis员工管理系统

本项目相关源码+相关材料下载
https://gitee.com/xiaobai_a/employee_management_system.git

一、项目相关环境搭建

1.项目创建是勾选项目所需要的依赖(由于ieda不提供druid的jar包所以需要我们自己导入)
在这里插入图片描述
2.在pom.xml文件中导入druid，commons-fileupload依赖

<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.19</version>
        </dependency>

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>

3.配置application.properties文件

server.servlet.context-path=/ems_vue
server.port=8181
spring.application.name=ems
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?characeterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=142485

mybatis.mapper-locations=classpath:com/baizhi/mapper/*.xml
mybatis.type-aliases-package=com.baizhi.entity

logging.level.com.baizhi.dao=debug
logging.level.com.baizhi.service=info
logging.level.com.baizhi.controller=info

spring.datasource.url=jdbc:mysql://localhost:3306/test?characeterEncoding=UTF-8
test为数据库名称
spring.datasource.username=root
spring.datasource.password=142485
分别是数据库的用户名密码

在新建项目之前我提前在数据库中建立了俩个表t_user,t_emp这里把代码给大家

DROP TABLE IF EXISTS `t_emp`;
CREATE TABLE `t_emp` (
  `id` int(6) NOT NULL AUTO_INCREMENT,
  `name` varchar(40) DEFAULT NULL,
  `path` varchar(100) DEFAULT NULL,
  `salary` double(10,2) DEFAULT NULL,
  `age` int(3) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `id` int(6) NOT NULL AUTO_INCREMENT,
  `username` varchar(60) DEFAULT NULL,
  `realname` varchar(60) DEFAULT NULL,
  `password` varchar(50) DEFAULT NULL,
  `sex` varchar(4) DEFAULT NULL,
  `status` varchar(4) DEFAULT NULL,
  `regsterTime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

4.导入相关文件将本章开头的原文件中css样式js等文件导入

在这里插入图片描述
复制粘贴到static目录下
现在这个项目的基本环境已经搭建好了
我们可以开启服务器访问http://localhost:8181/ems_vue/regist.html查看，
如果注册页面显示，成功！

二、验证码实现

1.首先我们先写一下这个功能的接口

在这里插入图片描述
创建UserController的java类，然后需要一个验证码生成类需要从我给的资料中导入，在和UserController同一级的目录下创建一个Units文件夹，将资料中的VerifyCodeUtils.java复制到Units文件夹中

2.编写UserController类代码如下:

@RestController
@CrossOrigin //允许跨域
@RequestMapping("user")
public class UserController {
   
    /**
    *生成验证码图片
     */
    @GetMapping("getImage")
    public  String getImageCide(HttpServletRequest request) throws IOException {
   
        //使用工具类生成验证码
        String code = VerifyCodeUtils.generateVerifyCode(4);
        //将验证码放入servletContext作用域
        request.getServletContext().setAttribute("code",code);//得到最大作用域
        ByteArrayOutputStream byteArrayOutputStream =new ByteArrayOutputStream();
        VerifyCodeUtils.outputImage(100,60,byteArrayOutputStream,code);
        return "data:image/png;base64,"+Base64Utils.encodeToString(byteArrayOutputStream.toByteArray());
    }
}

3.在regist.html中添加和修改

添加

<script src="/ems_vue/js/vue.js"></script>
<script src="/ems_vue/js/axios.min.js"></script>
<script>
	var app=new Vue({
   
		el:"#wrap",
		data:{
   
			url:"",

		},
		methods:{
   
			getImg(){
   
				this.getSrc();
			},
			//获取验证码
			getSrc(){
   
				var _this = this;
				axios.get("http://localhost:8181/ems_vue/user/getImage?time="+Math.random()).then(res=>{
   
					console.log(res.data);
					_this.url = res.data;
				})
			}
		},
		created(){
   
			this.getSrc();
		}
	})
</script>

修改
在这里插入图片描述
三、运行
启动项目后访问:
http://localhost:8181/ems_vue/regist.html

三、用户注册功能实现

首先创建如图所示目录结构及文件

在这里插入图片描述
1.首先我们创建实体类User

@Data
@Accessors (chain = true)
public class User {
   
    private String id;
    private String username;
    private String realname;
    private String password;
    private String sex;
    private String status;
    private Date registerTime;
}

@Data注解：提供一些类的基本方法 equals()、hashCode()、toString()
@Accessors注解：生成显示getters,setters方法
Accessors三个属性：

1.fluent
fluent为一个布尔值，如果为true生成的get/set方法则没有set/get前缀，默认为false
2.chain
chain为一个布尔值，如果为true生成的set方法返回this，为false生成的set方法是void类型。默认为false，除非当fluent为true时，chain默认则为true
3.prefix
prefix为一系列string类型，可以指定前缀，生成get/set方法时会去掉指定的前缀
2.编写UserDAO接口(将用户信息保存到User对象中)

package com.baizhi.dao;

import com.baizhi.entity.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper//用来创建dao对象
public interface UserDAO {
   
    void save(User user);
    
	User findByUserName(String username);
}

Mapper注解：

添加了@Mapper注解之后这个接口在编译时会生成相应的实现类

3.配置UserDAOmapper.xml文件(将User对象信息插入数据库中)

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.baizhi.dao.UserDAO">
    <insert id="save" parameterType="User" useGeneratedKeys="true" keyProperty="id">
        insert into t_user values (#{
   id},#{
   username},#{
   realname},#{
   password},#{
   sex},#{
   status},#{
   registerTime});
    </insert>

	<!--findByUserName-->
    <select id="findByUserName" parameterType="String" resultType="User">
        select id,username,realname,password,sex,status,regsterTime
        from t_user where username=#{
   username}
    </select>

</mapper>

4.编写UserService接口(用户注册功能)

package com.baizhi.service;

import com.baizhi.entity.User;

public interface UserService{
   
    //用户注册
    void register(User user);
}

5.UserServiceImp1实现UserService接口

@Service
@Transactional
public class UserServiceImp1 implements UserService {
   

    @Autowired
    private UserDAO userDAO;

    @Override
    public void register(User user) {
   
        //生成用户状态
        user.setStatus("已激活");
        //设置用户注册时间
        user.setRegisterTime(new Date());
        //调用Dao
        userDAO.save(user);
    }
}

Server注解:

用于类上，标记当前类是一个service类，加上该注解会将当前类自动注入到spring容器中，不需要再在applicationContext.xml文件定义bean了

Transactional注解:

通常情况下我们在需要对一个service方法添加事务时，加上这个注解

6.在UserController类中添加代码

@RestController
@CrossOrigin //允许跨域
@RequestMapping("user")
@Slf4j
public class UserController {
   

    /**
     * 用来处理用户注册的方法
     * */
    @Autowired
    private UserService userService;

    @PostMapping("register")
    public Map

最低0.47元/天解锁文章