精华内容
下载资源
问答
  • vue使用ajax请求后台数据的方法发布时间:2020-10-15 16:54:41来源:亿速云阅读:108作者:栢白这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧...

    vue使用ajax请求后台数据的方法

    发布时间:2020-10-15 16:54:41

    来源:亿速云

    阅读:108

    作者:栢白

    这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。

    vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)

    第一步:Axios的安装和引入

    1.使用npm安装:$npm install axios -S

    2.在vue项目公共文件(我这里是main.js文件)中引入:import axios from "axios";

    3.但是呢axios跟很多第三方模块不同的一点是它不能直接使用use方法,而是用下面这种方法:Vue.prototype.$axios = axios;

    4.这样呢在methods里用到的时候直接用this.$axios来调用它:this.$axios.get(接口地址).then(function(respon){}).catch(function(error){})

    第二步:axios.get

    1.通过params选项来传递参数的格式是 axios.get('url',{params:{key:value}}).then() ;

    2.本次实例的axios请求后台数据代码://右边学员动态

    getbuyer: function () {

    this.$axios.get(this.GLOBAL.host+"/pub/api/v1/web/list_buyer",{

    params:{

    video_id:this.$route.query.video_id

    }

    }).then(res=>{

    var result = res.data;

    if (result.code == 0) {

    this.buyerArr = result.data;

    }

    })

    }

    解析:

    1)this.GLOBAL.host: 由于一个项目中会有很多次ajax请求,我们可以把域名封装在一个单独的模块中,然后用到的时候直接调用,操作代码如下:首先:在main.js全局文件中import我们的封装模块global:import Global from'../static/config/global'然后:将上面的Global挂载到Vue.prototype:Vue.prototype.GLOBAL = Global;其次:host是在global.js模块中封装的域名:const host = 'http://api.xdclass.net:8081';最后:在每次axios请求的时候,直接 this.GLOBAL.host+"后台接口地址"这样就可以了

    2)params里面是请求接口时的参数,可以一个也可以多个,用“,”隔开;

    3)我这个参数写法 this.$route.query.video_id ,意思是获取到当前页面地址栏中url参数名为video_id的参数值;

    4).then中就是请求接口成功后要做的事情,res是responce的简写,就是成功后后台给我们返回的对象,数据就在这个对象里面;

    5)this.buyerArr 是定义在data中的一个空数组,用来接收后台返回的数据

    以上就是vue使用ajax请求后台数据的方法的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来亿速云行业资讯!

    展开全文
  • vue中post方式提交数据后台无法接收

    万次阅读 2017-08-16 16:44:11
    vue中post方式提交数据后台无法接收

    最近用vue做项目,遇到ajax提交值的问题。

    用post方式提交,后台无法接收到值。百度了半天,各种解决方式都有,下载中间件之类的,都试了。

    最后咨询大牛才知道是数据没有序列化的问题。

    下面是源码:


    因为我没有使用箭头函数,所以需要在外面重新定义this,这样不太好,因为有时忘了的话就很尴尬了。

    不过不知道为什么,我之前用  JSON.stringify( )  完全没有效果。

    改成 :

    var qs = require('querystring')

    qs.stringify(data)

    就ok了。

    展开全文
  • 今天小编就为大家分享一篇解决vue中post方式提交数据后台无法接收的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue上传文件 通过input使用自定义按钮上传本地图片服务器上,写学校项目的时候有用,记录一下免得以后忘记 前端代码 //上传按钮 <div class="btn_select" @click="selectLoadImg"> <div> 点击...

    Vue上传文件

    通过input使用自定义按钮上传本地图片到服务器上,写学校项目的时候有用到,记录一下免得以后忘记

    前端代码

    //上传按钮
    <div class="btn_select" @click="selectLoadImg">
    	<div>
    		点击选择需要上传的图片
    		<input type="file" name="file" accept="image/*"
    		@change="changeImage()"
    		ref="avatarInput"
    		style="display: none"
    		>
    	</div>
    </div>
    <button type="submit" class="btn_submit" @click="upLoad">上传图片</button>
    

    样式可以自己定义
    在这里插入图片描述
    input隐藏,绑定onchange事件,在自定义的div上使用方法出发input的方法

    js的代码

    //js代码
    	selectLoadImg() {
          this.$refs.avatarInput.dispatchEvent(new MouseEvent("click"));
        },
        changeImage() {
          let files = this.$refs.avatarInput.files;
          let that = this;
          function readAndPreview(file) {
            that.file = file
            if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
              let reader = new FileReader();
              reader.onload = function() {
                if (that.imgData !== this.result) {
                  that.imgData = this.result // 这个是base64的数据格式
                }
              };
              reader.readAsDataURL(file);
            }
          }
    
          if (files) {
            [].forEach.call(files, readAndPreview);
          }
        }
        upLoad() {
          let imgFile = this.file;//获取到上传的图片
          let formData = new FormData();//通过formdata上传
          formData.append('file', imgFile)
          formData.append('userId', this.userId)
          this.axios({
            method: "post",
            url: "接口地址",
            data: formData,
            core: true
          })
            .then((res) => {
              console.log(res.data);
            })
            .catch((error) => {
            console.log(error);
          })
    
        },
    

    主要使用了axios以及FormData进行数据的上传

    后台的代码

    使用的是koa框架进行接收前端发送的图片

    const Router = require('koa-router')
    const koa = require('koa');
    const cors = require('koa-cors');
    const koaBody = require('koa-body');
    const fs = require('fs')
    const path = require('path')
    const app = new koa();
    router = new Router()
    
    app.use(cors()); // 用于解决跨域的问题
    app.use(koaBody({
      multipart: true, // 开启文件上传,必须设置为true
      strict: false,
      formidable: {
        maxFileSize: 200 * 1024 * 1024,    // 设置上传文件大小最大限制,默认2M
        keepExtensions: true // 保留文件拓展名
      }
    }))
    app.use(require('koa-static')(__dirname + '/public'))
    
    router.post('/upLoad', async (ctx) => {
      console.log(ctx.request.files.file) // 打印文件内容
       console.log(ctx.request.body) // 打印FormData的护具
      const file = ctx.request.files.file; // 获取上传文件
      // 创建可读流
      const reader = fs.createReadStream(file.path);
      let filePath = path.join(__dirname, 'public/upload/') + `${file.name}`;
      // 创建可写流
      const upStream = fs.createWriteStream(filePath);
      // 可读流通过管道写入可写流
      reader.pipe(upStream);
      console.log(filePath)
      ctx.body = {
        msg: '上传成功!',
        url:filePath
      };
    
    })
    
    // 装载子路由
    router.use('/upLoad', router.routes(), router.allowedMethods())
    // 加载路由中间件
    app.use(router.routes()).use(router.allowedMethods())
    
    app.listen(3000, () => {
      console.log("listening port 3000");
    })
    
    

    新人小白,第一次写博客,之前一直知道博客记录知识很重要,但是人太懒都不想写,导致很多之前用过的东西太久没用了,好多都要重新再去看资料学习,还是乖乖写个博客记录下来吧。

    展开全文
  • vue提交表单数据到后端

    千次阅读 2020-11-10 18:55:18
    前几天使用vue-element-admin框架开发了一个简单的后台管理系统,在开发的过程之中也遇到了一些功能,以及对饿了么框架的使用遇到的一些问题,如何解决问题,记录一下。 ####资料相关 vue-element-admin 推荐指数:...

    前几天使用vue-element-admin框架开发了一个简单的后台管理系统,在开发的过程之中也遇到了一些功能,以及对饿了么框架的使用遇到的一些问题,如何解决问题,记录一下。


    ####资料相关

    vue-element-admin

    推荐指数:star:55k
    Github 地址:https://github.com/PanJiaChen/vue-element-admin
    Demo体验:https://panjiachen.github.io/vue-element-admin/#/dashboard


    今天记录一个功能,提交表单的数据给后端,提交表单时候的请求参数差不多是这样子的,其中有单选框,下选框,(下拉框可以选择一个值,也可以选择多个值),以字符串数组的格式提交。

    请求报文如下

    
    {"questionContent":"题目1","correctAnswer":"正确答案","otherAnswer1":"错误答案1","otherAnswer2":"错误答案2","otherAnswer3":"错误答案3","userGrades":["kinderGarten","firstGrade","threeGrade","sixGrade"],"questionCategory":"简单"}
    

    具体提交格式需要注意:
    1:input输入框提交类型为字符串
    2:radio只能单选,每次只能提交一个,类型为字符串
    3:下拉框(年级)为数组,当选择一个option或者多个option的时候,格式都为字符串数组形式。

    点击按钮,会出现一个弹框,在弹框里面有form表单,填写表单数据,再次点击确定的时候,调用一下保存的接口,将填写的数据提交给后端。

    示例代码

    <template>
      <div class="tab-container">
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
        >添加</el-button>
        <el-dialog :visible.sync="dialogFormVisible">
          <el-form
            :model="questionForm"
            ref="dataForm"
            label-position="left"
            label-width="90px"
            style="width: 400px; margin-left:50px;"
          >
            <el-form-item label="题目" prop="questionContent">
              <el-input type="textarea" :rows="2" v-model="questionForm.questionContent"></el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-radio-group v-model="questionForm.questionCategory" style="margin-right:12px;">
                <el-radio v-for="(radio, index) in subjectList" :key="index" :label="radio">{{radio}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="正确答案" prop="correctAnswer">
              <el-input v-model="questionForm.correctAnswer" />
            </el-form-item>
            <el-form-item label="其他答案1" prop="otherAnswer1">
              <el-input v-model="questionForm.otherAnswer1" />
            </el-form-item>
            <el-form-item label="其他答案2" prop="otherAnswer2">
              <el-input v-model="questionForm.otherAnswer2" />
            </el-form-item>
            <el-form-item label="其他答案3" prop="otherAnswer3">
              <el-input v-model="questionForm.otherAnswer3" />
            </el-form-item>
            <el-form-item label="所属年级">
              <el-select
                v-model="questionForm.userGrades"
                class="filter-item"
                placeholder="选择年级"
                multiple
              >
                <el-option
                  v-for="item in tabMapOptions"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click=" createData() ">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    <script>
    //调用接口
    import { saveSubject } from "@/api/content";
    export default {
      data() {
        return {
          subjectList: ["黄金", "白银", "钻石"],
          input: "",
          tabMapOptions: [
            { label: "幼儿园", key: "kinderGarten" },
            { label: "一年级", key: "firstGrade" },
            { label: "二年级", key: "secondGrade" },
            { label: "三年级", key: "threeGrade" },
            { label: "四年级", key: "fourthGrade" },
            { label: "五年级", key: "fifthGrade" },
            { label: "六年级", key: "sixGrade" },
            { label: "小学以上", key: "gradeSchool" },
          ],
    
          questionForm: {
            questionContent: "",
            correctAnswer: "",
            otherAnswer1: "",
            otherAnswer2: "",
            otherAnswer3: "",
            userGrades: [],
            questionCategory: "",
          },
          dialogFormVisible: false,
        };
      },
      methods: {
        handleCreate() {
          this.questionForm = {
            questionContent: "",
            correctAnswer: "",
            otherAnswer1: "",
            otherAnswer2: "",
            otherAnswer3: "",
            userGrades: [],
            questionCategory: "",
          };
          this.dialogFormVisible = true;
        },
        //添加增加题目
        async createData() {
          let form = null;
          form = this.questionForm;
          const params = form;
          const res = await saveSubject(params);
          console.log(res);
          if (res.code === "0000") {
            this.$message({
              type: "info",
              message: "保存成功",
            });
            this.dialogFormVisible = false;
            this.getQuerySubjectList();
            return;
          }
          this.$message({
            type: "error",
            message: "保存失败",
          });
        },
      },
    };
    </script>
    <style scoped>
    .tab-container {
      margin: 30px;
    }
    </style>
    
    

    查看请求报文:

    提交成功

    在这里插入图片描述

    展开全文
  • vue后台提交数据

    千次阅读 2018-12-21 11:16:00
    alert("提交成功!") }, response => { console.log(response); alert("出问题啦!") }); } }) } }, mounted:function(){ }, created(){ } }     转载于:...
  • Ajax 提交表单或提交数据到后台时没有提交值(后台接收不值)
  • 后台的需要前面传过去的类型: 下面是三种方法: GETTOKEN(){ console.log('开始') //第一种方法 this.queryParam.pageNo=1 this.queryParam.pageSize=10 this.queryParam.sortField='1' this.queryParam....
  • 最近用axios post方式提交数据到后台遇到一点麻烦。。。就是数据传到后台不知道怎么正确解析成想要的形式。 首先 我们要清楚axios post提交方式默认数据提交格式为application/json ,如下:  在前台写出相应...
  • 昨天跟前端vue联调的时候,遇到了前端提交数据,我这边接收不的问题。前端是vue 用axios发送post请求,后台是Springmvc接收数据。 一直在报“Spring MVC Content type 'application/x-...
  • 提交按钮 <md-button type="primary" @click="onSubmit" round>提交</md-button> 绑定的onSubmit事件 onSubmit(){ Dialog.confirm({ title: '确认', content: '确认提交', confirmText: '确定', ...
  • 1.相信你们的准备工作都做好啦,就差提交数据啦。我们直接说提交数据,axios 提交数据和ajax 差别不大,只是在参数提交形式上有点区别,ajax提交的数据放在 data:{}中,而axios 提交的数据需要放在 params{}中。具体...
  • 比如提交一个表单后,等待后端返回数据时给个loading的样式,像下面这样 主要用到的是element ui的el-loading,实现代码如下: onSubmit () { let $this=this let loading = this.$loading({ lock:true, text:...
  • 主要介绍了ajax方式实现注册功能,提交数据到后台数据库完成交互,感兴趣的小伙伴们可以参考一下
  • 用post方式提交后台无法接收值。百度了半天,各种解决方式都有,下载中间件之类的,都试了。 最后咨询大牛才知道是数据没有序列化的问题。 下面是源码: 因为我没有使用箭头函数,所以需要在外面重新定义...
  • vue传数组到后台

    千次阅读 2020-02-25 11:38:47
    使用框架有resful,spring,vue 前台: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <...
  • Vue 模拟请求后台数据

    2019-01-14 21:37:13
    Vue 项目开发过程中,在没有后端支持的情况下,如何模拟请求后台数据呢? 可以在根目录 /static 目录下新建 mock 文件夹,在 mock 文件夹下创建 json 文件来存放模拟数据,例如: index.json 内容如下: //注意:...
  • 问题:vue前端表单数据post提交之后,后台controller拿不值 前言:今天做多条件查询提交表单之后,发现后台拿不值,在后端controller加上@RequestBody还是拿不,最后,使用qs完美解决了问题 项目环境:...
  •  var vue = new Vue({  el: "#container",  data: {  userList: uList  },  methods: {  btnAdd_click: function () {  var user = {  id: 10,  title: "最新消息",  author: "张三",  ...
  • 使用axios post 提交数据后台获取不提交的数据解决方案 一、问题发现 前后端分离使用vue开发,结合axios进行前后端交互数据,一开始使用 get 请求,获取数据,没有发现任何问题,当使用 post请求 传参...
  • vue 请求后台数据

    万次阅读 多人点赞 2017-04-02 23:11:42
    需要引用vue-resource安装请参考https://github.com/pagekit/vue-resource官方文档在入口函数中加入import VueResource from 'vue-resource' Vue.use(VueResource);在package.json文件中加入 "dependencies": { ...
  • 要想接收表单数据,首先要在表单进行数据的绑定,我们可以...index.vue提交jsexport default {data() {return {}},methods: {keyword(e){// 获取表单值let kw = this.keyword;console.log(kw);}}}Author:TANKINGWeb...
  • vue中如何获取后台数据

    千次阅读 2018-01-02 19:44:00
    原文链接:... 需要引用vue-resource 安装请参考https://github.com/pagekit/vue-resource官方文档 在入口函数中加入 import VueResource from 'vue-resource' Vue.use(VueRe...
  • vue 图片上传到后台

    2018-03-22 16:29:08
    //数据读取完成后改变src地址 reader.onload = function(){ that.look.css({"display":"none"}); var image = new Image();//本地缓存一张图片 var imgCur_src = this.result;//获取正在上传的图片 that.img....
  • 调用接口常用的方式是axios,但在调的过程中会遇到很多问题,后台获取不到提交数据\color{red}{后台获取不到提交数据}后台获取不到提交数据是其中之一。 问题\color{blue}{问题}问题 post请求传参时,数据已经...
  • 表单+表格 提交按钮向后台提交数据

    千次阅读 2019-11-18 16:42:41
    1,首先我的表格数据都是读取后台接口出来的数据,表单数据是前端在页面输入才有,但是表格数据默认的都是0,但是通过评委在页面打分,点击提交按钮,把数据提交到后台后台进行处理。 2,需要把姓名的表单数据,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,916
精华内容 5,566
关键字:

vue提交数据到后台

vue 订阅