vuejs前后端数据交互之从后端请求数据的实例

本文将向大家介绍一种用vue-resource从后端请求数据的方法。

比如说从后端请求一张表过来，

（1）首先，在data中return一个msg:[]数组来接收表的数据；

（2）在方法中定义一个请求函数，比如我们这里函数名定义为showDetails；

methods:{

   showDetails:function(){
     this.$http.get(baseURL+“api/条件”).then(function(res){
      this.msg = res.body;
     });

}

}

这里baseURL项目的路径，如果项目部署在服务器上面一般格式为www.XXX.com/项目名；之后的api是后端封装的api接口；然后条件就是对表的查询，删除等语句。比如对名为student的表进行查询，需要获取studentID为40001的学生信心，则查询语句可写为‘query?table=student&studentIDeq=40001',需要注意的是与有关数据库的操作字段（通俗点讲，可以理解为后端定义的字段）要加引号，而前端定义的字段要放在引号外面；

（3）最后，别忘了这个请求操作是没有调用，是默认执行的，所以要在mounted里面实时执行；

mounted: function (){
   this.showDetails();
  }

好了，这个函数就完成了，你可以通过浏览器控制台的network查看从后端取得的数据，或者通过console打印输出也可以看到啦！！！

以上这篇vuejs前后端数据交互之从后端请求数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js与后台数据交互的实例讲解

    第一步:引入js库: <script src="../js/common/vue.min.js"></script> <script src="../js/common/vue-resource.js"></script> 前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

  • vue.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • 详解vue前后台数据交互vue-resource文档

    详解vue前后台数据交互vue-resource文档

    这两天学习了vue-resource插件个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通过插件的形式实现了基于AJAX,JSPNP等技术的服务端通信. vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口,并且提供了全局方法和VUe组件实例方法. 使用的版本是

  • vue表单数据交互提交演示教程

    欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额! 1. 客户端 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://

  • Vue表单类的父子组件数据传递示例

    使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明. 与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同. 1.传递基本类型数据 当子

  • vuejs前后端数据交互之从后端请求数据的实例

    本文将向大家介绍一种用vue-resource从后端请求数据的方法. 比如说从后端请求一张表过来, (1)首先,在data中return一个msg:[]数组来接收表的数据: (2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails: methods:{ showDetails:function(){ this.$http.get(baseURL+"api/条件").then(function(res){ this.msg = res.body; }); } } 这

  • AJAX SpringBoot 前后端数据交互的项目实现

    AJAX SpringBoot 前后端数据交互的项目实现

    目录 1.Ajax概述 2.基于JQuery的AJAX语法 1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and XML“,即 ”异步的 JavaScript 和 XML“.其核心是通过 JavaScript 的 XMLHttpRequest 对象,以一种异步的方式,向服务器发送数据请求,并且通过该对象接收请求返回的数据,从而实现客户端与服务器端的数据交互. 优点:Ajax 能够刷新指定的页面区域(局部刷新),而不是刷新整个页面,从而减少客户端和

  • Python Flask前后端Ajax交互的方法示例

    Python Flask前后端Ajax交互的方法示例

    之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax 一. post方法 1.post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件. (1)数据附在URL里(请求路径),发送到后端. /*前端HTML<script>里:*/ $.post("/js_post/"+ip, data_to_backend, function(data){alert("success "

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • vue异步请求数据重新渲染方式

    目录 vue异步请求数据重新渲染 下面介绍一种方法解决 自定义组件异步获取数据重新渲染 视图层 逻辑层 vue异步请求数据重新渲染 vue异步请求数据时往往不能及时更新, 下面介绍一种方法解决 export default {         name: "pic",         created() {            this.getList();         },         data(){             return{num:[]}         }

  • 如何理解Vue前后端数据交互与显示

    如何理解Vue前后端数据交互与显示

    一.技术概述 将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面,再传值给后端.该技术是Web开发必备,是前后端交互的纽带.难点在于获取后端数据并且防止数据联动. 二.技术详述 1. 从接口获取后端数据 (1) 仔细查看后端所传数据的类型.主要是区分数组和单个数据.查看后端的请求方式,区分post或者get. (2) 首先,在data中return一个xxxData:[]数组或一个变量xxxData:<类型>来接收后端传来的数据. (3) 在方法中定义一个请求函数

  • SpringBoot前后端json数据交互的全过程记录

    SpringBoot前后端json数据交互的全过程记录

    目录 一.参考文献 二.勇敢尝试 三.最终选择交互方式 总结 一.参考文献 原生Ajax与JQuery Ajax SpringMVC接受JSON参数详解及常见错误总结 提交方式为 POST 时, JQuery Ajax 以 application/x-www-form-urlencoded 上传 JSON对象 , 后端用 @RequestParam 或者Servlet 获取参数. JQuery Ajax 以 application/json 上传 JSON字符串, 后端用 @RquestBody

  • SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式

    SpringBoot实现前后端、json数据交互以及Controller接收参数的几种常用方式

    目录 前言 获取参数的几种常用注解 一.请求路径参数get请求 二.Body参数POST请求 四.HttpServletRequest 五.参数校检 最终选择交互方式 参考文献 总结 前言 现在大多数互联网项目都是采用前后端分离的方式开发,前端人员负责页面展示和数据获取,后端负责业务逻辑处理和接口封装.当与前端交互的过程当中,常用json数据与前端进行交互,这样想取出前端传送过来的json数据的时候,就需要用到@RequestBody这个注解.@RequestBody注解用于读取http请求的内

  • python+html实现前后端数据交互界面显示的全过程

    python+html实现前后端数据交互界面显示的全过程

    目录 前言 1.python开发工具 2.项目创建 总结 前言 最近刚刚开始学习如何将python后台与html前端结合起来,现在写一篇blog记录一下,我采用的是前后端不分离形式. 话不多说,先来实现一个简单的计算功能吧,前端输入计算的数据,后端计算结果,返回结果至前端进行显示. 1.python开发工具 我选用的是pycharm专业版,因为社区版本无法创建django程序 2.项目创建 第一步:打开pycharm,创建一个django程序 蓝圈圈起来的为自定义的名字,点击右下角的create

随机推荐