vue-cli与后台数据交互增删改查

最新推荐文章于 2024-04-08 21:39:11 发布

weixin_30849591

最新推荐文章于 2024-04-08 21:39:11 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端数据库 ViewUI

原文链接：http://www.cnblogs.com/Kyaya/p/10154619.html

本文介绍如何在Vue项目中解决跨域问题，通过配置proxyTable代理设置，实现前后端分离开发。同时，详细讲解使用vue-resource进行HTTP请求的方法，包括GET、POST等请求方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装vue-resource

npm install vue-resource --save

2.访问后台地址，在vue中会出现跨域的问题，以下为解决方案

　　在config下的index.js 中配置proxyTable代理设置

proxyTable: {
        '/api':{
            target:'http://19******:8080',
            changeOrigin:true,//允许跨域
            pathRewrite:{
                '/api':'/'
            }
        }
    },

3.地址配置完了，就可以开始访问后台，获取数据了
　我用的是vue-resource,有多种方式 get，post，json,jsonp，具体使用方法，可以查看官网

this.$http.get('url').then(response => { 
        console.log(response.body); 
      }, response => { 
        console.log(response); 
  });

this.$http.post(('url'),data ,{emulateJSON:false}).then(response => { 
       console.log(response.body); 
      }, response => { 
       console.log(response); 
  });