标签：vue springboot 代码 CRUD value public book element id
基于springboot、vue、mybatis-plus、mysql、element实现的前后端分离的CRUD功能
文章目录
前期准备
后端
导入要使用的jar包
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.16</version>
<scope>provided</scope>
</dependency>
<!--mybatis-plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.22</version>
</dependency>
在applycation.yaml文件中配置相关文件
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/XXXXX?serverTimezone=GMT
type: com.alibaba.druid.pool.DruidDataSource
driverClassName: com.mysql.cj.jdbc.Driver
username: root
password: XXXXX
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
server:
port: 端口号
前端
可以配置一个vue文件，我就是vue文件，或者有html也行
导入element-ui和axios
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
**这里是完整引入，可以按需引入，官网有写**
导入axios
npm install axios
到这里所有的准备工作就已经弄完了
后端代码
controller层，mapper层，servie层，pojo
pojo
@Data
@TableName(value = "books")
@JsonInclude(JsonInclude.Include.NON_NULL) //jackson 实体转json 为NULL的字段不参加序列化（即不显示）
public class Book {
@TableId(value = "bookID",type = IdType.AUTO)
private Integer bookID;
@TableField(value = "bookName")
private String bookName;
@TableField(value = "bookCounts")
private int bookCounts;
@TableField(value = "detail")
private String detail;
}
mapper和service
@Mapper
@Repository
public interface BookMapper extends BaseMapper<Book> {
}
serviece
public interface BookService extends IService<Book> {
}
//serviceimpl
@Service
public class BookServiceImpl extends ServiceImpl<BookMapper, Book> implements BookService {
}
功能实现
基本布局（用element-ui，不能在app.vue里面写，钩子不会被触发，我是在home文件写的）
搜索栏
<el-input
placeholder="请输入id"
v-model="input"
clearable
style="width: 200px;float: left">
</el-input>
<el-button type="primary" class="btn" @click="getClick(input)">查询</el-button>
<el-button type="primary" class="btn" @click="resetClick">重置</el-button>
<el-button type="primary" class="btn" @click="dialogAddBookVisible = true">添加</el-button>
页面
在这里插入图片描述
<el-table
:data="book"
border
style="width: 100%">
<el-table-column
fixed
prop="bookID"
label="id"
width="300">
</el-table-column>
<el-table-column
prop="bookName"
label="书籍名称"
width="120">
</el-table-column>
<el-table-column
prop="bookCounts"
label="数据数量"
width="120">
</el-table-column>
<el-table-column
prop="detail"
label="书籍评价"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="300">
<template slot-scope="scope">
<el-button type="text" @click="updateClick(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="removeClick(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
添加和编辑弹窗（这里我让id自增了，所以不输入id）
<el-dialog title="添加书籍信息" :visible.sync="dialogAddBookVisible" :append-to-body="true">
<el-form :model="addBook">
<el-form-item label="id" prop="bookID" :label-width="formLabelWidth" >
<el-input v-model="addBook.bookID" placeholder="请输入书籍编号" disabled></el-input>
</el-form-item>
<el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookName">
<el-input v-model="addBook.bookName" autocomplete="off" placeholder="请输入书籍名称"></el-input>
</el-form-item>
<el-form-item label="书籍数量" :label-width="formLabelWidth">
<el-input v-model="addBook.bookCounts" autocomplete="off" placeholder="请输入书籍数量"></el-input>
</el-form-item>
<el-form-item label="书籍评价" :label-width="formLabelWidth">
<el-input v-model="addBook.detail" autocomplete="off" placeholder="请输入书籍评价"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click=" dialogAddBookVisible= false">取 消</el-button>
<el-button type="primary" @click="addClick">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="修改信息" :visible.sync="dialogFormVisible" :append-to-body="true">
<el-form :model="books">
<el-form-item label="id" prop="bookID" :label-width="formLabelWidth">
<el-input v-model="books.bookID" disabled></el-input>
</el-form-item>
<el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookName">
<el-input v-model="books.bookName" autocomplete="off" placeholder="请输入书籍名称"></el-input>
</el-form-item>
<el-form-item label="书籍数量" :label-width="formLabelWidth">
<el-input v-model="books.bookCounts" autocomplete="off" placeholder="请输入书籍数量"></el-input>
</el-form-item>
<el-form-item label="书籍评价" :label-width="formLabelWidth">
<el-input v-model="books.detail" autocomplete="off" placeholder="请输入书籍评价"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelClick">取 消</el-button>
<el-button type="primary" @click="updateEnsure">确 定</el-button>
</div>
</el-dialog>
接下来就是功能的实现，CRUD工程师开始
添加 功能
在这里插入图片描述
后端代码
@PostMapping
public void addBook(@RequestBody Book book){
bookService.save(book);
}
前端代码
addApi(data){
axios({
url:'http://localhost:8089/book',
method:'post',
data:data
})
}
addClick(){
console.log(this.addBook)
this.addApi(this.addBook) //在输入框的时候已经把数据存到了addbook了，直接传就行了
alert("添加成功")
this.dialogAddBookVisible= false //让弹窗关闭
this.addBook={} //清零，不然会保存数据
},
删除功能
后端代码
@DeleteMapping(value = "/{id}")
public void deleteBook(@PathVariable(value = "id") int id){
bookService.removeById(id);
}
前端代码
deleteApi(id){
return axios.request({
url:'http://localhost:8089/book/'+id,
method: 'delete',
})
},
removeClick(row){
console.log(row)
const id=row.bookID;
this.deleteApi(id)
this.resetClick()
},
修改功能
后端代码
@PutMapping
public void updeteBook(@RequestBody Book book){
bookService.updateById(book);
}
前端代码
updateApi(data){
axios({
url:'http://localhost:8089/book',
method:"put",
data: data
})
},
updateEnsure(){
this.updateApi(this.books)
this.books={}
this.dialogFormVisible=false;
this.resetClick()
},
查找功能
后端代码
@GetMapping(value = "/{id}")
public Book getBook(@PathVariable int id){
return bookService.getById(id);
}
前端代码
geiApi(id){
axios({
url:'http://localhost:8089/book/'+id,
method:"get",
}).then(res=>{
const arr = [];
arr.push(res.data) //这里要转换一下，不然会类型错误
this.book=arr
})
},
getClick(id){
this.geiApi(id);
},
crud功能已经实现了，还有很多逻辑上的问题需要去修改，下次再改
标签：vue,springboot,代码,CRUD,value,public,book,element,id 来源： https://blog.csdn.net/m0_58438555/article/details/119085360
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。