前端vue的get和post请求
vue的get和post需要两个文件vue.js和vue-resource.js
以下是实现的代码，可以参考一下，需要注意的接口的请求需要考虑跨域的问题，其次就是访问页面需要在tomcat下访问，否则也会报跨域的问题
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>test</title>
<meta name="author" content="xiewg@cebserv.com" />
<meta name="copyright" content="www.doyoe.com" />
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/jquery.min.js"></script>
<style>
p~p{color:#f00;}
</style>
</head>
<body>
<div id="app">
<table>
<tr v-for="item in message">
<td>{{item.expertId}}</td>
<td>{{item.categoryName}}</td>
</tr>
</table>
<button v-on:click="greet">get</button>
<button v-on:click="postgreet">post</button>
</div> <script type="text/javascript">
//var books={[]};
//{
// [
// {"id":1,"author":"曹雪芹","name":"红楼梦","price":32},
// {"id":2,"author":"施耐庵","name":"水浒传","price":30},
// {"id":"3","author":"罗贯中","name":"三国演义","price":24},
// {"id":4,"author":"吴承恩","name":"西游记","price":20}
// ]
//}
new Vue({
el: '#app',
data:{
message: [
{"id":1,"author":"曹雪芹","name":"红楼梦","price":32},
{"id":2,"author":"施耐庵","name":"水浒传","price":30},
{"id":"3","author":"罗贯中","name":"三国演义","price":24},
{"id":4,"author":"吴承恩","name":"西游记","price":20}
]
},
created: function () {
//this.greet();
},
ready:function(){
// this.greet();
},
methods:{ greet: function (event) {
//`this` 在方法里指向当前 Vue 实例
this.$http.get('http://172.16.1.218:58080/API/app/expertCategory/getQuestionList?expertCategoryId=2').then(function(data){
//this.books=data.body.data;
alert(data.body.returnCode);
this.message=data.body.resultData;
//this.$set('books', data.body);
},function(res){
console.log(res.status);
});
//alert('Hello ' + this.book + '!')
//`event` 是原生 DOM 事件
// if (event) {
// alert(event.target.tagName)
// }
},
postgreet: function (event) {
//`this` 在方法里指向当前 Vue 实例
this.$http.post('http://localhost:8080/customer/getCustomer',{param:1111}).then(function(data){
//this.books=data.body.data;
alert(data.body.message);
//this.message=data;
this.greet();
},function(res){
console.log(res.status);
});
//alert('Hello ' + this.book + '!')
//`event` 是原生 DOM 事件
// if (event) {
// alert(event.target.tagName)
// }
},
}
})
</script>
</body> </html>
前端vue的get和post请求的更多相关文章
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- Vue如何mock数据模拟Ajax请求
我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写json文件模拟数据加载.网上往往参考的都是不全面的,比如get请求没问题但是post请求就报错了.在Vue中只需要vue- ...
- vue开发之跨域请求，请求头not allowed by Access-Control-Allow-Headers，后端cookie session值取不到（二）
原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调 ...
- 团队开发前端VUE项目代码规范
团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...
- vue 设置全局变量、指定请求的 baseurl
一. 基本环境前端vue:2.5.6axios:0.18使用vue脚手架构建项目.参照:webstorm搭建vue项目后台ssm框架前后端数据采用json格式传输二. 前端配置axios配置1.安装: ...
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- 黑马eesy_15 Vue：04.综合案例（前端Vue实现）
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
- 前端vue下载文件时blob返回流中怎么获取文件名
我很久之前写了一篇前端vue利用blob对象下载文件,有些人私信我,如果后端返回流失败,给出的json对象该怎么获得?前端获取的流怎么能获取原文件名?其实在那篇文章之后,我就已经针对这两个问题进行了优 ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
随机推荐
- dede时间标签
dedecms首页时间标签:1.12-27 样式([field:pubdate function='strftime("%m-%d",@me)'/]) 2.May 15, 2009 ...
- 【数据结构】P1054 等价表达式
[题目链接] https://www.luogu.org/problem/P1054 题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数 ...
- Istio技术与实践01： 源码解析之Pilot多云平台服务发现机制
服务模型 首先,Istio作为一个(微)服务治理的平台,和其他的微服务模型一样也提供了Service,ServiceInstance这样抽象服务模型.如Service的定义中所表达的,一个服务有一个全 ...
- Flask 卡住, 无响应问题
自己学习Flask+Gevent, 做了一个小接口服务器, 但在收到请求后, 打印请求的报文, 并返回正确格式, 运行后会出现收到请求消息后,Flask卡住无响应的的问题, 有时候点击ctrl+C才能 ...
- java项目上线的流程（将web项目部署到公网）
本博文来源于网络,原文的地址在本篇博文最下方. 如何将java web项目上线/部署到公网 关于如何将Java Web上线,部署到公网,让全世界的人都可以访问的问题.小编将作出系列化,完整的流程介绍. ...
- C# 使用Emit实现动态AOP框架 (二)
目 录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...
- C#/.net 通过js调用系统相机进行拍照，图片无损压缩后进行二维码识别
这两天撸了一个需求,通过 JS 调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...
- arcgis js之点击获取featureLayer中的点
arcgis js之点击获取featureLayer中的点 代码: this.view.on('click', (evt) => { let layer = this.map.findLayer ...
- SpringCloud 随笔
目录 服务间通讯 统一配置中心 RabbitMQ Spring Cloud Stream 服务网关 Spring Cloud Zuul ++==(纯手打,代码可能有错!)==++ 服务间通讯 Rest ...
- HTML给标题栏添加图标
<link rel="icon" href="images/logo.icon" type="image/x-icon"> 也可 ...