第十三篇:axios网络通信
好了这事一个非常艰巨的任务 解释以下的全部代码
<template>
<div class="hello">
<p style="color:gray">
提示:在vscode terminal中使用npm run server启动服务,否则是看不到效果的
</p>
<!-- <el-button @click="check">点击以测试接口</el-button>
<el-row>
<el-select v-model="method">
<el-option
v-for="(m, key) in methods"
:key="key"
:label="m + '(' + key + ')'"
:value="key"
></el-option>
</el-select>
</el-row>
<el-row style="width:40%;">
用户名:<el-input v-model="id"></el-input> 密码:<el-input v-model="password"></el-input> 年龄:<el-input v-model="age"></el-input> 性别:<el-input v-model="sexual"></el-input>
</el-row> -->
<h1 style="text-align:center">
用户操作表
</h1>
<pre>
{{ result }}
</pre>
<!---测试案例-->
<el-row>
<el-button @click="addUser">添加用户</el-button>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="用户名" width="180"> </el-table-column>
<el-table-column prop="password" label="用户密码" width="180">
</el-table-column>
<el-table-column prop="age" label="年龄"> </el-table-column>
<el-table-column prop="sexual" label="性别">
<template slot-scope="scope">
{{ scope.row.sexual ? "女" : "男" }}
</template>
</el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scope">
<el-button @click="editUser(scope.row)" type="text" size="small"
>编辑</el-button
>
<el-button @click="removeUser(scope.row)" type="text" size="small"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="showDialog">
<el-row style="width:40%;">
用户名:<el-input v-model="id" :disabled="mode == 'update'"></el-input> 密码:<el-input v-model="password"></el-input> 年龄:<el-input-number v-model="age"></el-input-number> 性别:<el-select v-model="sexual">
<el-option label="男" :value="0"></el-option>
<el-option label="女" :value="1"></el-option>
</el-select>
</el-row>
<div slot="footer">
<el-button @click="showDialog = false">取 消</el-button>
<el-button type="primary" @click="apply(mode)">{{
mode == "add" ? "创建" : "编辑"
}}</el-button>
</div>
</el-dialog>
</div>
</template>
下面是脚本了
<script>
export default {
name: "HelloWorld",
mounted() {
this.refreshTable();
},
data() {
return {
showDialog: false,
mode: "add",
tableData: [],
methods: {
save: "保存用户信息",
update: "修改用户信息",
check: "验证密码",
delete: "删除用户",
add: "添加用户",
get: "获取用户信息"
},
method: "check",
result: "",
age: "",
sexual: "",
id: "",
password: ""
};
},
methods: {
apply(mode) {
this.send(
mode,
{
id: this.id,
password: this.password,
sexual: this.sexual,
age: this.age
},
() => {
this.refreshTable();
this.showDialog = false;
}
);
},
addUser() {
this.showDialog = true;
this.mode = "add";
["id", "sexual", "age", "password"].forEach(item => {
this[item] = undefined;
});
},
editUser(source) {
this.showDialog = true;
this.mode = "update";
["id", "sexual", "age", "password"].forEach(item => {
this[item] = source[item];
});
},
removeUser(user) {
this.send("delete", user, () => {
this.refreshTable();
});
},
send(method, option, callback) {
this.result = "";
this.$axios.post("/user/" + method, option).then(res => {
let result = res.data;
if (result.status == -1) {
alert(result.msg);
return;
}
callback(result.data && JSON.parse(JSON.stringify(result.data)));
});
},
refreshTable() {
this.send("get", {}, data => {
this.tableData = data;
});
},
check() {
this.result = "";
this.$axios
.post("/user/" + this.method, {
id: this.id,
age: this.age,
password: this.password,
sexual: this.sexual
})
.then(res => {
console.log("res=>", res);
this.result = res.data;
});
}
}
};
</script>
第十三篇:axios网络通信的更多相关文章
- 解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘(译)
解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘(译) http://improve.dk/the-anatomy-of-row-amp-page-compre ...
- 第十三篇 Integration Services:SSIS变量
本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将 ...
- Python之路【第十三篇】:jQuery -暂无内容-待更新
Python之路[第十三篇]:jQuery -暂无内容-待更新
- Python开发【第二十三篇】:持续更新中...
Python开发[第二十三篇]:持续更新中...
- Python开发【第十三篇】:jQuery(二)
http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展 ...
- Python开发【第十三篇】:jQuery--无内容点击-不进去(一)
Python开发[第十三篇]:jQuery--无内容点击-不进去(一)
- 十三篇系列:king转折点,wooga瓶颈,supercell营收结构
转自:http://gamerboom.com/archives/95125 十三篇系列:king的历史转折点,wooga的瓶颈,supercell的营收结构 第一篇 这句话In other word ...
- 【译】第十三篇 Integration Services:SSIS变量
本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将 ...
- 跟我学SpringCloud | 第十三篇:Spring Cloud Gateway服务化和过滤器
SpringCloud系列教程 | 第十三篇:Spring Cloud Gateway服务化和过滤器 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich. ...
随机推荐
- JS:||运算符
||逻辑运算符 ||这个符号在开发中 往往是优化的代码最常用的js符号: 当用||连接语句时,回将前后语句变为Boolean类型,再进行运算: 1.当||前面条件为false,不管后面是true/fa ...
- rosbag遍历数据出错:(unicode error) 'utf-8' codec can't decode byte 0xcd in position 31: invalid continuation byte
主题: 前言 针对ros系统记录的bag文件,可以使用python的rosbag包,按照不同起止时间和topic进行提取. 然而,有的topic可以使用rosbag读取,但是不能遍历,存在解码错误.原 ...
- JavaScript与Node.js一起打造一款聊天App
聊天是我们人与人交流最直接的方式,互联网的加入使我们交流更加便捷.我们手机上的微信.QQ是我们手机必不可少的应用软件.那么,我们是否可以做一款聊天应用呢? 之前我自己闲着没事,研究过一些技术,做了一款 ...
- nodeJS与MySQL实现分页数据以及倒序数据
大家在做项目时肯定会遇到列表类的数据,如果在前台一下子展示,速度肯定很慢,那么我们可以分页展示,比如说100条数据,每10条一页,在需要的时候加载一页,这样速度肯定会变快了.那么这里我给大家介绍如何在 ...
- 获取mybatis注解方式新增数据时非自增插入的主键
场景:插入数据的时候,获取不到非自增的主键.原因:对象中没有主键的值,插入后主键才有值. 解决方案:使用 @SelectKey @SelectKey中: statement是要运行的SQL语句,即查询 ...
- cookie 案例 记住上一次的访问时间
需求:记住上一次的访问时间 第一次访问Servlet 提示 欢迎首次访问 之后的访问 都提示 您上次的访问时间为:"""""""& ...
- Java方法读取文件内容
一.针对文件内容的读取,在平时的工作中想必是避免不了的操作,现在我将自己如何用java方法读取文件中内容总结如下:废话不多说,直接上代码: 1 public static void main(Stri ...
- 到点了开始网抑云(悲)但是用python(整活)
写在前面的一点网抑云: 爱情不是随便许诺好了不想再说了没错 是我那么多的冷漠 让你感觉到无比的寂寞不过 一个女人的不仅仅渴望得到的一个承诺我害怕欺骗也害怕寂寞更害怕我的心会渐渐地凋落爱情不是随便许诺好 ...
- python常见的错误提示处理
python常见的错误有 NameError变量名错误 IndentationError代码缩进错误 AttributeError对象属性错误 TypeError类型错误 IOError输入输出错误 ...
- jenkins页面一直在Please wait while Jenkins is getting ready to work ...
原因:因为访问官网太慢.我们只需要换一个源,不使用官网的源即可. 1.找到jenkins工作目录 find / -name *.UpdateCenter.xml 2.修改文件中的url,随后重启就行了 ...