一、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 {@Autowiredprivate 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-paginationalign="center"backgroundlayout="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;}});},

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

基于flask+vue前后端分离一款简单的旅游网站源码，带admin管理系统
介绍毕业设计-flask-vue前后端分离一款简单的旅游网站,带admin管理系统软件架构软件架构说明使用Python-flask 轻量级框架编写后端程序,前端采用Vue编写,后端接口都在蓝 ...
实战react技术栈+express前后端博客项目（8）-- 前端管理界面标签管理+后端对应接口开发...
项目地址:https://github.com/Nealyang/R... 本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人.遂想,何不一边记录踩坑,一边分享收获呢 ...
[软技能] 在前后端分离项目里，请说说前端传递的token的流程？
[软技能] 在前后端分离项目里,请说说前端传递的token的流程? (一):cookie前端 post 账号密码,后端 response header: set-cookie, 将 token 插入 ...
springboot前后端ajax传值，简单，实测
这两天一直在前后端搞来搞去. 试了三种,map获得表单提交值:model向前端传值,ajax向前端传值. 这里把controller代码和前端代码贴出来,详细记录一下ajax的. data_contr ...
【富文本编辑器功能】vue实现富文本编辑器Tinymce功能，保留编辑器格式文章展示在页面上【前后端代码展示，简单好用】
前言: 这个Tinymce富文本编辑器是vue-element-admin内集成好的,使用过后体验非常不错,很简单易用.这里分享一下,同时又看到了网上帖子都没什么人写前后端同时展示的,很多人想知道编辑 ...
前后端分离搭建的简单实现
前言本片博客描述欠缺,如果有细心的小伙伴有什么地方看不懂或者感觉写的有问题之处,请留言我,我会根据留言内容更改搭建前后端分离为什么要前后端分离前后端分离是目前非常流行的一种开发模式,他的项目分 ...
flask manage port_后端Python3+Flask结合Socket.io配合前端Vue2.0实现简单全双工在线客服系统...
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_158 在之前的一篇文章中:为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统,详 ...
python 在线客服_后端Python3+Flask结合Socket.io配合前端Vue2.0实现简单全双工在线客服系统...
在之前的一篇文章中:为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统,详细介绍了websocket协议以及结合Django如何实现各种功能,本次我们 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）...
缘起书说前两篇文章< 十五 ║ Vue前篇:JS对象&字面量&this>和 < 十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面 ...
5 分钟解决前后端联调问题，说一说前端代理这件事
简介: 简洁,又能触达痛点的一站式前端代理解决方案,你值得拥有. 作者:寒斜说到前端代理,相信每一个做过前后端联调的同学都有遇到过.当下涉及前后端工程项目的研发,主流模式一定是前后端的分离.它让前后 ...

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

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

一、JAP的简单使用

1、实体类

2、接口

3、Mapper

二、配合前端的axios的写法

第一种：配合分页机制

第二种：一般使用方法

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

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

最新文章

热门文章