第十三篇: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. ...
随机推荐
- Node.js精进(3)——流
在 JavaScript 中,一般只处理字符串层面的数据,但是在 Node.js 中,需要处理网络.文件等二进制数据. 由此,引入了Buffer和Stream的概念,两者都是字节层面的操作. Buff ...
- 【机器学习】数据准备--python爬虫
前言 我们在学习机器学习相关内容时,一般是不需要我们自己去爬取数据的,因为很多的算法学习很友好的帮助我们打包好了相关数据,但是这并不代表我们不需要进行学习和了解相关知识.在这里我们了解三种数据的爬取: ...
- WinSCP和PuTTY的安装和使用
简介 WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端.同时支持SCP协议.它的主要功能就是在本地与远程计算机间安全的复制文件. 安装 1.下载地址:https://www. ...
- java SWT中Label实时刷新当前时间
同样最近在开发swt的一个项目,业务中的一个功能模块类似百度网盘的上传进度条 0/80. 即已上传0个,总共80个.效果展示要的就是实时刷新,2/80呀,15/80呀,针对这个,就有了这篇文章. 下面 ...
- 719. 找出第 K 小的数对距离
719. 找出第 K 小的数对距离 这道题其实有那么一点二分猜答案的意思,也有很多类似题目,只不过这道题确实表达的不是很清晰不容易想到,题没问题,我的问题.既然是猜答案,那么二分边界自然就是距离最大值 ...
- NC15163 逆序数
NC15163 逆序数 题目 题目描述 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数.比如一个序列为 \ ...
- Halcon 条形码识别
read_image (Image, 'C:/Users/HJ/Desktop/test_image/image.png') create_bar_code_model([], [], BarCode ...
- Thread类的常用方法_获取线程名称的方法和设置线程名称的方法
Thread类的常用方法 获取线程的名称: 1.使用Thread类中的方法getName() String getName() 返回该线程的名称 2.可以先获取到当前正在执行的线程,使用线程中的方法g ...
- JDK的下载与安装和环境变量的配置
一.jdk下载打开浏览器在地址栏输入: http://www.oracle.com ,进入Oracle官网主页面,选择 Products-----Java---->Download Java . ...
- 一个豆瓣电影Top250爬虫
一个爬虫 这是我第一次接触爬虫,写的第一个爬虫实例. https://movie.douban.com/top250 模块 import requests #用于发送请求 import re #使用正 ...