vue问题一:触发接口
//在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问题一:触发接口的更多相关文章
- vue之回车触发表单提交
vue之回车触发表单提交 操作: 在From标签中添加: @keyup.enter.native="handleSubmit" 注意: 1.若添加在Input标签上,只有聚焦在该i ...
- vue中axios调用接口和用node.js跨域
<script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...
- vue 配合vue-resource调用接口,获取数据
1.先用node+express+mysql简单配置一下后台 const express = require('express');const mysql = require('mysql');con ...
- vue v-time指令封装(接口返回时间戳 在到日期转换)
// 全局时间戳转换指令注册Vue.directive('time',{ bind: function (el,binding) { let getTime = new Date(binding.va ...
- Vue $emit()不触发方法的原因
vue使用$emit时,父组件无法触发监听事件的原因是: $emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名
- 结合vue展示百度天气接口天气预报
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue+webpack+express中间件接口使用
环境:vue 2.9.3; webpack 目的:接口的调用 跨域方式: 1.express中间的使用 2.nginx代理 3.谷歌浏览器跨域设置 -------------------------- ...
- vue打包后,接口请求404的完美解决方案
在开发环境中,和后台对接为了解决跨域问题,使用了代理,也就是vue的proxyTable,但是打包放到生产环境中去时,接口请求不到,404,原因是开发环境的代理并不能用到生产环境,但是直接在请求接口是 ...
- vue项目axios请求接口,后端代理请求接口404,问题出现在哪?
在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中 ...
随机推荐
- JQ向上取整 和向下取整 四舍五入
向上取整 var a = 23.2325236 var abc = Math.ceil(a); //注意:Math.ceil(a)不要单独写一行,否则向上取整失败 abc = 24; ...
- abap 优化之ST05
DATA: gt_mara TYPE TABLE OF mara. SELECT * INTO TABLE gt_mara FROM mara WHERE MATKL = 'L000001' %_hi ...
- electron localStorage的bug
在更新 electron 后有可能会读不到 localStorage 里的数据 推测是 localStorage 写在 Chromium 内核里,更新 electron 同时会更新 Chromium, ...
- centos7安装jdk和tomcat
1,先卸载掉openjdk rpm -qa | grep java 卸载 sudo rpm -e --nodeps 加 需要卸载的 或者直接 rpm -e `rpm -qa | grep java` ...
- 使用pagehelper分页工具page警告问题
警告: Hessian/Burlap: 'com.github.pagehelper.Page' is an unknown class in WebappClassLoader java.lang. ...
- 【bzoj 4046 加强版】Pork barrel
刚考完以为是神仙题--后来发现好像挺蠢的-- QwQ 题意 给你一张 \(n\) 个点 \(m\) 条边的无向图(不一定连通),有 \(q\) 组询问,每组询问给你 \(2\) 个正整数 \(l,h\ ...
- SQL truncate 、delete与drop区别(转)
相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句(数据定义语言),执行后会自动提交. 不同点: 1. t ...
- Spring Boot整合拦截器
过滤器和监听器都属于Servlet 的api,还可以使用 Spring 提供的拦截器(HandlerInterceptor)进行改更精细的控制.
- 手机端自适应缩放显示 js
<script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigato ...
- vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...