一、表现层开发
1. 创建表现层的包和类
表现层基于restful制作接口开发:
package com.jf.controller;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.jf.domain.Book;
import com.jf.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/books")
public class BookController {
@Autowired
private IBookService bookService;
@GetMapping
public List<Book> getAll(){
return bookService.list();
}
@PostMapping
public Boolean save(@RequestBody Book book){
return bookService.save(book);
}
@PutMapping
public Boolean update(@RequestBody Book book){
return bookService.updateById(book);
}
@DeleteMapping("{id}")
public Boolean delete(@PathVariable Integer id){
return bookService.removeById(id);
}
@GetMapping("{id}")
public Book getById(@PathVariable Integer id){
return bookService.getById(id);
}
@GetMapping("{currentPage}/{pageSize}")
public IPage<Book> getPage(@PathVariable int currentPage,int pageSize){
return bookService.getPage(currentPage,pageSize);
}
}
接收参数:
- 实体数据:@RequestBody
- 路径变量:@PathVariable
postman测试
二、表现层消息一致性处理(R对象)
目前代码出来的数据有的是json数组,有的是单条json,前端处理起来很麻烦,此时我们可以处理一下表现层消息
设计表现层返回结果的模型类,用于后端与前端进行数据格式统一,也称为前后端数据协议。
package com.jf.controller.utils;
import lombok.Data;
@Data
public class R {
private Boolean flag;
private Object data;
public R(Boolean flag){
this.flag = flag;
}
public R(){
}
public R(Boolean flag,Object data){
this.flag = flag;
this.data = data;
}
}
表现层接口统一返回值类型结果
package com.jf.controller;
import com.jf.controller.utils.R;
import com.jf.domain.Book;
import com.jf.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/books")
public class BookController {
@Autowired
private IBookService bookService;
@GetMapping
public R getAll(){
return new R(true,bookService.list());
}
@PostMapping
public R save(@RequestBody Book book){
// R r = new R();
// boolean flag = bookService.save(book);
// r.setFlag(flag);
return new R(bookService.save(book));
}
@PutMapping
public R update(@RequestBody Book book){
return new R(bookService.updateById(book));
}
@DeleteMapping("{id}")
public R delete(@PathVariable Integer id){
return new R(bookService.removeById(id));
}
@GetMapping("{id}")
public R getById(@PathVariable Integer id){
return new R(true,bookService.getById(id));
}
@GetMapping("{currentPage}/{pageSize}")
public R getPage(@PathVariable int currentPage,int pageSize){
return new R(true,bookService.getPage(currentPage,pageSize));
}
}
三、前后端协议联调
前后端分离结构设计中页面归属前端服务器
单体工程中页面放置在resources目录下的static目录中(建议执行clean)
1. 前端发送异步请求,调用后端接口
//列表
getAll() {
// 发送异步请求
axios.get("/books").then(res => {
console.log(res.data);
this.dataList = res.data.data;
});
},
将查询的数据返回到页面,利用前端数据双向绑定进行数据展示。
2. 新增功能
2.1 弹出添加窗口
//弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
},
2.2 添加
添加操作结束后动态刷新页面加载数据,根据操作结果不同,显示对应的提示信息
//添加
handleAdd () {
axios.post("/books", this.formData).then(res => {
// 判断当前操作是否成功
if(res.data.flag) {
// 1.关闭弹层
this.dialogFormVisible = false;
this.$message.success(res.data.msg);
//this.$message({message: '恭喜你,添加成功',type: 'success' });
} else {
this.$message.error(res.data.msg);
}
}).finally(() => {
// 2.重新加载数据
this.getAll();
});
},
2.3 清除数据
弹出添加div时清除表单数据
//重置表单
resetForm() {
this.formData = {};
},
//弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
this.resetForm();
},
2.4 取消添加
//取消
cancel(){
this.dialogFormVisible = false;
this.$message.info("当前操作取消!");
},
3. 删除功能
删除操作需要传递当前行数据对应的id值到后台;删除操作结束后动态刷新页面加载数据;根据操作结果不同,显示对应的提示信息;删除操作前弹出提示框避免误操作
// 删除
handleDelete(row) {
// console.log(row);
//1.弹出提示框,防止看错删除别的数据
this.$confirm("删除的数据将不可恢复,是否继续?", "提示", {type: "info"}).then(() => {
//2.删除业务
axios.delete("/books/" + row.id).then(res => {
if (res.data.flag) {
this.$message.success(res.data.msg);
} else {
this.$message.error(res.data.msg);
}
}).finally(() => {
this.getAll();
});
}).catch(() => {
//3.取消删除
this.$message.info("取消操作");
});
},
4. 修改功能
弹出修改窗口,加载要修改数据通过传递当前行数据对应的id值到后台查询数据;利用前端数据双向绑定将查询到的数据进行回显。
//弹出编辑窗口
handleUpdate(row) {
// 发送异步请求
axios.get("/books/" + row.id).then(res => {
// console.log(res.data);
if (res.data.flag && res.data.data != null) {
this.dialogFormVisible4Edit = true;
this.formData = res.data.data;
} else {
this.$message.error(res.data.msg);
}
}).finally(() => {
this.getAll();
});
},
修改,请求方式使用PUT调用后台对应操作;修改操作结束后动态刷新页面加载数据(同新增);根据操作结果不同,显示对应的提示信息(同新增);修改取消功能在取消功能添一行代码即可。
//修改
handleEdit() {
axios.put("/books", this.formData).then(res => {
// 判断当前操作是否成功
if(res.data.flag) {
// 1.关闭弹层
this.dialogFormVisible4Edit = false;
this.$message.success(res.data.msg);
} else {
this.$message.error(res.data.msg);
}
}).finally(() => {
// 2.重新加载数据
this.getAll();
});
},
//取消
cancel(){
this.dialogFormVisible = false;
this.dialogFormVisible4Edit = false;
this.$message.info("当前操作取消!");
},
5. 异常消息处理
对异常进行统一处理,出现异常后,返回指定信息,使用注解@RestControllerAdvice定义SpringMVC异常处理器用来处理异常的,异常处理器必须被扫描加载,否则无法生效。
package com.jf.controller.utils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RestControllerAdvice;
/**
* springmvc的异常处理器
*/
//@ControllerAdvice
@RestControllerAdvice
public class ProjectExceptionAdvice {
// 拦截所有的异常信息
@ExceptionHandler(Exception.class)
public R doException(Exception ex) {
// 记录日志
// 通知运维
// 通知开发
ex.printStackTrace();
return new R(false,null,"服务器故障,请稍后再试");
}
}
修改表现层返回结果的模型类,封装出现异常后对应的信息。表现层返回结果的模型类中添加消息属性用来传递消息到页面。
package com.jf.controller.utils;
import lombok.Data;
/**
* @Description 发给前端的统一数据格式
*/
@Data
public class R {
private Boolean flag;
private Object data;
private String msg;
public R(Boolean flag){
this.flag = flag;
}
public R(){
}
public R(Boolean flag, String msg) {
this.flag = flag;
this.msg = msg;
}
public R(String msg) {
this(false, msg);
}
public R(Boolean flag, Object data) {
this.flag = flag;
this.data = data;
}
public R(Boolean flag, Object data,String msg) {
this.flag = flag;
this.data = data;
this.msg = msg;
}
}
页面消息处理,没有传递消息加载默认消息,传递消息后加载指定消息
可以在表现层中进行消息统一处理
@PostMapping
public R save(@RequestBody Book book) throws IOException {
Boolean flag = bookService.save(book);
return new R(flag,flag ? "添加成功":"添加失败");
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/111721.html