Vue前端如何实现与后端进行数据交互

目录
  • Vue前端与后端数据交互
    • 安装
    • 在main.js文件引入
    • 使用
  • 启动vue和前后端连接
    • 直接上图

Vue前端与后端数据交互

安装

npm install axios --save

在main.js文件引入

import Axios from 'axios';//后台交互
Vue.prototype.$http=Axios
//defaults 设置全局默认路径
Axios.defaults.baseURL="/"

使用

//第一种
this.$http.post('/index/customer/',{//里面写要传的值}).then(function(res) {
    // console.log('这是返回的客户数据');
    // console.log(res.data.data);
    this.customerArr = res.data.data
});//如果是get请求就把post换成get
//第二种，推荐使用该方法
this.$http({
                url: '/index/patchBase/',
                method: 'get',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                params:{}//传值 如：params:{id:1,name:"gw"}
            }).then(res => {
                console.log('数据接收');
                console.log(res.data.data);
            });
this.$http({
                url: '/index/patchBase/',
                method: 'post',
                headers: { "Content-Type": "multipart/form-data" },
                data:{}//传值
            }).then(res => {
                console.log('数据接收');
                console.log(res.data.data);
            });

需要注意的是 post、get请求的请求头数据不一样，传值方法不一样：get是params,post请求是用data传值

启动vue和前后端连接

直接上图

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue与后端数据交互(ajax)：vue-resource

    详解vue与后端数据交互(ajax)：vue-resource

    本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <sc

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

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

  • vue最简单的前后端交互示例详解

    一.学习 vue 面临的问题 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳

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

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

  • Vue前端如何实现与后端进行数据交互

    Vue前端如何实现与后端进行数据交互

    目录 Vue前端与后端数据交互 安装 在main.js文件引入 使用 启动vue和前后端连接 直接上图 Vue前端与后端数据交互 安装 npm install axios --save 在main.js文件引入 import Axios from 'axios';//后台交互 Vue.prototype.$http=Axios //defaults 设置全局默认路径 Axios.defaults.baseURL="/" 使用 //第一种 this.$http.post('/index/

  • VUE前端从后台请求过来的数据进行转换数据结构操作

    我就废话不多说了,大家还是直接看代码吧` let label(){ let _this = this; let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pageSize let params ={ offset:_offset,//分页偏移量 limit:_limit,//分页查询数量 } labelView(",params).then(res=>{ _this.list = res.data.dat

  • 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

  • 前端如何调用后端接口进行数据交互详解(axios和SpringBoot)

    目录 一.介绍 二.项目结构 三.代码编写 四.运用 总结 前端调用后端接口,获得数据并渲染 一.介绍 一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步: 前端向后端发起请求后端接口接收前端的参数后,开始层层调用方法处理数据后端将最终数据返回给前端接口前端请求成功后,将数据渲染至界面 对于初学者而言,前后端交互感觉十分困难,其实并不难,现在,我们做一个小例子,在例子中,大家就明白了. 二.项目结构 前端技术:axios 后端技术:SpringBoot(这个也无所谓,但是你一定要有

  • SpringBoot后端进行数据校验JSR303的使用详解

    SpringBoot后端进行数据校验JSR303的使用详解

    如果只想查看注解,请跳到文章末尾部分 简介 在前后端进行数据交互中,在前端把数据传送到后端前,一般会先进行校验一次,校验成功之后,才把数据发送到后端.但是我们在服务端还得在对数据进行一次校验.因为请求数据发送的链接很容易获取,可以不经过前端界面,使用postman等工具直接向后台发送数据,这就可能造成发送的数据是不合法的情况. 项目创建 首先创建一个springboot项目 使用的springboot版本为:(本文代码以该版本为准,不同版本springboot,在下面内容会出现一些差异) <pa

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

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

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

  • Django在视图中使用表单并和数据库进行数据交互的实现

    Django在视图中使用表单并和数据库进行数据交互的实现

    目录 写在前面 目结构及代码 项目结构 路由设置 数据库配置 定义模型 定义表单 修改模板 视图函数 记录感受 写在前面 博主近期有时间的话,一直在抽空看Django相关的项目,苦于没有web开发基础,对JavaScript也不熟悉,一直在从入门到放弃的边缘徘徊(其实已经放弃过几次了,如下图,一年前的笔记).总体感受web开发要比其他技术栈难,前后端技术都有涉及.如果没有实体项目支撑的话,很难学下去.但不管怎样,学习都是一件痛苦的事情,坚持下去总会有收获. 本博客记录的是<Django web

  • 微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染 实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:

  • vue前端和Django后端如何查询一定时间段内的数据

    vue前端和Django后端如何查询一定时间段内的数据

    前言 在开发过程中经常会遇到筛选查询之类的功能,比如查询某一个时间段内的数据而非所有数据. 这样我们就需要向后端发送时间段的参数,然后在后端处理查询. 这里以Django后端和vue前端的简单例子来记录大致实现. 后端数据库 这里是一些简单的数据重要的是date,我们需要根据日期来筛选返回到前端. models.py class CountDownSign(models.Model): name = models.CharField(max_length=1000) date = models.

  • vue前端优雅展示后端十万条数据面试点剖析

    vue前端优雅展示后端十万条数据面试点剖析

    目录 前置工作 后端搭建 前端页面 直接渲染 setTimeout分页渲染 requestAnimationFrame 文档碎片 + requestAnimationFrame 懒加载 虚拟列表 前置工作 如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端) 先把前置工作给做好,后面才能进行测试 后端搭建 新建一个server.js文件,简单起个服务,并返回给前端10w条数据,并通过nodemon server.js开启服务 没有安装no

随机推荐