在 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. Codeforces Round #499 (Div. 2) D. Rocket_交互题_二分

    第一次作交互题,有点不习惯. 由于序列是循环的,我们可以将一半的机会用于判断当前是否是在说谎,另一半的机会用于二分的判断. 对于判断是否实在说谎,用1判断即可.因为不可能有比1还小的数. 本题虽然非常 ...

  2. prettier 与 eslint 对比

    Linters have two categories of rules: 代码修正一般有两种规则: Formatting rules: eg: max-len, no-mixed-spaces-an ...

  3. Unity图集分割

    using System.IO;using UnityEngine;using UnityEditor; public class TestSaveSprite{ [MenuItem("LL ...

  4. django-4-模板标签,模板继承

    <<<模板标签>>> {% for %}{% endfor %} 循环 {% if %}{% elif %}{% else %}{% endif %} 判断 {% ...

  5. hdu 3449 Consumer (依赖01背包)

    题目: 链接:pid=3449">点击打开链接 题意: 思路: dp[i][j]表示前i个箱子装j钱的材料可以得到的最大价值. 代码: #include<iostream> ...

  6. iOS给label加入下划线

    UILabel *myLabel = [[UILabelalloc] ,, , )]; NSMutableAttributedString *content = [[NSMutableAttribut ...

  7. C 语言运算符优先级(记忆口诀)

    优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数名(形參表)   . 成员选择(对象) 对象.成员名   -& ...

  8. m_Orchestrate learning system---二、如何实现验证码自动点击刷新

    m_Orchestrate learning system---二.如何实现验证码自动点击刷新 一.总结 一句话总结:传过去的url带随机数来避免读取缓存 onclick="this.src ...

  9. CCS+C6678LE开发记录11:多核协作(IPC)入门

    为更好地发挥C6678的多核性能,需要用到多核协作.幸运的是,我们可以使用官方提供的IPC模块. IPC=Inter-Processor Communication, 核间通信,粗略来说就是多核之间进 ...

  10. javax.validation参数校验

    在实体字段加注解: /** * 机构名称 */ @ApiParam(name = "orgName", value = "机构名称") @Size(max = ...