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. C++11 bind和function用法

    function是一个template,定义于头文件functional中.通过function<int(int, int)> 声明一个function类型,它是“接受两个int参数.返回 ...

  2. decimal, double, float

     更新: 2019-09-08  c# and js 要 ceil floor 2 decimal point 都没有 build in 的 solution 比如 15.667 想 ceil to ...

  3. Graphite简要教程

    转载自DevOps实战:Graphite监控上手指南 英文原文Getting Started with Monitoring using Graphite 英文原文Google快照 作者 Frankl ...

  4. SP338ROADS题解--最短路变式

    题目链接 https://www.luogu.org/problemnew/show/SP338 分析 联想到不久前做过的一道题\(Full\) \(Tank\),感觉可以用优先队列做,于是写了\(d ...

  5. SpringBoot项目的限流

    开发访问量比较大的系统是,爬虫的目的就是解决访问量大的问题:缓存穿透是为了保护后端数据库查询服务:计数服务解决了接近真实访问量以及数据库服务的压力. 架构图 限流 就拿十万博客来说,如果存在热点文章, ...

  6. 基于PROMISE解决回调地狱问题

    回调地狱问题: 在使用JavaScript时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过多,会极大影响代码可读性和逻辑,这种情况也被成为回调地狱.比如说你要把一个函数 A 作为回调函数, ...

  7. Lab1 Report

    Lab1 report A) The brief description that you install junit, hamcrest and eclemma. a)  install junit ...

  8. Spring Cloud（十一）高可用的分布式配置中心 Spring Cloud Bus 消息总线集成（RabbitMQ）

    详见:https://www.w3cschool.cn/spring_cloud/spring_cloud-jl8a2ixp.html 上一篇文章,留了一个悬念,Config Client 实现配置的 ...

  9. Junit5常用注解

    0. IDEA中Maven项目测试类的新建方法 a. 如图在src目录下新建文件夹test b. 鼠标右键test,将该文件设置成test source c. 右键需要新建的测试类,如下图操作,选中T ...

  10. shiro系列一、认识shiro

    Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Security做的功能强大 ...