1. クエリ機能
ユーザー
@Data
public class User {
private Integer id;
private String username;
private String password;
private String nickname;
private String email;
private String phone;
private String address;
private Date createTime;
}
ユーザーコントローラー
UserController
UserService
UserServiceImpl
UserMapper
ユーザーサービス
List<User> selectAll();
UserServiceImpl
@Override
public List<User> selectAll() {
return userMapper.selectAll();
}
ユーザーマッパー
@Select("select * from sys_user")
List<User> selectAll();
2. 追加・変更
ユーザーコントローラー
//新增和修改
@PostMapping("/save")
public Integer save(@RequestBody User user){
//新增或者更新
return userService.save(user);
}
ユーザーサービス
Integer save(User user);
UserServiceImpl
@Override
public Integer save(User user) {
//如果user没有id,则表示为新增
if (user.getId() == null){
return userMapper.save(user);
}else {//否则为更新
return userMapper.update(user);
}
}
ユーザーマッパー
@Insert("insert into sys_user(username,password,email,nickname,phone,address) values(#{username},#{password},#{email}," +
"#{nickname},#{phone},#{address})")
Integer save(User user);
Integer update(User user);
ユーザーマッパー.xml
<update id="update">
update sys_user
<set>
<if test="username!=null">
username = #{username},
</if>
<!--<if test="password!=null">
password = #{password}
</if>-->
<if test="email!=null">
email = #{email},
</if>
<if test="nickname!=null">
nickname = #{nickname},
</if>
<if test="phone!=null">
phone = #{phone},
</if>
<if test="address!=null">
address = #{address}
</if>
</set>
<where>
id = #{id}
</where>
</update>
3. 削除
ユーザーコントローラー
@DeleteMapping("/{id}")
public Integer delete(@PathVariable Integer id){
return userService.deleteById(id);
}
ユーザーサービス
@DeleteMapping("/{id}")
public Integer delete(@PathVariable Integer id){
return userService.deleteById(id);
}
UserServiceImpl
@Override
public Integer deleteById(Integer id) {
return userMapper.deleteById(id);
}
ユーザーマッパー
Integer deleteById(@Param("id") Integer id);
ユーザーマッパー.xml
<delete id="deleteById">
delete from sys_user
where id = #{id}
</delete>
4. ページネーションクエリ
ユーザーコントローラー
//分页查询
//接口路径 /user/selectPage?pageNum = 1 &pageSize = 10
//@RequestParam 接收
//limit第一个参数 = (pageNum - 1)*pageSize
//pageSize
@RequestMapping("/selectPage")
public Map<String, Object> selectPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize){
pageNum = (pageNum -1) *pageSize;
List<User> data = userService.selectPage(pageNum,pageSize);
Integer total = userService.selectTotal();
Map<String,Object> res = new HashMap<>();
res.put("total",total);
res.put("data",data);
return res;
}
ユーザーサービス
List<User> selectPage(Integer pageNum, Integer pageSize);
Integer selectTotal();
UserServiceImpl
@Override
public List<User> selectPage(Integer pageNum, Integer pageSize) {
return userMapper.selectPage(pageNum,pageSize);
}
@Override
public Integer selectTotal() {
return userMapper.selectTotal();
}
ユーザーマッパー
List<User> selectPage(Integer pageNum, Integer pageSize);
Integer selectTotal();
ユーザーマッパー.xml
<select id="selectPage" resultType="com.example.springboot.entity.User">
select *
from sys_user
where username
like #{username}
limit #{pageNum},#{pageSize}
</select>
<select id="selectTotal" resultType="java.lang.Integer">
select count(id)
from sys_user
where username like concat('%', #{username}, '%')
</select>
伝統的な方法:
//修改分页组件
<div style="padding:10px 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
//添加参数
data() {
return {
tableData: [],
total: 0,
pageNum: 1,
pageSize: 2,
msg: "hello word",
collapseBtnClass: 'el-icon-s-fold',
isCollapse: false,
sideWidth: 200,
logoTextShow: true,
headerBg: 'headerBg'
}
},
//封装方法
load() {
fetch("http://localhost:9090/user/selectPage?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize)
.then(res => res.json()).then(res => {
console.log(res)
this.tableData = res.data
this.total = res.total
})
},
//实现分页页面跳转
handleSizeChange(pageSize) {
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum) {
this.pageNum = pageNum
this.load()
}
検索ボックスの実装
<div style="padding: 10px 0">
//绑定username
<el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"
class="ml-5" v-model="username"></el-input>
//调用load方法
<el-button class="ml-5" type="primary" @click="load">搜索</el-button>
</div>
//创建username默认值
data() {
return {
tableData: [],
total: 0,
pageNum: 1,
pageSize: 2,
username:"",
msg: "hello word",
collapseBtnClass: 'el-icon-s-fold',
isCollapse: false,
sideWidth: 200,
logoTextShow: true,
headerBg: 'headerBg'
}
},
//为方法添加参数
load() {
fetch("http://localhost:9090/user/selectPage?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&username=" + this.username)
.then(res => res.json()).then(res => {
console.log(res)
this.tableData = res.data
this.total = res.total
})
},