广告网站建设公司韩国优秀平面设计网站有哪些

当前位置： 首页 > news >正文

广告网站建设公司,韩国优秀平面设计网站有哪些,企业网站 免费 php,htm5网站建设Element UI框架学习篇(七) 1 新增员工 1.1 前台部分 1.1.1 在vue实例的data里面准备好需要的对象以及属性 addStatus:false,//判断是否弹出新增用户弹窗dailog,为true就显示depts:[],//部门信息mgrs:[],//上级领导信息jobs:[],//工作岗位信息//新增用户所需要的对象newEmp:…Element UI框架学习篇(七) 1 新增员工 1.1 前台部分 1.1.1 在vue实例的data里面准备好需要的对象以及属性 addStatus:false,//判断是否弹出新增用户弹窗dailog,为true就显示depts:[],//部门信息mgrs:[],//上级领导信息jobs:[],//工作岗位信息//新增用户所需要的对象newEmp:{ename:null,//员工姓名hiredate:null,//员工入职日期job:null,//员工工作sal:null,//员工薪水comm:null,//员工奖金mgr:null,//上级领导编号deptno:null,//部门编号},1.1.2 在el-table上方写下如下代码 el-button typeprimary新增员工/el-button1.1.3 新增用户的弹窗界面 el-dialog title新增员工信息界面 :visible.syncaddStatus center!– 如果相对对话框中的表单居中,直接套上一个center标签即可 –centerel-form :modelemp inline label-width80pxel-form-item label姓名el-input v-modelnewEmp.ename/el-input /el-form-itemel-form-item label入职日期el-date-picker v-modelnewEmp.hiredate placeholder请选择日期 value-formatyyyy-MM-dd/el-date-picker /el-form-itemel-form-item label职位el-select v-modelnewEmp.jobel-option v-forj in jobs :valuej.job :labelj.job/el-option/el-select /el-form-itemel-form-item label上级领导el-select v-modelnewEmp.mgr placeholderel-option v-for m in mgrs :valuem.empno :labelm.ename/el-option/el-select/el-form-itemel-form-item label工资el-input v-modelnewEmp.sal/el-input /el-form-itemel-form-item label奖金el-input v-modelnewEmp.comm/el-input /el-form-itemel-form-item label部门!– 默认值以v-model为准 –el-select v-modelnewEmp.deptnoel-option v-ford in depts :valued.deptno :labeld.dname/el-option/el-select /el-form-itembrel-form-itemel-button typesuccess clickaddEmp()新增/el-buttonel-button typeinfo native-typereset重置/el-button/el-form-item/el-form/center/el-dialog1.1.4 进入添加界面的方法addView addView(){axios.post(http://127.0.0.1:8080/dept/find).then(jg{this.deptsjg.data;console.log(this.depts);})axios.post(http://127.0.0.1:8080/emp/findAllMgrs).then(jg{console.log(上级领导信息);console.log(jg.data);this.mgrsjg.data;})axios.post(http://localhost:8080/emp/findAllJobs).then(jg{this.jobsjg.data;})this.addStatustrue;},1.1.5 新增方法addEmp addEmp(){axios.post(http://127.0.0.1:8080/emp/add,this.newEmp).then(jg{if(jg.datatrue){this.find();//新增员工后需要重新执行查询方法this.addStatusfalse;//添加成功,就关闭弹窗this.$message({type: success,message: 新增员工成功!});}else{this.\(message({type:info,mesaage:新增员工失败})}})},1.1.4 把新增员工按钮绑定addView方法 el-button typeprimary clickaddView()新增员工/el-button1.1.5 把添加员工弹窗中的新增按钮绑定addEmp方法 el-button typesuccess clickaddEmp()新增/el-button1.1.6 完整的前台代码 a 网页文件addEmp.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-formel-button typeprimary clickaddView()新增员工/el-button!-- ②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!-- 新增员工界面 --el-dialog title新增员工信息界面 :visible.syncaddStatus center!-- 如果相对对话框中的表单居中,直接套上一个center标签即可 --centerel-form :modelemp inline label-width80pxel-form-item label姓名el-input v-modelnewEmp.ename/el-input /el-form-itemel-form-item label入职日期el-date-picker v-modelnewEmp.hiredate placeholder请选择日期 value-formatyyyy-MM-dd/el-date-picker /el-form-itemel-form-item label职位el-select v-modelnewEmp.jobel-option v-forj in jobs :valuej.job :labelj.job/el-option/el-select /el-form-itemel-form-item label上级领导el-select v-modelnewEmp.mgr placeholderel-option v-for m in mgrs :valuem.empno :labelm.ename/el-option/el-select/el-form-itemel-form-item label工资el-input v-modelnewEmp.sal/el-input /el-form-itemel-form-item label奖金el-input v-modelnewEmp.comm/el-input /el-form-itemel-form-item label部门!-- 默认值以v-model为准 --el-select v-modelnewEmp.deptnoel-option v-ford in depts :valued.deptno :labeld.dname/el-option/el-select /el-form-itembrel-form-itemel-button typesuccess clickaddEmp()新增/el-buttonel-button typeinfo native-typereset重置/el-button/el-form-item/el-form/center/el-dialog/divscript src../js/edit01.js/script /body /htmlb js文件 var vnew 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,},addStatus:false,//判断是否弹出新增用户弹窗dailog,为true就显示depts:[],//部门信息mgrs:[],//上级领导信息jobs:[],//工作岗位信息//新增用户所需要的对象newEmp:{ename:null,//员工姓名hiredate:null,//员工入职日期job:null,//员工工作sal:null,//员工薪水comm:null,//员工奖金mgr:null,//上级领导编号deptno: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: 已取消修改}); });},addView(){axios.post(http://127.0.0.1:8080/dept/find).then(jg{this.deptsjg.data;console.log(this.depts);})axios.post(http://127.0.0.1:8080/emp/findAllMgrs).then(jg{console.log(上级领导信息);console.log(jg.data);this.mgrsjg.data;})axios.post(http://localhost:8080/emp/findAllJobs).then(jg{this.jobsjg.data;})this.addStatustrue;},addEmp(){axios.post(http://127.0.0.1:8080/emp/add,this.newEmp).then(jg{if(jg.datatrue){this.find();//新增员工后需要重新执行查询方法this.addStatusfalse;//添加成功,就关闭弹窗this.$message({type: success,message: 新增员工成功!});}else{this.$message({type:info,mesaage:新增员工失败})}})},} })1.2 后台核心代码 1.2.1 配置自定义查询方法findAllMgr a 在EmpMapper.xml文件写入如下代码 select idfindAllMgr resultTypeempSELECT distinct e2.ename,e2.empnoFROM Emp e1INNER JOIN Emp e2ON e1.mgre2.empno /selectb 在EmpMapper接口中写入如下代码 ListEmp findAllMgr();c 在IEmpService接口中写入如下代码 ListEmp findAllMgr();d 在EmpServiceImpl类中写入如下代码 AutowiredEmpMapper empMapper;Overridepublic ListEmp findAllMgr() {return empMapper.findAllMgr();}1.2.2 新增页面中数据的展示的核心代码 a 查询所有工作(职位) //查询所有职位RequestMapping(findAllJobs)public ListEmp findAllJobs(){QueryWrapper qw new QueryWrapper();//查询去重的指定列的信息//ne是不等于的条件qw.select(distinct job).ne(job,president);return empService.list(qw);}b 查询所有领导信息 //查询所有上级领导 RequestMapping(findAllMgrs) public ListEmp findAllMgrs(){return empService.findAllMgr(); }c 查询所有部门 Autowired IDeptService deptService; RequestMapping(find) public ListDept find(){return deptService.list(); }1.2.3 新增方法 //增加界面RequestMapping(add)public boolean add(RequestBody Emp emp){empService.save(emp);return true;}1.2.4 完整的后台代码 a EmpController类 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; 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);}//删除界面,随便取的,是自定义的,但是需要保持一致RequestMapping(delete/{empno}) //json格式的数据接收只能用requestBodypublic boolean delete(PathVariable Integer empno){//try—catch的方式在控制器 // System.out.println(emp); // System.out.println(empno);return empService.removeById(empno); // return true;}//增加界面RequestMapping(add)public boolean add(RequestBody Emp emp){empService.save(emp); // System.out.println(emp);return true;}//查询所有上级领导RequestMapping(findAllMgrs)public ListEmp findAllMgrs(){return empService.findAllMgr();}//查询所有职位RequestMapping(findAllJobs)public ListEmp findAllJobs(){QueryWrapper qw new QueryWrapper();//查询去重的指定列的信息//ne是不等于的条件qw.select(distinct job).ne(job,president);return empService.list(qw);} }b DeptController类 package com.zlz.controller;import com.zlz.entity.Dept; import com.zlz.service.IDeptService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RestController;import java.util.List; RestController RequestMapping(/dept) CrossOrigin public class DeptController {AutowiredIDeptService deptService;RequestMapping(find)public ListDept find(){return deptService.list();} }1.4 测试 1.4.1 进入初始页面,点击新增员工按钮(点击完后有重置和新增两个按钮) 1.4.2 重置按钮测试 a 点击重置按钮前 b 点击重置按钮后 1.4.3 新增按钮测试 a 界面部分 a.1 新增前的界面 a.2 新增后的界面 a.3 点击到最后一页,发现刚刚增加那条数据能被正常显示 b 数据库部分 b.1 新增前 b.2 新增后