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. spring-boot-plus CORS跨域处理

    CORS跨域处理 CORS:Cross-Origin Resource Sharing CORS是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domai ...

  2. MyEclipse的Server标签出现：Could not create the view: An unexpected exception was thrown

    删除工作空间下的.metadata\.plugins\org.eclipse.core.runtime\.settings\com.genuitec.eclipse.ast.deploy.core.p ...

  3. JS 控制特殊字符

    1.标签上直接替换方法: JS 控制不能输入特殊字符 1 <input type="text"class="domain"onkeyup="th ...

  4. Maven错误：警告Classpath entry org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER will not be exported or published

    该错误是在我将一个普通的由maven管理的java项目变为javaweb项目后出现的,由警告可以看出是说maven的类路径容器不会被导出或发布(即通过maven管理的依赖不会被导出或发布),那么我们用 ...

  5. Vue项目中使用AES加密

    1.在vue中安装crypto-js        备注:千万不要安装错了,中间是 ‘-’连接,不是‘.’ 2.在项目的工具文件夹中新建 encryption.js,用于定义加密和解密的方法,方便调用 ...

  6. TensorFlow C++接口编译和使用

    部分内容from: Tensorflow C++ 从训练到部署(1):环境搭建 在之前的编译中,已经编译好了tensorflow_pkg相关的wheel.现在有一个需求,需要按照C++的代码进行模型加 ...

  7. Category VS Extension 原理详解

    (一)Category 1.什么是Category? category是Objective-C 2.0之后添加的语言特性,别人口中的分类.类别其实都是指的category.category的主要作用是 ...

  8. 【leetcode】561. Array Partition I

    原题: Given an array of 2n integers, your task is to group these integers into n pairs of integer, say ...

  9. mysql主备搭建

    mysql主备搭建参考文档https://www.cnblogs.com/clsn/p/8150036.html前提条件:系统:Ubuntu 16.04.6 LTSMySQL版本:5.7.24主库IP ...

  10. idea自动在文件头中添加作者和创建时间

    设置路径 : File -> Settings -> Editor -> File and Code Templates 定制头模板: /** * @Author: chancy * ...