前端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 ...
随机推荐
- 基于白名单的Payload
利用 Msiexec 命令DLL反弹 Msiexec是Windows Installer的一部分.用于安装Windows Installer安装包(MSI),一般在运行Microsoft Update ...
- CPU vector operations
CPU vector operations 原文:https://blog.csdn.net/wangeen/article/details/8602028 vector operations 是现代 ...
- ‘mysql’不是内部或外部命令，也不是可运行的程序--解决方法
一.场景 在cmd命令窗口下操作mysql时,提示mysql不是内部或外部命令,也不是可运行的程序. 二.原因 有3种原因: 1.没有装mysql 2.没有配置mysql环境变量 3.cmd命令窗口没 ...
- 系统性能分析-vmstat命令详解
最近温馨巩固Linux 操作系统的 vmstat命令,这个命令所能打印的系统信息满多的,比较好用,就顺当记录下重要的点,方便以后排查系统问题时拿出来用 字段 含义 procs 进程信息字段: -r:正 ...
- vue项目中使用特殊字体
项目开发中遇到要是有‘数字’字体的情况,样式如下 网上查了一下实现的方法很简单,而且具体的实现方式大致相同,可以参考以下几个链接: https://www.cnblogs.com/zhangnan35 ...
- 6.Cookie和Session
/*会话*/ (开一个浏览器,访问几个web资源,然后关闭浏览器,这个过程为一个对话) /*保存*/会话数据的两种技术(cookie session) 1.Cookie (客户端技术)(数据保存在客户 ...
- vscode go开发主要插件
• Colorization 代码着彩色 • Completion Lists 代码自动完成(使用gocode) • Snippets 代码片段 • Quick Info 快速提示信息(使用godef ...
- SSH配置（同一服务器不同用户）
一.cxwh用户ssh免密登陆至xtjk用户 1.cxwh用户执行 ssh-keygen -t rsa -N "" -f /home/cxwh/.ssh/id_rsa cp /ho ...
- web开发：css基础
一.w3c架构分析 二.css三种引入 三.三种引入的优先级 四.基础选择器 五.长度单位与颜色 六.文件样式操作 七.display 一.w3c架构分析 <!DOCTYPE html> ...
- Caffe---自带工具 绘制loss和accuracy曲线
Caffe自带工具包---绘制loss和accuracy曲线 为什么要绘制loss和accuracy曲线?在训练过程中画出accuracy 和loss曲线能够更直观的观察网络训练的状态,以便更好的优化 ...