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. pthread_cond_t

    条件锁pthread_cond_t (1)pthread_cond_wait的使用 等待线程1. 使用pthread_cond_wait前要先加锁2. pthread_cond_wait内部会解锁,然 ...

  2. mysqlbinlog实战

    关于mysqlbinlog命令,下列参数应用频率较高:--base64-output:选项有三个参数,never表示不处理ROW格式日志,只处理传统的基于STATEMENT格式日志.decode-ro ...

  3. Spring HttpServletRequest对象的获取

    1.Controller方法上获取 @RequestMapping(value = "/aliyun/ccc/callComing", method = RequestMethod ...

  4. JS基础_返回值的类型

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Pycharm+Selenium webdriverPython自动化测试

    这是关于软件测试的一个作业! 1.Pycharm下载,这里可以自己去官网下载即可:https://www.jetbrains.com/pycharm/download/#section=windows ...

  6. 基于Hadoop生态SparkStreaming的大数据实时流处理平台的搭建

    随着公司业务发展,对大数据的获取和实时处理的要求就会越来越高,日志处理.用户行为分析.场景业务分析等等,传统的写日志方式根本满足不了业务的实时处理需求,所以本人准备开始着手改造原系统中的数据处理方式, ...

  7. select input 等控件进行清空操作

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  8. 安卓开发之生成XML文件

    package com.lidaochen.phonecall; import android.net.Uri; import android.os.Environment; import andro ...

  9. You are using the runtime-only build of Vue where the template compiler is not available.

    使用vue-cli搭建的项目,启动报错 You are using the runtime-only build of Vue where the template compiler is not a ...

  10. linux下安装db2

    最近研究了一下在 ubuntu下安装db2的过程,很快就完成安装,特贴出来供大家讨论,如有错误请多多指教. 注意:安装过程请使用root用户,否则会出现安装失败的情况: 安装过程: 准备工作: 准备安 ...