Springboot+vue实现增删查改小demo(springboot做增删查)。

摘要:该参数设置为时，查询第一页，总数超过时查询最后一页。

源代码下载地址背景

前端

目录技术栈前后目录部分代码page 1 . vue application . ymlmybatis -config . XML controller跨域配置。

技术堆栈前端

开发工具:WebStorm开发框架:vue+axios包管理工具:npm打包工具:webpack。

后端开发工具:IDEA开发框架:Springboot+mybatis打包工具:maven数据库:MySQL。

前端目录后端目录前端目录

添加了代码页1.vue的一部分。确定消除和确认搜索{ { scope . row . ISBN } } { { scope . row . bookname } } { { scope . row . author } }编辑和删除. el-输入{ width:35%；} .b1{浮动:左；} # page 1 { float:left；margin -top:20px；}导出默认{ created(){ const _ this = this；axios . defaults . with credentials = true；this . get data(1)///请求后端数据//axios . get(" http://localhost:8081/books/1/4 ")。然后(resp = > {/_ this . table data = resp . data . list；//console . log(resp . data . list)/})}，data(){ return {//双向绑定标志:null，dis:null，pageSize:null，total:null，tableData: { isbn:" "，bookName:" "，author:" "，}，formInline: { user:" "，region: "" }，centerDialogVisible: false，ruleForm: { isbn:" "，bookName:" "，author:" "，}，//验证规则规则:{ISBN: [{required: true，message:"请输入数字"，触发器:" blur"}，]，bookName:[]this . flag = 1；this . dis = false this . rule form . ISBN = null；this . rule form . author = null this . rule form . bookname = null }，save(flag，rule form){ if(flag = = 1){//此操作const _ this = this//数据检查这个。$ refs [ruleform]。validate((有效)= > {if(有效){this。centerdialogvisible = false//直接传递对象//this in function (resp) {}指函数// In resp => {}的方法，this指vue的这个axios . post(" http://localhost:8081/book/add ")。this.ruleForm)。然后(function(resp){ if(resp . data = = " success "){ _ this。$message({ message:“图书添加成功！”)，键入:“成功”}) } Else {_this。$message({ message:“图书添加失败！！!"，type: "error" }) } })，_ this . get data(1)；} else { this . center dialog visible = true；返回false} } );} else if(flag = = 0){//此操作const _ this = thisThis.dis = true //修改账簿信息时，禁用编号录入//数据校验This。$ refs [ruleform]。validate((有效)= > {if(有效){this。centerdialogvisible = falseconsole . log(this.ruleForm . author+this . rule form . bookname)//直接传递对象axios . post(" http://localhost:8081/book/update book ")，this . rule form)。然后(function(resp){ if(resp . data = = " success "){ _ this。$message({ message:“图书修改成功！”)，键入:“成功”}) } Else{ _this。$message({ message:“图书修改失败！！!"，键入:" error " })} })} else { this . centerdialogvisible = true；返回false} } );} }，current page(current page){ this . get data(current page)}，get data(current page){ const _ this = this；Console.log(currentPage) //请求后端数据axios . get(" http://localhost:8081/books/"+current page+"/4 ")。。然后(function(resp){ _ this . tabledata = resp . data . list _ this . total = resp . data . total })}，handleEdit(index，row){ this . center dialogvisible = true this . flag = 0；this . rule form . ISBN = row . ISBN；this . rule form . author = row . author this . rule form . bookname = row . bookname this . dis = true }，Handle delete (index，row) {this。$ confirm("您要删除此图书记录还是继续？"，“提示”，{confirmButtonText:“确定”，cancelButtonText:“取消”，type:“警告”})。然后(()= > { axios . post(" http://localhost:8081/book/delete book/"+row . ISBN)。然后(resp = > {if (resp。data = = " success "){这个。$ message ({message:“图书删除成功！”)，类型:" success" })，this . get data(1)；} else {this。$message({ message:"图书删除成功！！!"，键入:" error " })})})。catch(()= > { })；//直接传递object}，on submit(){ const _ this = this const sel = this . formin line . region const user = this . formin line . user if(sel = = " name "){ axios . get(" http://localhost:8081/book/name/"+user)。then(function(resp){ _ this . tabledata = resp . data . list _ this . total = resp . data . total })} else if(sel = = " author "){ axios . get(" http://localhost:8081/book/author/"+user)。然后(function(resp){ _ this . tabledata = resp . data . list _ this . total = resp . data . total })} } } application . yml spring:data source:URL:JDBC:MySQL://localhost:3306/act 5？使用unicode = true & character coding = ut F-8 username:root password:rootpagehelper:help dialect:MySQL #分页合理化参数，默认值为false。#当该参数设置为true时，pageNumpages(超过总数时)将查询最后一页rational: true #分页参数支持-methods -arguments:true mybatis:config -location:class path:mybatis -config . XML server:port:8081 mybatis -conf通过Mapper接口参数支持。ig.xml DOCTYPE配置PUBLIC " -//mybatis . org//DTD Config 3.0//EN " " http://mybatis . org/DTD/mybatis -3-Config . DTD " >控制器包com.controller