ごみ箱管理ディレクトリ
序文
プロジェクトはほぼ完成しており、最近は別の勉強で忙しくて記事を書く時間がなかったので今日更新します!!!
基本的な考え方
実際、ごみ箱の実現は難しいことではなく、逆の考え方をするだけで実現できます。
まず、2 つのエンティティ クラスを作成します。それぞれ RecycleUser と RecycleEmployee です。エンティティ クラスの属性は前の User クラスと Employee クラスと同じなので、これらを直接コピーし、それぞれリサイクル情報のデータを格納する 2 つの新しいデータベース テーブルを作成します。肝心なのは、ユーザー管理ページでユーザーを削除すると、削除するユーザー情報がゴミ箱に保存されるというもので、この機能は不要なようですが、それでもある程度は便利です、ははははは。
ヒント: 以下はこの記事の本文であり、次のケースは参考用です。
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 インターフェイス メソッドをカプセル化する新しいリサイクル ファイルを作成します。
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: "已取消还原",
});
});
},
2 番目に、バックエンド インターフェイスのメソッド実装
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.2ユーザーマッパー
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.5ml
ここでの実装の考え方は、リカバリ テーブルにデータを挿入することです。
<!--新增用户的映射文件-->
<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. ページの実現
ページ実装のスクリーンショットを撮り忘れたので、次回に補足します。
要約する
次回はフロントエンドのパフォーマンスの最適化の問題が出題されます。これはフロントエンドの初心者にとって非常に役立ちます(笑)。