该项目基于SpringBoot+vue+elementUi+Mysql
创建SpringBoot项目:创建时勾选SpringMVC和MySQL坐标
spring: #Druid数据源
datasource:
druid:
username: root
password: 123456
url:jdbc:mysql://localhost:3306/mybatisplus?userSSL=false&useUnicode=true&characterEncoding=utf-8
driver-class-name:com.mysql.cj.jdbc.Driver
涉及到mybatisplus看这篇博客
涉及到Lombok看这篇博客
package com.ssmtest.test.Pojo;
import com.baomidou.mybatisplus.annotation.*;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.Date;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User{
@TableId(type= IdType.AUTO) //设置主键ID自增
private long id;
private String name;
private long age;
private String email;
@TableField(fill = FieldFill.INSERT_UPDATE) //插入和更新时自动填充
private Date createTime;
@TableField(fill = FieldFill.INSERT_UPDATE) //插入和更新时自动填充
private Date updateTime;
@Version //加入乐观锁
private long version;
@TableLogic //逻辑删除
private long flage;
}
<dependency>
<groupId>com.baomidougroupId>
<artifactId>mybatis-plus-boot-starterartifactId>
<version>3.0.5version>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>druid-spring-boot-starterartifactId>
<version>1.2.9version>
dependency>
spring: #Druid数据源
datasource:
druid:
username: root
password: 123456
url:jdbc:mysql://localhost:3306/mybatisplus?userSSL=false&useUnicode=true&characterEncoding=utf-8
driver-class-name:com.mysql.cj.jdbc.Driver
@Repository
public interface UserDao extends BaseMapper<User> {
}
在配置文件中配置即可
mybatis-plus:
global-config:
db-config:
logic-delete-value: 1
logic-not-delete-value: 0
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
定义一个配置类,将分页拦截器加入即可
@Bean //分页插件
public PaginationInterceptor pageInationInterceptor(){
return new PaginationInterceptor();
}
public interface UserService {
Boolean save(User user);
Boolean update(User user);
Boolean delete(long id);
User getByid(long id);
List<User> getAll();
}
@Service
public class UserServiceImpl implements UserService {
@Autowired
UserDao userDao;
@Override
public Boolean save(User user) {
return userDao.insert(user)>0;
}
@Override
public Boolean update(User user) {
return userDao.updateById(user)>0;
}
@Override
public Boolean delete(long id) {
return userDao.deleteById(id)>0;
}
@Override
public User getByid(long id) {
return userDao.selectById(id);
}
@Override
public List<User> getAll() {
return null;
}
}
继承Iservice类,它会自动帮我们提供一些常用的service方法
public interface UserService extends IService<User> {
IPage<User> getPage(int currentpage,int pageSize); //分页
}
继承ServiceImpl,两个泛型分别是基于的Dao和基于的Pojo类,然后实现一下前面的Service接口即可
@Service
public class UserServiceImpl extends ServiceImpl<UserDao,User>implements UserService {
@Autowired
private UserDao userDao;
@Override
public IPage<User> getPage(int currentpage, int pageSize) {
IPage page=new Page(currentpage,pageSize);
userDao.selectPage(page,null);
return page;
}
}
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public List<User> getAllUser()
{
return userService.list(null);
}
@PostMapping
public boolean save(@RequestBody User user)
{
return userService.save(user);
}
@PutMapping
public boolean updateUser(@RequestBody User user)
{
return userService.update(user,null);
}
@DeleteMapping("{id}")
public boolean updateUser(@PathVariable Long id)
{
return userService.removeById(id);
}
@GetMapping("{id}")
public User getByid(@PathVariable Long id)
{
return userService.getById(id);
}
}
编写完控制器后就可以开始运行springboot程序了,然后在postman软件中输入地址就可以看到结果了,查询结果如下:
在刚刚测试时我们发现前端收到后端的消息的格式是各不相同的,例如增删改收到的消息格式如下:
查询单个收到的数据格式如下:
各种不同的数据格式会对前端工程师的数据处理造成困扰,所以要对表现层数据进行一致性处理,思想是将所有类型的数据放在一个data对象里面,以后前端取数据data对象里面取即可,同时加入一个flag标志此次操作的结果(是成功还是失败),具体操作方法如下:
@Data
public class R {
private Boolean flag;
private Object data;
}
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public R getAllUser()
{
R r=new R();
r.setFlag(true);
r.setData(userService.list(null));
return r ;
}
@PostMapping
public R save(@RequestBody User user)
{
R r=new R();
r.setFlag(userService.save(user));
r.setData(null);
return r ;
}
@PutMapping
public R updateUser(@RequestBody User user)
{
R r=new R();
r.setFlag( userService.update(user,null));
r.setData(null);
return r;
}
@DeleteMapping("{id}")
public R deleteUser(@PathVariable Long id)
{
R r=new R();
r.setFlag(userService.removeById(id) );
r.setData(null);
return r;
}
@GetMapping("{id}")
public R getByid(@PathVariable Long id)
{
R r=new R();
r.setFlag(true);
r.setData( userService.getById(id));
return r;
}
@GetMapping("{currentPage}/{pageSize}")
public R getPage(@PathVariable int currentPage,@PathVariable int pageSize){
IPage<User> page=userService.getPage(currentPage,pageSize);
//如果当前页面值大于总页面值,重新执行查询操作,使用最大页面值
R r=new R();
r.setData(page);
r.setFlag(true);
return r;
}
}
可以发现我们数据的格式都已经统一了
前后端分离结构中页面归属前端服务器
单体工程中页面放置在resources目录下的static目录中
2. books.html页面效果
3. axios发送异步请求访问controller
运行结果
- 请求方式使用Post调用后台对应操作
- 添加操作结束后动态刷新页面加载数据
- 根据操作结果的不同,显示对应的提示信息
- 弹出div时清除表单数据
点击新建出现弹窗
查看数据库数据是否添加成功
- 请求方式用Delete来调用后台对应的操作
- 删除操作需要传递当前行数据对应的id值到后台
- 删除操作结束后动态刷新页面加载数据
- 根据操作结果的不同,显示对应的提示信息
- 删除操作前弹出提示框避免误操作
删除结果展示
- 加载要修改数据通过传递当前行数据对应的id值到后台查询数据
- 利用前端数据双向绑定将查询到的数据进行回显
弹出窗口效果
2. 实现修改操作
- 请求方式使用Put调用后台对应的操作
- 修改操作结束后动态刷新页面加载数据
- 根据操作结果的不同,显示对应的提示信息
修改结果
所以业务在处理时可能因为后台代码的BUG导致数据的格式不统一,所以重点是前端如何处理这些后台抛出的异常进行处理
前端展示错误信息结果
- 使用el分页
- 定义分页组件绑定的数据模型
- 异步调用获取分页数据
- 分页数据页面回显
换页效果
3. 分页bug解决(当某一页只有一条数据,删除这条数据后,页面数量不减少)
修改控制器代码即可
4. 修改controller代码
5. 修改Service代码
项目地址