前端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 ...
随机推荐
- mysql innodb数据库损坏导致无法启动
生产环境中的mysql突然启动不了,查了原因是innodb库错误,以前就遇到过这个问题,稀里糊涂的没解决,结果导致大量数据丢失.这些又遇到这个问题,果断把那个有问题的数据库移动了别的地方,启动了mys ...
- Python中的幽灵—编码方式
首先要搞懂本地操作系统编码与系统编码的区别: 本地操作系统编码方式与操作系统有关,Linux默认编码方式为utf-8,Windows默认编码方式为gbk: 系统编码方式与编译器or解释器有关,Pyth ...
- PostgreSQL-存储过程
存储过程其实就是函数,由一组 sql 语句组成,实现比较复杂的数据库操作: 存储过程 是 存储在 数据库服务器 上的,用户可以像调用 sql 自带函数一样 调用存储过程 语法解析 CREATE [OR ...
- vue-slick 插件配置
autoplay 布尔值 false 自动播放 autoplaySpeed 整数 3000 自动播放间隔 centerMode 布尔值 false 中心模式 centerPadding 字符串 ’50 ...
- java Lesson08总结
package com.xt.java.FirstExciple.oop; public class NokiaPhone { //成员变量 String name="np001" ...
- 深入浅出GNU X86-64 汇编
深入浅出GNU X86-64 汇编 来源 https://blog.csdn.net/pro_technician/article/details/78173777 原文 https://www3.n ...
- Pytorch中的自编码(autoencoder)
Pytorch中的自编码(autoencoder) 本文资料来源:https://www.bilibili.com/video/av15997678/?p=25 什么是自编码 先压缩原数据.提取出最有 ...
- Oracle---PL/SQL的学习
PL/SQL程序 一.定义 declare 说明部分 begin 语句序列(DML语句) exception 例外处理语句 end; 二. 变量和常量说明 a) 说明变量(char,varchar2, ...
- JasperReport笔记
参考: https://blog.csdn.net/dullchap/article/details/51799070 关于 ireport的初步使用 ,笔记记录
- ASE19团队项目alpha阶段model组 scrum7 记录
本次会议于11月11日,19时整在微软北京西二号楼sky garden召开,持续15分钟. 与会人员:Jiyan He, Kun Yan, Lei Chai, Linfeng Qi, Xueqing ...