专业网站建设公,江苏搜索引擎优化,网站设计与网页制作岗位招聘信息,WordPress如何调用Element UI框架学习篇(六)
1 删除数据
1.1 前台核心函数
1.1.1 elementUI中的消息提示框语法
//①其中type类型和el-button中的type类型是一致的,有info灰色,success绿色,danger红色,warning黄色,primary蓝色
//②message是你所要填写的提示信息
//③建议都用,因为比双引号…Element UI框架学习篇(六)
1 删除数据
1.1 前台核心函数
1.1.1 elementUI中的消息提示框语法
//①其中type类型和el-button中的type类型是一致的,有info灰色,success绿色,danger红色,warning黄色,primary蓝色
//②message是你所要填写的提示信息
//③建议都用,因为比双引号打字更快
this.$message({type: info,message: 文本内容
}); 1.1.2 elementUI中的确认框语法 //confirmButtonText代表确认操作的文本
//cancelButtonText代表取消操作的文本
//type和el-button中的type是一致的,
//个人决定这里用waring或者danger会好些,因为确认框操作都是涉及到数据变更才会触发的,这样会醒目点
this.$confirm(提示信息, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {//异步提交的地址写在这(axios.post方法写的位置)}).catch(() {//取消操作时的逻辑写这里this.$message({type: info,message: 取消某操作的提示}); });1.1.3 del方法 del(t){// t指的是当前行对象(点击删除时)console.log(t);this.$confirm(确定删除员工编号为:t.empno,姓名为t.ename的员工吗?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {//异步提交的地址写在这axios.post(http://127.0.0.1:8080/emp/delete/t.empno).then(jg{if(jg.datatrue){//需要再次去查询一次this.find();this.$message({type: success,message: 删除成功}); }else{this.$message({type: danger,message: 删除失败}); }})}).catch(() {//取消修改时候的处理逻辑写这里this.$message({type: info,message: 已取消修改}); });}1.1.4 把删除按钮绑定点击事件,并把当前行对象传递过去(因为要告知用户删除的是哪个对象) !-- 需要得到特定行的数据需要把按钮放在template标签里面
具体是通过该标签的slot-scope属性来得到当前行的数据
--
el-button typedanger clickdel(s.row)删除/el-button1.2 后台核心代码
//删除操作,empno随便取的,是自定义的,但是requestMapping和delete方法中的需要保持一致
RequestMapping(delete/{empno})public boolean delete(PathVariable Integer empno){return empService.removeById(empno);}1.3 完整代码
1.3.1 前台部分
a html文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0!-- ①导入文件: 1.1需要导入el相关样式和vue.js文件 ②需要导入element的js文件③导入异步提交的css文件 --link relstylesheet href../elementUI/elementUI.min.cssscript src../js/vue.js/scriptscript src../js/axios.min.js/scriptscript src../elementUI/elementUI.min.js/scripttitle/title
/head
bodydiv idappel-form inline :modelempDTOel-form-item label按照姓名搜索!-- 这里一定要写v-model 不然就不能在里面输入值 这个里面的值需要和对象实例中的值保持一致--el-input v-modelempDTO.name placeholder请输入姓名 /el-input/el-form-itemel-form-item label按照职位搜索el-input v-modelempDTO.zhiwei placeholder请输入职位/el-input/el-form-itemel-form-itemel-button typeprimary clickfind()搜索/el-button/el-form-itemel-form-item el-button typeprimary clickfindAll()全部搜索/el-button/el-form-item/el-form!-- ②el-table代表表格 el-table-column代表表格中的每一列:data需要对应vue实例中的对象数组,lable表示每一列列名,prop是保证能填入每一条数据中对象的字段值 --el-table :dataemps :cell-style{text-align:center}:header-cell-style{text-align:center} border el-table-column label编号 propempno/el-table-columnel-table-column label姓名 propename/el-table-columnel-table-column label工作 propjob/el-table-columnel-table-column label工资 propsal/el-table-columnel-table-column label奖金 propcomm/el-table-columnel-table-column label入职日期 prophiredate/el-table-columnel-table-column label操作!-- slot-scope可以用来得到当前行的数据 里面的值自定义需要得到特定行需要使用template标签--template slot-scopesel-button typesuccess clickshowEmp(s.row.empno)编辑/el-buttonel-button typedanger clickdel(s.row)删除/el-button/template/el-table-column /el-table!--layout是用于显示分页插件所要展示的部分 total总页码数 sizes每页条数 prev前箭头pager点点点 next后箭头 jumper跳页 --el-pagination background :totaltotal :current-page.synccurrent :page-size.syncsize current-changefind() layouttotal,prev, pager, next, jumper /el-pagination!-- visible的条件为true就显示,为false就不显示 --el-dialog title编辑员工信息界面 :visible.synceditStatus center!-- 如果相对对话框中的表单居中,直接套上一个center标签即可 --centerel-form :modelemp inline label-width80pxel-form-item label编号el-input readonly v-modelemp.empno/el-input /el-form-itemel-form-item label姓名el-input v-modelemp.ename/el-input /el-form-itemel-form-item label入职日期el-input v-modelemp.hiredate/el-input /el-form-itemel-form-item label职位el-input v-modelemp.job/el-input /el-form-itemel-form-item label工资el-input v-modelemp.sal/el-input /el-form-itemel-form-item label奖金el-input v-modelemp.comm/el-input /el-form-itemel-form-itemel-button typesuccess clickeditEmp()修改/el-buttonel-button typeinfo clickshowEmp(emp.empno)重置/el-button/el-form-item/el-form/center/el-dialog/divscript src../js/edit.js/script
/body
/htmlb js文件
new Vue({el:#app,data:{emps:[],current:0,//当前页码数size:0,//每页显示条数total:0,//总条数editStatus:false,//editStatus为false时,只是隐藏该标签,实例并没有取消emp:{empno:null,//员工编号,需要与数据库字段对应ename:null,//员工姓名hiredate:null,//员工入职日期job:null,//员工工作sal:null,//员工薪水comm:null,//员工奖金},//empDTO对象,用于传输数据到后台empDTO:{name:null,zhiwei:null,}},mounted(){//④钩子函数里面调用自定义查询方法 如果要调用本实例的自定义方法,需要使用this.this.find();},methods:{//③创建自定义查询方法,减少冗余,注意:地址里面的find需要加上斜杠//因为加上了自定义条件,所以这里需要传入查询对象过去find(){axios.post(http://127.0.0.1:8080/emp/find/this.current,this.empDTO).then(jg{//jg.data是后台返回的Ipage对象,其中.records才是对应的数据console.log(jg.data);this.currentjg.data.current;this.sizejg.data.size;this.totaljg.data.total;this.empsjg.data.records;})},//查询所有方法findAll(){this.empDTO.namenull,this.empDTO.zhiweinull,//设置全部搜素后回到首页this.current1;this.find();},showEmp(empid){//带上map集合过去,需要使用{key:value}的形式axios.post(http://localhost:8080/emp/findid,{id:empid}).then(jg{this.empjg.data;this.editStatustrue;})},editEmp(){this.$confirm(此操作将修改员工信息, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {//第二个参数带{}的是map集合,直接逗号的是后台可以直接接收的 axios.post(http://127.0.0.1:8080/emp/update,this.emp).then(jg{if(jg.datatrue){this.editStatusfalse; this.$message({type: success,message: 修改成功!});// 方法与方法之间使用this.调用this.find();}else{this.$message({type: info,message: 修改失败!}); }}) }).catch(() {this.showEmp(this.emp.empno);this.$message({type: info,message: 已取消修改}); });},del(t){// t指的是当前行对象(点击删除时)// alert(进入了方法没有);console.log(t);this.$confirm(确定删除员工编号为:t.empno,姓名为t.ename的员工吗?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {//异步提交的地址写在这axios.post(http://127.0.0.1:8080/emp/delete/t.empno).then(jg{if(jg.datatrue){//需要再次去查询一次this.find();this.$message({type: success,message: 删除成功}); }else{this.$message({type: danger,message: 删除失败}); }})}).catch(() {//取消修改时候的处理逻辑写这里this.showEmp(this.emp.empno);this.$message({type: info,message: 已取消修改}); });}}
})1.3.2 后台部分
package com.zlz.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.zlz.dto.EmpDTO;
import com.zlz.entity.Emp;
import com.zlz.service.IEmpService;
import org.springframework.web.bind.annotation.*;
import org.springframework.stereotype.Controller;import javax.annotation.Resource;
import java.util.List;
import java.util.Map;/*** p* 前端控制器* /p** author zlz* since 2023-02-10*/
RestController
RequestMapping(/emp)
//解决跨域
CrossOrigin
public class EmpController {//先按照名字,再按照类型ResourceIEmpService empService;
// RequestMapping(find)
// public ListEmp find(){
// return empService.list();
// }RequestMapping({find,find/{page}})//引用数据类型为空public IPageEmp find(PathVariable(required false) Integer page, RequestBody EmpDTO empDTO){//使用mybatis-plus的后端插件System.out.println(page当前页码);System.out.println(empDTO);if(pagenull) {page 1;}IPageEmp iPagenew Page(page,3);//带上条件构造器QueryWrapperEmp qw new QueryWrapper();//写的是列名,满足条件就查询,qw默认是andqw.like(empDTO.getName()!null,ename,empDTO.getName());//qw.or().like是或者 单元测试里面测试sql语句qw.like(empDTO.getZhiwei()!null,job,empDTO.getZhiwei());return empService.page(iPage,qw);}//增删改查用vue的方式也可以,用之前的方式也行RequestMapping(findid)//json格式的数据public Emp findid(RequestBody MapString,Object map){return empService.getById(map.get(id).toString());}//修改界面RequestMapping(update)//json格式的数据接收只能用requestBodypublic boolean update(RequestBody Emp emp){//try---catch的方式在控制器
// System.out.println(emp);return empService.updateById(emp);}//删除操作,empno随便取的,是自定义的,但是requestMapping和delete方法中的需要保持一致RequestMapping(delete/{empno})public boolean delete(PathVariable Integer empno){return empService.removeById(empno);}
}1.4 测试
1.4.1 点击修改按钮前 1.4.2 点击修改按钮后 1.4.3 点击确定按钮后的界面 1.4.4 执行删除操作前数据库的数据 1.4.5 执行删除操作后数据库的数据
