基于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功能已经实现了，还有很多逻辑上的问题需要去修改，下次再改