前端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 ...
随机推荐
- 标准库中最值得关注的两个 装饰器是 lru_cache 和全新的 singledispatch（Python 3.4 新增）
clock 装饰器 def clock(func): @functools.wraps(func) def clocked(*args, **kwargs): t0 = time.perf_count ...
- linux下mysql启动 Starting MySQL. ERROR! The server quit without updating PID file（xxx/x.pid）
service mysql start 报错: Starting MySQL. ERROR! The server quit without updating PID file(xxx/x.pid) ...
- GoLang语言环境搭建及idea集成开发(超详细)
一.所需安装包(windows) 1. https://golang.org/dl/ 下载 MSI installer.不会翻墙的自己找国内下载,双击运行,按照提示安装即可.环境变量自动配置 2.i ...
- hdu 2821 学习一点dfs的小技巧吧。。 还是自己太弱了
#include<iostream> #include<cstdio> #include<cstring> using namespace std; int r,c ...
- vue项目中导出PDF的两种方式
参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...
- Windows 下 nvm, node, npm 的下载、安装与配置
主要解决的问题 下载安装完 nvm 和 node 后,缺失 npm 文件 执行 jasmine 等命令时提示「不是内部或外部命令...」及全局变量的设置 下载与安装 一.nvm github 下载地址 ...
- js之数据类型（对象类型——单体内置对象——Math）
Math是一个内置对象,它具有数学常数和函数的属性和方法.Math对象用于执行数学任务,和其它对象不同,Math只是一个静态对象并没有Math()构造函数,实际上,Math()只是一个由js设置的对象 ...
- 日志(logging)与正则(re)模块
logging模块 #日志:日常的流水 =>日志文件,将程序运行过程中的状态或数据进行记录,一般都是记录到日志文件中 #1.logging模块一共分为五个打印级别 debug.info.warn ...
- Django + mysql 在创建数据库出错
错误:django.db.utils.OperationalError: (1366, "Incorrect string value: '\\xE6\\x96\\x87\\xE7\\xAB ...
- MySQL跨表更新SQL
1 sql范式 把s表中的city_name的值设置为city表中的name,关联条件是city_code 和 code update student s, city c set s.city_na ...