目录
src下创建此目录
api目录下创建js文件引入axios（封装的方法）
//引入axios的对象
import request from '../utils/request'
export function getUser(page,size,name) {
return request({
url: '/getUserList',
method: 'get',
params:{
page,
size,
name
}
})
}
export function deleUser(id) {
return request({
url: '/deleUser',
method: 'DELETE',
params:{
id
}
})
}
export function addUser(user) {
return request({
url: '/addUser',
method: 'post',
data:user
})
}
export function updateUser(user) {
return request({
url: '/updateUser',
method: 'post',
data:user
})
}
前端页面（使用elementui组件）
<template>
<el-card class="box-card">
<el-breadcrumb separator="/">
<el-breadcrumb-item>系统管理</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
</el-breadcrumb>
<!-- 表单 -->
<el-form :inline="true" :model="user" class="demo-form-inline">
<el-form-item label="用户名">
<el-input v-model="user.name" placeholder="用户名" clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
<el-button
type="primary"
style="float: right; margin-right: 20px"
@click="toDoAddUser()"
>新增用户信息</el-button
>
</el-form>
<!-- 表格 -->
<el-table :data="userList" border style="width: 100%">
<el-table-column prop="id" label="编号" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="age" label="年龄" width="100"> </el-table-column>
<el-table-column prop="email" label="邮箱" width="220"> </el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete"
@click="delUser(scope.row.id)">删除</el-button>
<el-button
type="primary"
icon="el-icon-edit"
@click="toDoUpUser(scope.row)"
>修改</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[2, 3, 4, 5]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<!-- 新增和修改的弹框 -->
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="40%"
:before-close="handleClose"
>
<el-form>
<el-form-item label="编号">
<el-input v-model="user.id" placeholder="编号"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="user.name" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="user.age" placeholder="年龄"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="user.email" placeholder="邮箱"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="EditUser()"
>确 定</el-button
>
</span>
</el-dialog>
</el-card>
</template>
<script>
//引入api/user
import {getUser,deleUser,addUser,updateUser} from '../../api/user'
export default {
data() {
return {
user: {
id: '',
name: "",
age: '',
email: ""
},
userList: [
{
id: '',
name: "",
age: '',
email: "",
},
],
//当前页码
page: 1,
size:2,
//是否显示弹框
dialogVisible: false,
title: "",
//总条数
total:10
};
},
methods: {
//查询键
onSubmit() {
this.page = 1;
this.getUserList()
},
handleSizeChange(val) {
this.size = val;
this.getUserList();
},
handleCurrentChange(val) {
this.page = val;
this.getUserList();
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
})
.catch((_) => {
});
},
//分页查询所有方法
//async 表示异步 必须配合await
async getUserList() {
let result = await getUser(this.page, this.size, this.user.name)
this.userList = result.list;
this.total = result.total;
console.log(result)
},
//删除用户
async delUser(id) {
let result = await deleUser(id);
if (result > 0) {
this.$message({
showClose: true,
message: '删除成功',
type: 'success'
});
this.getUserList();
}
},
//点击修改按钮 调用修改窗体
toDoUpUser(row){
this.user=row;
this.dialogVisible = true;
this.title = '修改用户信息';
},
//点击新增按钮 调用新增窗体
toDoAddUser() {
this.dialogVisible = true;
this.title = '新增';
},
//修改新增确认键事件
async EditUser() {
var result="";
if (this.title === "新增") {
result = await addUser(this.user)
} else {
result = await updateUser(this.user)
}
if (result > 0) {
this.$message({
showClose: true,
message: this.title+'成功',
type: 'success'
});
//清空user对象的内容
this.user={}
//刷新用户列表
this.getUserList();
}
//关闭窗口
this.dialogVisible=false;
},
},
//加载时调用查询所有方法
created() {
this.getUserList()
}
};
</script>
<style scoped>
.el-form,
.el-pagination {
margin-top: 20px;
}
</style>后端
1.搭建项目结构
2.分页插件
<!--添加分页插件依赖-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>3.entity层
@Data
public class User {
private Integer id;
private String name;
private Integer age;
private String email;
}
4.mapper层
@Mapper
public interface UserMapper {
//新增
int addUser(User user);
//删除
@Delete("delete from user where id=#{id}")
int deleUser(Integer id);
//修改
@Update("update user set name=#{name},age=#{age},email=#{email} where id=#{id}")
int updateUser(User user);
//分页条件查询
List<User> getUser(@Param("page") Integer page, @Param("size")Integer size, @Param("name")String name);
//根据id查询用户
@Select("select * from user where id=#{id}")
User getUserById(Integer id);
//条件查询
List<User> getAll(String name);
}
5.service层
public interface UserService {
int addUser(User user);
int deleUser(Integer id);
int updateUser(User user);
List<User> getUser(Integer page, Integer size,String name);
User getUserById(Integer id);
//使用分页插件实现分页+条件查询
PageInfo<User> getUserByPage(Integer page, Integer size, String name);
}
service下的impl层
@Service
public class UserImpl implements UserService {
@Autowired
UserMapper userMapper;
@Override
public int addUser(User user) {
return userMapper.addUser(user);
}
@Override
public int deleUser(Integer id) {
return userMapper.deleUser(id);
}
@Override
public int updateUser(User user) {
return userMapper.updateUser(user);
}
@Override
public List<User> getUser(Integer page, Integer size, String name) {
return userMapper.getUser((page-1)*size, size, name);
}
@Override
public User getUserById(Integer id) {
return userMapper.getUserById(id);
}
@Override
public PageInfo<User> getUserByPage(Integer page, Integer size, String name) {
PageHelper.startPage(page,size);
List<User> users=userMapper.getAll(name);
PageInfo<User> pageInfo=new PageInfo<>(users);
return pageInfo;
}
}
6.xml映射文件
<?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.qiu.mapper.UserMapper">
<insert id="addUser">
INSERT INTO `user`(`id`, `name`, `age`, `email`) VALUES (default , #{name}, #{age}, #{email});
</insert>
<select id="getUser" resultType="com.qiu.entity.User">
select * from user
<where>
<if test="name!=null and name!=''">
name like concat('%',#{name},'%')
</if>
</where>
limit #{page},#{size}
</select>
<select id="getAll" resultType="com.qiu.entity.User">
select * from user
<where>
<if test="name!=null and name!=''">
name like concat('%',#{name},'%')
</if>
</where>
</select>
</mapper>7.controller层
GetMapping???获取
PostMapping??新增
DeleteMapping删除
PutMapping???更新
package com.qiu.controller;
import com.github.pagehelper.PageInfo;
import com.qiu.entity.User;
import com.qiu.service.UserService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.omg.CORBA.PUBLIC_MEMBER;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@CrossOrigin //防跨域注解
@Api(value = "用户管理")
public class UserController {
@Autowired
UserService service;
@ApiOperation(value = "获取用户",notes = "分页+条件查询")
@GetMapping("/getUserList")
public PageInfo<User> getUserList(@ApiParam(name = "page",value = "页码") @RequestParam(value = "page",required = true,defaultValue = "1") Integer page,
@RequestParam(value = "size",required = true,defaultValue = "2") Integer size,
@RequestParam(value = "name",required = false)String name){
return service.getUserByPage(page, size, name);
}
@ApiOperation(value = "删除用户",notes = "根据id删除用户")
@DeleteMapping("/deleUser")
public int deleUser(Integer id){
return service.deleUser(id);
}
@ApiOperation(value = "修改用户",notes = "根据id修改用户信息")
@PostMapping ("/updateUser")
public int updateUser(@RequestBody User user){
return service.updateUser(user);
}
@ApiOperation(value = "新增用户",notes = "新增用户信息")
//只要用了@RequestBody就一定要配合PostMapping使用
@PostMapping("/addUser")
public int addUser(@RequestBody User user){
return service.addUser(user);
}
@ApiOperation(value = "获取用户id",notes = "根据用户id获取信息")
@GetMapping("/getUserById")
public User getUserById(Integer id){
return service.getUserById(id);
}
}
结果
点击页码效果
?
?
模糊查询
?
点击修改键
?
点击新增键
?
?点击删除
?
