="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"> ="https://unpkg.com/element-ui/lib/index.js"> 取 消 确 定 添加数据 删除 编辑 >new Vue(。vue简单前后端交互增删改查。" />

锐客网

  1. 首页 > it技术 > >

vue简单前后端交互增删改查

Title - 锐客网="text/javascript" src="https://www.it610.com/article/static/js/vuejs-2.5.16.js"> ="https://cdn.bootcss.com/axios/0.19.0/axios.min.js">="https://unpkg.com/element-ui/lib/index.js">
取 消 确 定
添加数据
>new Vue({ el:"#app01", data:{ list:[], total:50, pageSize:2, currentPage:1, dialogFormVisible:false, form:{ paymode:"", totalmoney:"", bxremark:"", bxid:"" } },methods:{ clear:function(){ this.dialogFormVisible=true this.form={ paymode:"", totalmoney:"", bxremark:"", bxid:"" } }, editItem:function(info){ this.dialogFormVisible=true this.form.paymode=info.paymode this.form.totalmoney=info.totalmoney this.form.bxremark=info.bxremark this.form.bxid=info.bxid }, deleteItem:function(num){ var is=this; //post请求（路径，is.form） 要传入后台的参数 axios.delete("/pms/baoxiao/del/"+num) .then(function (result) { if (result.data.statusCode==200){ is.$message({ message: '删除成功', type: 'success' }); is.fenye("/pms/baoxiao/page",is); } }).catch(function (error) { }); }, //弹窗的确定操作 comf:function(){ var is=this; if (is.form.bxid!=""){ //修改数据 axios.put("/pms/baoxiao/update",is.form) .then(function (result) { if (result.data.statusCode==200){ is.dialogFormVisible=false is.fenye("/pms/baoxiao/page",is); } }).catch(function (error) { }); }else{ //添加数据 //post请求（路径，is.form） 要传入后台的参数 axios.post("/pms/baoxiao/save",is.form) .then(function (result) { if (result.data.statusCode==200){ is.dialogFormVisible=false is.fenye("/pms/baoxiao/page",is); } }).catch(function (error) { }); }},changeNum:function (msg) { var is=this; is.fenye("/pms/baoxiao/page?pageNum="+msg,is); },fenye:function (url,is) { axios.get(url) .then(function (result) { //list数据库的数据 is.list=result.data.map.pageInfo.list //total数据库的总记录数 is.total=result.data.map.pageInfo.total; //total数据库的当前页 is.currentPage=result.data.map.pageInfo.PageNum; }).catch(function (error) { }); } },mounted:function () { var is=this; is.fenye("/pms/baoxiao/page",is); }, })

    推荐阅读


    上一篇：unixodbc|unixODBC使用经验分享

    下一篇：机器学习|BP神经网络及其Tensorflow实现