九前后端分离项目:实现"添加"功能(后端接口) _生活百科

好家伙,来了来了，”查“已经完成了，现在是“增”
前端的视图已经做好了，现在我们来完善后端
后端目录结构

文章插图

【九前后端分离项目:实现"添加"功能(后端接口)】完整代码在前后端分离项目(五):数据分页查询（后端接口） - 养肥胖虎 - 博客园 (cnblogs.com)中
我们来看我们的接口代码:
package com.example.demo2.controller;import com.example.demo2.entity.Book;import com.example.demo2.repository.BookRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.PageRequest;import org.springframework.web.bind.annotation.*;@RestController@RequestMapping("/book")public class BookHandler {@Autowiredprivate BookRepository bookRepository;@GetMapping("/findAll/{page}/{size}")public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){PageRequest request = PageRequest.of(page-1,size);return bookRepository.findAll(request);}@PostMapping("/save")public String save(@RequestBody Book book){Book result = bookRepository.save(book);if(result != null){return "success";}else{return "error";}}@GetMapping("/findById/{id}")public Book findById(@PathVariable("id") Integer id){return bookRepository.findById(id).get();}@PutMapping("/update")public String update(@RequestBody Book book){Book result = bookRepository.save(book);if(result != null){return "success";}else{return "error";}}@DeleteMapping("/deleteById/{id}")public void deleteById(@PathVariable("id") Integer id){bookRepository.deleteById(id);}}@PostMapping("/save")public String save(@RequestBody Book book){Book result = bookRepository.save(book);if(result != null){return "success";}else{return "error";}}前端的接口调用记得改
<template><el-form style="width: 60%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="图书编号" prop="id"><el-input v-model="ruleForm.id"></el-input></el-form-item><el-form-item label="图书名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="作者" prop="author"><el-input v-model="ruleForm.author"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">修改</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></template><script>import axios from 'axios'export default {data() {return {ruleForm: {id: '',name: '',author: ''},rules: {name: [{ required: true, message: '图书名称不能为空', trigger: 'blur' }],author:[{ required: true, message: '作者不能为空', trigger: 'blur' }]}};},methods: {submitForm(formName) {const _this = thisthis.$refs[formName].validate((valid) => {if (valid) {axios.put('http://localhost:8011/book/update',this.ruleForm).then(function(resp){if(resp.data =https://www.huyubaike.com/biancheng/='success'){_this.$alert('《'+_this.ruleForm.name+'》修改成功！', '消息', {confirmButtonText: '确定',callback: action => {_this.$router.push('/home/users')}})}})} else {return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}},}</script>我们的数据库表: