在 index.js 中可以配置后台的地址;代理的方式;

 这个文件在 config 中

  

  proxyTable: {
// 连接后台
'/api':{
target:"http://new.windhouse.com", //后台地址
changeOrigin:true, //跨域代理
pathRewrite: {
'^/api':"" //路径重写
},

然后 安装 axios 依赖

npm install axios

我是在main.js 里面定义了axios

//main.js
import axios from 'axios'
Vue.prototype.$http = axios //在其他组件中使用
this.http.post()

之后就使用 axios的方式对接上后台的api就可以了

 this.$http.post('/api',
qs.stringify({
'phone':this.fromlist.phone,
'password':this.fromlist.password
})
)
.then(this.PostFrommsg)
.catch((err)=>{console.log(err)}) //这里只是我习惯把成功函数写在别的函数里面
PostFrommsg (res){
console.log(res)
}

上面使用到的   “  qs   ” ,是使用了另外一个依赖

因为 ajax 跟 axios  的传值方式有些不一样所以需要转换一下

安装调用一下就可以了

npm install qs
//然后在项目里面使用就可以了

import qs from 'qs'
qs.stringify({  XXX   })
 

vue 连接后台的更多相关文章

  1. 基于Vue实现后台系统权限控制

    原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...

  2. 蒙层嵌套pdf以及连接后台

    一.在本地浏览pdf(直接将element-dialog 和 iframe相结合)需要将要浏览的pdf放入static文件夹下面 <el-button type="text" ...

  3. 在addroutes后,$router.options.routes没有更新的问题(手摸手,带你用vue撸后台 读后感)

    参照<着手摸手,带你用vue撸后台>一文,本人做了前端的权限判断 https://segmentfault.com/a/1190000009275424 首先就是在addroutes后,$ ...

  4. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  5. 【转】手摸手,带你用vue撸后台 系列二(登录权限篇)

    前言 拖更有点严重,过了半个月才写了第二篇教程.无奈自己是一个业务猿,每天被我司的产品虐的死去活来,之前又病了一下休息了几天,大家见谅. 进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常 ...

  6. 【转】手摸手,带你用vue撸后台 系列三(实战篇)

    前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...

  7. 【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)

    前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...

  8. 【转】手摸手,带你用vue撸后台 系列一

    前言 说好的教程终于来了,第一篇文章主要来说一说在开始写业务代码前的一些准备工作吧,但这里不会教你webpack的基础配置,热更新怎么做,webpack速度优化等等,有需求的请自行google. 目录 ...

  9. vue开发后台管理系统有感

    使用vue开发后台近一个月,今天终于完成得差不多了,期间也遇到很多的问题,所以利用现在的闲暇时间做个总结 使用element-ui基础,这次使用了vue-element-admin(github地址) ...

随机推荐

  1. ASP版_阿里大于短信API Demo

    阿里大于申请地址:http://www.alidayu.com 阿里大于短信发送Demo: ******index.asp************* <%@LANGUAGE="VBSC ...

  2. gbk编码

    GBK 编码   GBK编码范围:8140-FEFE,汉字编码范围见第二节:码位分配及顺序. GBK编码,是对GB2312编码的扩展,因此完全兼容GB2312-80标准.GBK编码依然采用双字节编码方 ...

  3. HDU 2150 Pipe( 判断线段相交水 )

    链接:传送门 题意:略 思路:数据量很小,直接暴力所有线段 /********************************************************************* ...

  4. HDU 1757 A Simple Math Problem( 矩阵快速幂 )

    <font color = red , size = '4'>下列图表转载自 efreet 链接:传送门 题意:给出递推关系,求 f(k) % m 的值, 思路: 因为 k<2 * ...

  5. [luogu2592 ZJOI2008] 生日聚会 (计数dp)

    题目描述 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: 对于任意连续 ...

  6. adb 相关问题总结

    1. adb shell权限问题$ su //root权限来启动adb server$ adb kill-server && adb start-server* daemon not ...

  7. 原生JS封装ajax以及request

    一.封装原生的xhr为ajax类 xhr以及用法见之前的文章 1.根据url确定请求的头部以及别的信息. var _headerConfig = {}; if(url.indexOf('getcapt ...

  8. Golang-import-introduce

    本文主要讲解golang中import关键字的用法 import( "fmt" ) //然后在代码里面可以通过如下的方式调用 fmt.Println("hello wor ...

  9. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  10. apche本地测试,无法访问此网站