Vue + Spring Boot 项目实战:人事管理系统——(3)回收站页面及方法实现

---

前言

项目基本快完成了，最近在忙学习其他的，就没来得及写文章，今天就来更新！！！

基本思路

  其实回收站的实现并不难，这里只需要逆向思维即可实现。
  先创建两个实体类。分别是RecycleUser和RecycleEmployee，实体类的属性和之前的User类、Employee类相同，直接复制过来即可，其次在创建两张新的数据库表，分别保存回收信息的数据。核心就是在用户管理页面的时候，删除一个用户，会将即将删除的用户信息保存在回收站中，虽然这个功能看似可有可无，但在一定程度上还是挺有用的哈哈哈哈哈。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端页面的编写

这里的案例就具体以用户回收的页面为准，员工回收的方法同理！

1.编写用户回收管理vue页面

回收管理页面目录结构

vue布局

<!-- 回收用户信息页面 -->
<template>
  <!-- 主布局 -->
  <div class="container">
    <!-- 卡片式布局 -->
    <el-card>
      <el-row :gutter="25">
        <!--设置间隙  -->
        <!-- 搜索区域 -->
        <el-col :span="10"
          ><!-- 列宽 -->
          <el-input
            placeholder="请输入搜索内容"
            :model="fromData.name"
            clearable
            @cleaer="searchUserList"
          >
            <!-- 搜索功能按钮，用语法糖绑定查询用户的方法 -->
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchUserList"
            ></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <!-- 添加用户按钮 -->
          <el-button type="primary" @click="searchUserList">搜索用户</el-button>
        </el-col>
      </el-row>

      <!-- table表单数据-->
      <el-table
        style="
          font-size: 14px;
          box-shadow: 10px 10px 5px rgba(99, 99, 153, 0.2);
        "
        :data="userList"
        border
        stripe
        :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
      >
        <!-- 可勾选控件 -->
        <el-table-column type="selection"></el-table-column>

        <!-- 用户名列 -->
        <el-table-column
          label="用户名"
          prop="username"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 邮箱列 -->
        <el-table-column
          label="邮箱"
          prop="email"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 密码列 -->
        <el-table-column
          label="密码"
          prop="password"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 角色列 -->
        <el-table-column
          label="角色"
          prop="role"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 修改时间列 -->
        <el-table-column
          label="修改时间"
          prop="modifyTime"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 状态列 -->
        <el-table-column
          label="状态"
          prop="state"
          align="center"
          min-width="10%"
        >
          <template slot-scope="scope">
            <el-tag v-model="scope.row.state">{
   
   { scope.row.state }}</el-tag>
          </template>
          <!-- <el-tag type="warning">待回收</el-tag> -->
        </el-table-column>

        <!-- 作用域操作，将操作放在同一个列中 -->
        <el-table-column label="操作" align="center" min-width="15%">
          <template slot-scope="scope">
            <!-- 回收按钮 -->
            <el-tooltip content="回收" placement="top">
              <el-button
                type="success"
                icon="el-icon-upload"
                size="mini"
                @click="handleRestore(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>

            <!--  修改按钮 -->
            <el-tooltip content="修改" placement="top">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="deleteUser(scope.row.id)"
              ></el-button>
            </el-tooltip>

            <!--  删除按钮 -->
            <el-tooltip content="彻底删除" placement="top">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleDelete(scope.row.id, scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- size-change:每页条数 -->
      <div class="block" style="text-align: center; margin-top: 15px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fromData.pageIndex"
          :page-sizes="pageInfo.pageSizes"
          :page-size="fromData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

js

import {
    
    
  list,
  delUser,
  restore,
} from "@/api/recycle/index"; /* 调用后台api的接口 */
export default {
    
    
  created() {
    
    
    this.queryUserList(); //挂载查询用户方法
    const loading = this.$loading({
    
    
      lock: true,
      text: "数据加载中......",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    setTimeout(() => {
    
    
      loading.close();
    }, 1000); /* 设置时间为1秒 */
  },
  //数据定义
  data() {
    
    
    return {
    
    
      userList: [], //查询信息封装实体
      fromData: {
    
    
        name: "",
        pageIndex: 1, //当前页码，为第一页
        pageSize: 5, //默认每页最大数为5，可以动态的切换每页最大数
      },
      pageInfo: {
    
    
        total: 0, //总数，初始值为0
        pageSizes: [1, 5, 10, 20], //定义每次显示最大的条数
      },
    };
  },
  methods: {
    
    
    //查询在回收站用户的方法
    queryUserList() {
    
    
      var $that = this;
      list(this.fromData).then((res) => {
    
    
        if (res.code == 200 && res.success == "success") {
    
    
          $that.userList = res.data.list;
          $that.pageInfo.total = res.data.total;
        }
      });
    },

    //搜索员工方法实现
    searchUserList() {
    
    
      this.queryUserList();
      this.$message({
    
    
        message: "查询成功，结果如下",
        type: "success",
      });
    },

    //回收站功能已实现05.30
    handleRestore(index, row) {
    
    
      var that = this;
      this.$confirm(
        "此操作将还原用户： " + row.username + " , 是否继续?",
        "提示",
        {
    
    
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
    
    
          //定义回收的参数，分别是id，用户名，邮箱，密码，修改时间，状态，角色
          var params = {
    
    
            id: row.id, //用户id
            username: row.username, //用户名
            email: row.email, //用户邮箱
            password: row.password, //用户密码
            modifyTime: row.modifyTime, //用户修改时间
            role: row.role, //用户角色
            state: row.state, //用户状态
          };
          restore(params).then(); /* 在回收的同时，将数据删除 */
          delUser(params).then((res) => {
    
    
            if (res.code == 200 && res.success == "success" && res.data >= 1) {
    
    
              this.$message({
    
    
                type: "success",
                message: "还原" + row.username + "成功!",
              });
              this.queryUserList();
            } else {
    
    
              this.$message({
    
    
                type: "success",
                message: "还原" + row.username + "失败!",
              });
            }
          });
        })
        .catch(() => {
    
    
          //点击取消
          this.$message({
    
    
            type: "info",
            message: "已取消还原",
          });
        });
    },

    //删除功能并恢复已实现05.30
    handleDelete(id, row) {
    
    
      this.$confirm(
        "此操作将永久删除 " + row.username + " , 是否继续?",
        "提示",
        {
    
    
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true, //将位置设置在中心
        }
      ).then(() => {
    
    
        var params = {
    
     id: row.id }; //根据用户id进行删除
        //点击确定
        delUser(params).then((res) => {
    
    
          if (res.code == 200 && res.success == "success" && res.data >= 1) {
    
    
            this.$message({
    
    
              type: "success",
              message: "删除" + row.username + "成功!",
            });
            this.queryUserList(); /* 重新调用查询回收站用户的方法 */
          } else {
    
    
            this.$message({
    
    
              type: "danger",
              message: "删除" + row.username + "失败!",
            });
          }
        });
      });
    },
    //每页显示的条目个数
    handleSizeChange(val) {
    
    
      this.fromData.pageSize = val;
      this.queryUserList(); //获取当前用户列表
    },
    //切换当前页数方法
    handleCurrentChange(val) {
    
    
      this.fromData.pageIndex = val;
      this.queryUserList(); //获取当前用户列表
    },
  },
};
</script>

2.封装api接口

api接口一般都是用来调用后端的方法，实现前后端的数据交互效果！！！
在api文件夹下，新建recycle文件，封装api接口方法。
PS：在第一次使用axois时，需要npm intsall axios。并且在main.js文件中配置axios的路径，请求超时时间！具体配置方法可以在通过文档查询。

import request from '@/util/request.js'
//回收管理api接口

/* 没有配置默认地址的话，则显示在main.js文件中9000端口，用户回收方法定义*/
export function list(params) {
    
    
    return request({
    
    
        url: 'http://127.0.0.1:9007/sys/recycle/list',
        //http://127.0.0.1:9007/api/auth/login
        method: 'get',
        params
    })
}

/* 永久删除员工方法 */
export function delUser(params) {
    
    
  return request({
    
    
    url: 'http://127.0.0.1:9007/sys/recycle/del',
    method: 'delete',
	params
  })
}

/* 用户恢复方法，将数据恢复到sys_user表中 */
export function restore(params) {
    
    
  return request({
    
    
    url: 'http://127.0.0.1:9007/sys/recycle/restoreUser',
    method: 'post',
	params
  })
}

在这里插入代码片

3.回收站实现方法

 //回收站功能已实现05.30
    handleRestore(index, row) {
    
    
      var that = this;
      this.$confirm(
        "此操作将还原用户： " + row.username + " , 是否继续?",
        "提示",
        {
    
    
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
    
    
          //定义回收的参数，分别是id，用户名，邮箱，密码，修改时间，状态，角色
          var params = {
    
    
            id: row.id, //用户id
            username: row.username, //用户名
            email: row.email, //用户邮箱
            password: row.password, //用户密码
            modifyTime: row.modifyTime, //用户修改时间
            role: row.role, //用户角色
            state: row.state, //用户状态
          };
          restore(params).then(); /* 调用api的后端回收方法，在回收的同时，将数据删除 */
          delUser(params).then((res) => {
    
    /*调用api的后端删除方法*/
            if (res.code == 200 && res.success == "success" && res.data >= 1) {
    
    
              this.$message({
    
    
                type: "success",
                message: "还原" + row.username + "成功!",
              });
              this.queryUserList();
            } else {
    
    
              this.$message({
    
    
                type: "success",
                message: "还原" + row.username + "失败!",
              });
            }
          });
        })
        .catch(() => {
    
    
          //点击取消
          this.$message({
    
    
            type: "info",
            message: "已取消还原",
          });
        });
    },

二、后端接口的方法实现

1.编写回收用户实体类

/**
 * @author kk
 * @version 1.0
 * @date 2021/5/19 11:40
 * 用户回收信息实体
 */
@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class RecycleUser {
    
    
    private Integer id;//角色id
    private String username;//用户名
    private String password;//用户密码
    private String email;//用户邮箱
    private String role;//用户角色
    private Boolean state;//用户状态，判断是否能够进入后台
    private Integer userId;//角色id
    private Date modifyTime;//用户修改时间
    private Date createTime;//用戶创建时间
}

2.控制层

/**
 * @author kk
 * @version 1.0
 * @date 2021/5/19 12:23
 * 回收用户控制层
 */
@RestController
@RequestMapping(value = "/sys/recycle")
public class RecycleUserController {
    
    
    @Resource
    RecycleUserService recycleUserService;

    @RequestMapping(value = "/list")
    public ObjectResult<PageInfo<RecycleUser>> getAllDept(@RequestParam(value = "name", required = false) String username,
                                                          @RequestParam(value = "pageIndex", required = false, defaultValue = "1") Integer pageIndex,
                                                          @RequestParam(value = "pageSize", required = false, defaultValue = "10") Integer pageSize)
    {
    
    
        PageInfo <RecycleUser> pageInfo = recycleUserService.list(username, pageIndex, pageSize);
        return ResultUtil.okObjectResult(pageInfo);
    }

    //在前端通过发送员工id查询到员工消息，并将查询到的数据返回给前端
    @RequestMapping(value = "/getUserInfo")
    public ObjectResult<RecycleUser> getById(@RequestParam("id")Integer id) {
    
    
        RecycleUser recycleUser = recycleUserService.findById(id);
        return ResultUtil.okObjectResult(recycleUser);
    }


    //还原方法的提交映射
    @PostMapping(value = "/restoreUser")
    public ObjectResult restore(@RequestParam(value = "username") String username,
                                @RequestParam(value = "id")Integer id,
                                @RequestParam(value = "password") String password,
                                @RequestParam(value = "role") String role,
                                @RequestParam(value = "state") Boolean state,
                                @RequestParam(value = "email") String email){
    
    
        RecycleUser recycle=new RecycleUser();//实例化一个对象
        recycle.setUsername(username);//设置用户名
        recycle.setId(id);//设置用户id
        recycle.setPassword(password);//设置密码
        recycle.setRole(role);//设置用户角色
        recycle.setState(state);//设置用户状态
        recycle.setUserId(2);//设置初始化用户id，默认为2
        recycle.setEmail(email);//设置用户邮箱
        recycle.setCreateTime(new Date());//设置创建时间，根据当前时间插入
        recycle.setModifyTime(new Date());//设置修改时间，根据当前时间插入
        int count = recycleUserService.restore(recycle);
        return ResultUtil.okObjectResult(count);
    }

    //删除用户方法，根据id号来执行删除,接口为/sys/recycle/del
    @RequestMapping(value = "/del")
    public ObjectResult deleteUser(@RequestParam(value = "id") Integer id) {
    
    
        System.out.println("删除用户"+id+"成功");
        return ResultUtil.okObjectResult(recycleUserService.del(id));
    }

    /* 自定义日期转换格式，解决前端传输来的数据无法转换成Date类型 */
    @InitBinder
    public void InitBinder (ServletRequestDataBinder binder){
    
    
        binder.registerCustomEditor(java.util.Date.class,
                new CustomDateEditor(new SimpleDateFormat("yyyy-MM-dd"), true)
        );
    }
}

3.1服务层

/**
 * @author kk
 * @version 1.0
 * @date 2021/5/30 12:29
 */
@Service
public interface RecycleUserService {
    
    
    /**
     * 条件查询
     * @param username
     * @param pageIndex 页码
     * @param pageSize 每页条数
     * @return
     */
    PageInfo <RecycleUser> list(String username,Integer pageIndex,Integer pageSize);

    /**
     * 条件查询
     * @param id
     * @return
     */
    RecycleUser findById(Integer id);

    /**
     * 还原用户信息
     * @param recycleUser
     * @return
     */
    int restore(RecycleUser recycleUser);
    
    /**
     * 彻底删除用户信息
     * @param id
     * @return
     */
    int del(Integer id);
}

3.2服务层实现类

/**
 * @author kk
 * @version 1.0
 * @date 2021/5/30 12:30
 */
@Service
@Transactional
public class RecycleUserServiceImpl implements RecycleUserService {
    
    

    @Resource
    RecycleUserMapper recycleUserMapper;//注入Mapper层

    /*显示在回收站用户信息服务*/
    @Transactional(propagation = Propagation.SUPPORTS,readOnly = true)
    @Override
    public PageInfo <RecycleUser> list(String username, Integer pageIndex, Integer pageSize) {
    
    
        PageHelper.startPage(pageIndex,pageSize);
        List <RecycleUser> list = recycleUserMapper.getAllUserList(username);
        return new PageInfo<>(list);
    }

    /*根据用户id查询到信息服务*/
    @Transactional(propagation = Propagation.REQUIRED,readOnly = false)
    @Override
    public RecycleUser findById(Integer id) {
    
    
        return recycleUserMapper.getById(id);
    }

    /*还原用户信息方法服务*/
    @Transactional(propagation = Propagation.REQUIRED,readOnly = false)
    @Override
    public int restore(RecycleUser recycleUser) {
    
    
        return recycleUserMapper.restoreUser(recycleUser);
    }

    /*删除用户信息服务，根据id进行删除*/
    @Transactional(propagation = Propagation.REQUIRED,readOnly = false)
    public int del(Integer id) {
    
     return recycleUserMapper.deleteUser(id); }
}

4.Dao层

/**
 * @author kk
 * @version 1.0
 * @date 2021/5/30 12:24
 */
@Mapper
@Transactional
public interface RecycleUserMapper {
    
    
    List <RecycleUser> getAllUserList(@Param(value = "username")String username);//获得所有的用户信息方法
    int restoreUser(RecycleUser recycleUser);//恢复功能实现
    RecycleUser getById(@Param(value = "id")Integer id);//根据用户id值，查询用户信息
    int deleteUser(@Param(value = "id")Integer id);//删除在回收站的用户
}

5.xml编写

<!--id值对应mapper下的方法名字，查询到表中的信息-->
<mapper namespace="com.jk4.recycle.dao.RecycleUserMapper">
    <select id="getAllUserList" resultType="RecycleUser">
        select * from sys_recycle_user
        <trim prefix="WHERE" prefixOverrides="and|or">
            <if test="username!=null and username!=''">
                where username LIKE #{username}
            </if>
        </trim>
    </select>


    <!--根据id值查询到当前用户信息-->
    <select id="getById" resultType="RecycleUser">
        SELECT * FROM sys_recycle_user WHERE id=#{id}
    </select>

    <!--回收站功能核心：实现原理将即将删除的用户信息插入到sys_user表中-->
    <insert id="restoreUser" parameterType="RecycleUser">
        INSERT into sys_user(username,password,email,role,state,createTime)
        value(#{username},#{password},#{email},#{role},#{state},#{createTime})
    </insert>

    <!--根据用户id删除信息-->
    <delete id="deleteUser">
        delete from sys_recycle_user where id=#{id}
    </delete>
</mapper>

6.最后一步(重要)

最后重要的一步，就是分别在UserController、UserMapper、UserService、UserServiceImpl、xml文件中添加回收的方法

扫描二维码关注公众号，回复： 15658826 查看本文章

6.1UserController

 //回收用户方法，调用服务层的方法，使用工具类返回json格式，还未实现
    @RequestMapping(value = "/recycle")
    public ObjectResult recycleUser(
                                    @RequestParam(value = "username") String username,
                                    @RequestParam(value = "id")Integer id,
                                    @RequestParam(value = "password") String password,
                                    @RequestParam(value = "role") String role,
                                    @RequestParam(value = "state") Boolean state,
                                    @RequestParam(value = "email") String email){
    
    
        User user =new User();//实例化一个User对象
        user.setUsername(username);//更改用户名
        user.setId(id);//更改用户id
        user.setPassword(password);//更改用户密码
        user.setRole(role);//更改用户角色
        user.setState(state);//更改用户状
        user.setEmail(email);//更改用户邮箱
        user.setUserId(2);//更改初始化用户id，默认为2
        user.setModifyTime(new Date());//根据当前时间设置修改时间
        int count = userService.recycle(user);
        return ResultUtil.okObjectResult(count);//返回处理的数据结果集
    }

6.2UserMapper

int recycle(User user);

6.3UserService

 /**
     * 回收用户服务
     * @param user
     * @return
     */
    int recycle(User user);

6.4UserServiceImpl

  /*回收用户信息实现*/
    @Override
    @Transactional(propagation = Propagation.REQUIRED,readOnly = false)
    public int recycle(User user) {
    
    
        return userMapper.recycle(user);
    }

6.5xml

实现的思路就是在这里，将数据插入回收表中。

<!--新增用户的映射文件-->
    <insert id="recycle" parameterType="User">
        INSERT into sys_recycle_user (username,password,email,role,state,modifyTime,userId)
        value(#{username},#{password},#{email},#{role},#{state},#{modifyTime},#{userId})
    </insert>

7.页面实现

页面实现忘记截图了，下次补上！

总结

下一次出一期前端性能优化的，对于前端小白来说挺有用的哈哈哈哈。