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请求的更多相关文章

  1. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  2. Vue如何mock数据模拟Ajax请求

    我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写json文件模拟数据加载.网上往往参考的都是不全面的,比如get请求没问题但是post请求就报错了.在Vue中只需要vue- ...

  3. vue开发之跨域请求，请求头not allowed by Access-Control-Allow-Headers，后端cookie session值取不到（二）

    原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调 ...

  4. 团队开发前端VUE项目代码规范

    团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...

  5. vue 设置全局变量、指定请求的 baseurl

    一. 基本环境前端vue:2.5.6axios:0.18使用vue脚手架构建项目.参照:webstorm搭建vue项目后台ssm框架前后端数据采用json格式传输二. 前端配置axios配置1.安装: ...

  6. [前端] VUE基础 (6) (v-router插件、获取原生DOM)

    一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...

  7. 黑马eesy_15 Vue：04.综合案例（前端Vue实现）

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  8. 前端vue下载文件时blob返回流中怎么获取文件名

    我很久之前写了一篇前端vue利用blob对象下载文件,有些人私信我,如果后端返回流失败,给出的json对象该怎么获得?前端获取的流怎么能获取原文件名?其实在那篇文章之后,我就已经针对这两个问题进行了优 ...

  9. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

随机推荐

  1. css走马灯，一步一停（专家介绍类型）

    <div class="CON--cen-pd3 clear aniview slow" data-av-animation="fadeIn"> & ...

  2. 微信小程序 路由跳转 异步请求 存储数据，微信登录接口

    1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...

  3. 怎样查看 MySQL 版本号

    1. 在命令行中直接查看版本号 mysql -V 2. 在 mysql --help 中查找与版本相关的信息 mysql --help | grep Ver 3. 在mysql命令行里面查看版本信息 ...

  4. C# 使用Emit实现动态AOP框架 (一)

    目  录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...

  5. C# Math.Round()的银行家算法

    可能很多人都跟我一样,都只知道Math.Round()是C#中用来做四舍五入,保留指定小数位的 但实际上它并不是真正的四舍五入,而是银行家算法的四舍六入五取偶 事实上这也是IEEE的规范,因此所有符合 ...

  6. http 协议相关问题

    http 协议相关问题 来源 https://www.cnblogs.com/lingyejun/p/7148756.html 1.说一下什么是Http协议? 对器客户端和 服务器端之间数据传输的格式 ...

  7. 基于Groovy编写Ngrinder脚本常用方法

    1.生成随机字符串(import org.apache.commons.lang.RandomStringUtils) 数字:RandomStringUtils.randomNumeric(lengt ...

  8. 15.SpringMVC核心技术-数据验证

    在 Web 应用程序中,为了防止客户端传来的数据引发程序的异常,常常需要对数据进行验证. 输入验证分为客户端验证与服务器端验证.客户端验证主要通过 JavaScript 脚本进 行, 而服务器端验证则 ...

  9. 8.Spring整合Hibernate_2_声明式的事务管理（Annotation的方式）

    声明式的事务管理(AOP的主要用途之一) (Annotation的方式) 1.加入annotation.xsd 2.加入txManager bean 3.<tx:annotation-drive ...

  10. sqoop1.4.6 用法总结一

    Sqoop是一个用于在Hadoop和关系数据库或大型机之间传输数据的工具.您可以使用Sqoop将关系数据库管理系统(RDBMS)中的数据导入Hadoop分布式文件系统(HDFS),在Hadoop Ma ...