前后端-SpringBoot-JPA的简单写法（配合前端vue）

一、JAP的简单使用

1、实体类

//JPA的实体类注解
@Entity
@Data
public class Book {

	//ID设置和保持ID自增
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String name;
    private String author;
    private String publish;
    private long pages;
    private double price;
    
    //设置别名
    @Column(name = "bookcaseid")
    private long bookCaseId;
    
    @Column(name = "abled")
    private String able;
}

2、接口

public interface IBook extends JpaRepository<Book, Integer> {}

3、Mapper

后面再解释吧，这个要配合前端使用

@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private IBook iBook;
	
	//注意这里有分页机制
    @GetMapping("/findAll/{page}/{size}")
    public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
        PageRequest request = PageRequest.of(page, size);
        Page<Book> books = iBook.findAll(request);
        for(Book i: books){
            if (i.getAble() == null){
                i.setAble("状态未知");
            }else{
                if (i.getAble().equals("1")){
                    i.setAble("可以借出");
                }else{
                    i.setAble("不可借出");
                }
            }
        }
        return books;
    }



    @PostMapping("/save")
    public String saveBook(@RequestBody Book book){
        Book returnBook = iBook.save(book);
        if (returnBook != null){
            return "success";
        }else{
            return "error";
        }
    }


    @GetMapping("/findById/{id}")
    public Book findById(@PathVariable("id") Integer id){

        Book book = iBook.findById(id).get();
        return book;
    }

    @GetMapping("/deleteById/{id}")
    public void deleteById(@PathVariable("id") Integer id){
        iBook.deleteById(id);
    }

    @PostMapping("/update")
    public String updateById(@RequestBody Book book){
        Book result = iBook.save(book);
        if (result != null){
            return "success";
        }else{
            return "error";
        }
    }

}

二、配合前端的axios的写法

这里专门记录一下和前端配合的写法

第一种：配合分页机制

//后端-findAll方法
    @GetMapping("/findAll/{page}/{size}")
    public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
        PageRequest request = PageRequest.of(page, size);
        Page<Book> books = iBook.findAll(request);
        for(Book i: books){
            if (i.getAble() == null){
                i.setAble("状态未知");
            }else{
                if (i.getAble().equals("1")){
                    i.setAble("可以借出");
                }else{
                    i.setAble("不可借出");
                }
            }
        }
        return books;
    }

//前端写法：
//这里放在create里面是因为页面加载时就需要这些数据，主要看axios里面的方法怎么和后端配合。
        created() {
            const _this = this;
            axios.get('http://localhost:8181/book/findAll/0/8').then(function (resp) {
                console.log(resp);
                _this.tableData = resp.data.content;
                _this.pageSize = resp.data.size;
                _this.pageTotal = resp.data.totalElements;
            })
        },

//vue 方法区的data()
        data() {
            return {
                pageSize:0,
                pageTotal:0,
                tableData: [],
            }
        },
        
//vue使用element的分页机制
        <el-pagination
                align="center"
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="pageTotal"
                @current-change="page_change">
        </el-pagination>

第二种：一般使用方法

//后端-findById方法
    @GetMapping("/findById/{id}")
    public Book findById(@PathVariable("id") Integer id){

        Book book = iBook.findById(id).get();
        return book;
    }

        created(){
            //这里的ID是从上一个地址在重定向之前当做参数传来的 alert(this.$route.query.id);
            const _this = this;
            axios.get("http://localhost:8181/book/findById/"+this.$route.query.id).then(function (res) {
                _this.ruleForm = res.data;
            })
        },

//上面的ID是通过这个方法传来的，配合使用就行了
        methods: {
            editBook(row) {
                this.$router.push({
                    path:'/BookUpdate',
                    query:{
                        id: row.id
                    }
                });
            },

第三种：使用Book这种对象的传参

//后端
    @PostMapping("/update")
    public String updateById(@RequestBody Book book){
        Book result = iBook.save(book);
        if (result != null){
            return "success";
        }else{
            return "error";
        }
    }

//前端
            submitForm(formName) {
                const _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(_this.ruleForm);
                        axios.post('http://localhost:8181/book/update', this.ruleForm).then(function (resp) {
                            if(resp.data === "success"){
                                console.log("成功！");
                                _this.success();
                                _this.$router.push('/bookManage');
                            }else{
                                console.log("失败！");
                                _this.error();
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },