Javascript - Vue - 请求
本地增删查的一个例子
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">新增</h3>
</div>
<div class="panel-body form-inline">
<label>
id:<input type="text" class="form-control" v-model="obj.id" />
</label>
<label>
name:<input type="text" class="form-control" v-model="obj.name" />
</label>
<input type="button" value="add" class="btn btn-primary" @click="add" />
<label>
search:<input type="text" class="form-control" v-model="keyWords"/>
</label>
</div>
</div>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr><th>id</th><th>name</th><th>createTime</th><th>opration</th></tr>
<!--//呈现的数据由vue对象内部维护的search函数提供,当在搜索框输入数据后,vue对象内部数据keyWords发生变化,则会自动调用search进行数据过滤-->
<tr v-for="obj in search(keyWords)" :key="obj.id"><td>{{obj.id}}</td><td>{{obj.name}}</td><td>{{obj.time}}</td><td><a href="#" @click.prevent="del(obj.id)">删除</a></td></tr>
</table>
</div>
el: "#box",
data: {
keyWords: "",
obj: { id: null, name: "", time: null },
list: [
{ id: 1, name: "sam",time:new Date() },
{ id: 2, name: "leo", time: new Date() },
{ id: 3, name: "korn", time: new Date() }
]
},
methods: {
add: function () {
var id = this.obj.id;
var name = this.obj.name;
this.list.push({ id: id, name: name,time:new Date() });
},
del: function (id) {
var index=this.list.findIndex((item) => {
if (item.id == id) return true;
});
this.list.splice(index, 1);
},
search: function (keyWords) {
return this.list.filter((item,index) => {
if (item.name.includes(keyWords)) {
return item;
}
});
}
}
});
向服务端发起请求
axios
这是官方推荐的新的插件,用于客户端向服务端发送请求。可在axios下载。
{{msg}}
<button @click="sendGet">GetInfo</button>
}
},
methods: {
sendGet: function () {
var self=this;
var getObj=axios.get("http://localhost:53385/Handler.ashx", {
params: self.sendData
});
var endObj= getObj.then(function (response) {
self.msg = response.data;
});
endObj.catch(function (error) {
self.msg = error.status + error.statusText;
});
},
sendPost: function () {
var self = this;
var postObj = axios.post("http://localhost:53385/Handler.ashx", self.sendData);
var endObj=postObj.then(function (response) {
self.msg = response.data;
});
endObj.catch(function (error) {
self.msg = error.status + error.statusText;
});
}
}
});
</script>
服务端
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("OK");
context.Response.End();
}
}
增删改查实例
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加</h3>
</div>
<div class="panel-body form-inline">
<label>
name:<input type="text" class="form-control" v-model="name" />
</label>
<input type="button" value="新增" class="btn btn-primary" @click="add" />
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<tr>
<th>ID</th>
<th>Name</th>
<th>Date</th>
<th>Operation</th>
</tr>
<tr v-for="obj in list" :key="obj.ID">
<td>
{{obj.ID}}
</td>
<td>
{{obj.Name}}
</td>
<td>
{{obj.Date}}
</td>
<td>
<a href="#" :id="obj.ID">编辑</a>
</td>
</tr>
</table>
</div>
服务端需要创建一个模拟数据库存储数据的在内存中可以保持全局唯一的数据对象以便可以在这个对象列表里持续添加数据
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime Date { get; set; }
public static List<Employee> GlobalList { get; set; } //全局唯一的员工列表
static Employee()
{
GlobalList= new List<Employee>
{
new Employee
{
ID = 1,
Date = new DateTime(),
Name = "寒食"
},
new Employee
{
ID = 2,
Date = new DateTime(),
Name = "山魈"
},
new Employee
{
ID = 3,
Date = new DateTime(),
Name = "李隼"
}
};
}
}
查询
客户端代码
el: "#box",
data: {
name:null,
list: [
{ ID: 1, Name: "sam", Date: new Date() }
]
},
methods: {
getServerData: function () {
var self = this;
axios.get("http://localhost:53385/getAllList.ashx").then(function (response) {
self.list = response.data;
});
}
},
created: function () { //vue对象创建完成后开启查询
this.getServerData();
}
});
服务端代码
{
context.Response.ContentType = "text/plain";
string listStr = JsonConvert.SerializeObject(Employee.GlobalList);
context.Response.Write( listStr);
context.Response.End();
}
新增
客户端代码
el: "#box",
data: {
name:null,
list: [
{ ID: 1, Name: "sam", Date: new Date() }
]
},
methods: {
add: function () {
var self = this;
axios.post("http://localhost:53385/addData.ashx", { name: this.name }).then(function (response) {
self.list = response.data;
});
}
}
});
服务端代码
{
context.Response.ContentType = "text/plain";
//客户端axios对象的post方法模拟了post提交方式,但它提交的是json格式的数据,不能用request.form[]来获取数据
//以下通过读取流数据来获取客户端提交的json数据
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
using (var reader = new System.IO.StreamReader(context.Request.InputStream))
{
String jsonData = reader.ReadToEnd();
var em = new Employee { Date = new DateTime(), Name = JsonConvert.DeserializeObject<Employee>(jsonData).Name };
var list = Employee.GlobalList;
list.Add(em);
var message = string.IsNullOrEmpty(jsonData) ? "error" : JsonConvert.SerializeObject(list);
context.Response.Write(message);
context.Response.End();
}
}
删改略……
Javascript - Vue - 请求的更多相关文章
- Javascript异步请求你能捕获到异常吗?
Javascript异步请求你能捕获到异常吗? 异常处理是程序发布之前必须要解决的问题,不经过异常处理的应用会让用户对产品失去信心.在异常处理中,我们一贯的做法是按照函数调用的次序,将异常从数据访问层 ...
- 一个vue请求接口渲染页面的例子
new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...
- JavaScript获取请求参数
<script type="text/javascript"> //获取请求参数 function paramsMap() { var url = window.loc ...
- Javascript - Vue - vue对象
vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ...
- Javascript - Vue - 在vscode里使用webpack
cnpm(node package manager)和webpack模块 npm是运行在node.js环境下的包管理工具,使用npm可以很快速的安装前端文件里需要依赖的那些项目文件,比如js.css文 ...
- Javascript - Vue - 路由
vue router.js 下载:vue-router.js, 该文件依赖于vue.js <script src="Scripts/vue-2.4.0.js">< ...
- Javascript - Vue - webpack + vue-cil
cnpm(node package manager)和webpack模块 npm是运行在node.js环境下的包管理工具(先安装node.js,再通过命令 npm install npm -g 安装n ...
- Javascript - Vue - webpack中的组件、路由和动画
引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时 ...
- VUE请求本地数据的配置json-server
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
随机推荐
- PAT甲题题解-1120. Friend Numbers (20)-水题
博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789775.html特别不喜欢那些随便转载别人的原创文章又不给 ...
- 【Alpha】第七次Scrum meeting
今日任务一览: 姓名 今日完成任务 所耗时间 刘乾 今日没有做很多事...一天都在沟通细化需求与画电路图 2 鲁聃 生成物理报告实验页面的生成 Issue链接:https://github.com/b ...
- 《在kali上完成gdb调试》
kali使用流程 1.使menuos停止 方法如图: 效果如图: 2.启动调试 打开一个新的命令行,然后方法如下图: 3.设置断点 注:由图可看出,断点设置在sys_clone,dup_task_st ...
- Daily Scrum - 11/13
时间:3:00pm - 3:30pm 今天小组例会主要是任烁分享他对WP源码的code review,通过分析与讨论我们了解了背单词模块的主要类(主要是词和单词本),取词方式(调用数据库接口),算法( ...
- 基于RYU restful api实现的VLAN网络虚拟化
基于RYU restful api实现的VLAN网络虚拟化 前言 本次实验是基于OVS的VLAN虚拟化简易实践方案的进一步的实验,采用RYU restful api进行配置.本质上和上次实验没什么差, ...
- RYU 灭龙战 second day(内容大部分引自网络)
RYU 灭龙战 second day(内容大部分引自网络) 写好的markdown重启忘了保存...再写一次RLG 巨龙的稀有装备-RYU代码结构 RYU控制器代码结构的总结 RYU入门教程 RYU基 ...
- 『编程题全队』Alpha阶段事后诸葛亮分析
一.设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? Answer: (1)我们软件主要解决个人和团队的事务管理问题 (2)我们软件的定义明确和清楚 ...
- HDU 2051 Bitset
http://acm.hdu.edu.cn/showproblem.php?pid=2051 Problem Description Give you a number on base ten,you ...
- 顺序表的C、C++实现
一个线性表表实现,函数声明放在 line_list.h 头文件汇总,函数定义放在line_list.c 中,main.c 用来测试各个函数. 1.文件 line_list.h // line_list ...
- Mysql的row_format(fixed与dynamic)
在mysql中, 若一张表里面不存在varchar.text以及其变形.blob以及其变形的字段的话,那么张这个表其实也叫静态表,即该表的row_format是fixed,就是说每条记录所占用的字节 ...