//在script中先引用
import api from './../../api/index'
//vue文件方法中 写
del(index, row) {
let self=this;
// 传的值放para中。
let para = {
Rulesid: row.id
}
//单击后弹出框,单击确定执行.then,单击取消执行.catch
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 确定后调用接口位置。
//api是引用的index.js页面,找到index.js页面的delrules接口
//触发后传para中的值,成功之后返回的信息放在res中
api.delrules(para).then((res) => {
this.$message({
message: res.msg,
type: 'success'
});
//成功之后重新调用显示表格接口,相当于刷新页面
this.getSystemList();
//接口调用失败时,触发.catch
}).catch(function () {
self.$message.error('网络异常,请重试');
})
//单击取消按钮执行此步
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
})
},

Vue文件

//index.js文件
// 删除制度
delrules(information){
//所传的值都放在information中
var params = new URLSearchParams();
params.append('Rulesid', information.Rulesid);
return axios.post('/api/CanteenAdmin/CanteenManagement/DeleteRules',params)
.then(function (response) {
//成功之后返回信息都在response中
return response;
})
//失败之后
.catch(function (){
alert("请求接口失败,请重试!");
})
},

index.js文件

vue问题一:触发接口的更多相关文章

  1. vue之回车触发表单提交

    vue之回车触发表单提交 操作: 在From标签中添加: @keyup.enter.native="handleSubmit" 注意: 1.若添加在Input标签上,只有聚焦在该i ...

  2. vue中axios调用接口和用node.js跨域

    <script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...

  3. vue 配合vue-resource调用接口,获取数据

    1.先用node+express+mysql简单配置一下后台 const express = require('express');const mysql = require('mysql');con ...

  4. vue v-time指令封装(接口返回时间戳 在到日期转换)

    // 全局时间戳转换指令注册Vue.directive('time',{ bind: function (el,binding) { let getTime = new Date(binding.va ...

  5. Vue $emit()不触发方法的原因

    vue使用$emit时,父组件无法触发监听事件的原因是: $emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名

  6. 结合vue展示百度天气接口天气预报

    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. vue+webpack+express中间件接口使用

    环境:vue 2.9.3; webpack 目的:接口的调用 跨域方式: 1.express中间的使用 2.nginx代理 3.谷歌浏览器跨域设置 -------------------------- ...

  8. vue打包后,接口请求404的完美解决方案

    在开发环境中,和后台对接为了解决跨域问题,使用了代理,也就是vue的proxyTable,但是打包放到生产环境中去时,接口请求不到,404,原因是开发环境的代理并不能用到生产环境,但是直接在请求接口是 ...

  9. vue项目axios请求接口,后端代理请求接口404,问题出现在哪?

    在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中 ...

随机推荐

  1. JQ向上取整 和向下取整 四舍五入

    向上取整   var a = 23.2325236   var abc = Math.ceil(a); //注意:Math.ceil(a)不要单独写一行,否则向上取整失败   abc = 24;   ...

  2. abap 优化之ST05

    DATA: gt_mara TYPE TABLE OF mara. SELECT * INTO TABLE gt_mara FROM mara WHERE MATKL = 'L000001' %_hi ...

  3. electron localStorage的bug

    在更新 electron 后有可能会读不到 localStorage 里的数据 推测是 localStorage 写在 Chromium 内核里,更新 electron 同时会更新 Chromium, ...

  4. centos7安装jdk和tomcat

    1,先卸载掉openjdk rpm -qa | grep java 卸载 sudo rpm -e --nodeps 加 需要卸载的 或者直接 rpm -e `rpm -qa | grep java` ...

  5. 使用pagehelper分页工具page警告问题

    警告: Hessian/Burlap: 'com.github.pagehelper.Page' is an unknown class in WebappClassLoader java.lang. ...

  6. 【bzoj 4046 加强版】Pork barrel

    刚考完以为是神仙题--后来发现好像挺蠢的-- QwQ 题意 给你一张 \(n\) 个点 \(m\) 条边的无向图(不一定连通),有 \(q\) 组询问,每组询问给你 \(2\) 个正整数 \(l,h\ ...

  7. SQL truncate 、delete与drop区别(转)

    相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句(数据定义语言),执行后会自动提交. 不同点: 1. t ...

  8. Spring Boot整合拦截器

    过滤器和监听器都属于Servlet 的api,还可以使用 Spring 提供的拦截器(HandlerInterceptor)进行改更精细的控制.

  9. 手机端自适应缩放显示 js

    <script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigato ...

  10. vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...