휴지통 관리 디렉터리
머리말
프로젝트가 거의 끝나가는 중이고, 최근에 다른 공부를 하느라 글을 쓸 시간이 없어서 오늘 업데이트 할게요! ! !
기본 아이디어
사실, 휴지통의 구현은 어렵지 않습니다. 단지 그것을 실현하기 위해서는 역발상이 필요합니다.
먼저 두 개의 엔터티 클래스를 만듭니다. 이들은 각각 RecycleUser와 RecycleEmployee이며 엔티티 클래스의 속성은 이전 User 클래스와 Employee 클래스와 동일하므로 직접 복사한 다음 각각 재활용 정보 데이터를 저장할 두 개의 새로운 데이터베이스 테이블을 생성합니다. 핵심은 사용자 관리 페이지에서 사용자를 삭제할 때 삭제할 사용자 정보가 휴지통에 저장된다는 것입니다.이 기능은 필요 없어 보이지만 여전히 어느 정도 유용합니다.
팁: 다음은 이 기사의 텍스트이며, 다음 사례는 참고용입니다.
1. 프런트 엔드 페이지 작성
여기서의 경우는 사용자가 재활용한 페이지를 기준으로 하며, 직원 재활용 방법은 동일합니다!
1. 사용자 재활용 관리 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 폴더 아래에 새로운 재활용 파일을 생성하여 api 인터페이스 메서드를 캡슐화합니다.
추신: 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. 도 레이어
/**
* @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 파일에 재활용 방법을 추가하는 것입니다.
6.1사용자 컨트롤러
//回收用户方法，调用服务层的方法，使用工具类返回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.3사용자 서비스
/**
* 回收用户服务
* @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. 페이지 구현
페이지 구현 스크린샷을 깜빡해서 다음에 보충하겠습니다!
요약하다
다음에는 프론트엔드 초심자에게 매우 유용한 프론트엔드 성능 최적화 문제가 있을 것입니다 하하하.