vue 连接后台
在 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 连接后台的更多相关文章
- 基于Vue实现后台系统权限控制
原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...
- 蒙层嵌套pdf以及连接后台
一.在本地浏览pdf(直接将element-dialog 和 iframe相结合)需要将要浏览的pdf放入static文件夹下面 <el-button type="text" ...
- 在addroutes后,$router.options.routes没有更新的问题(手摸手,带你用vue撸后台 读后感)
参照<着手摸手,带你用vue撸后台>一文,本人做了前端的权限判断 https://segmentfault.com/a/1190000009275424 首先就是在addroutes后,$ ...
- Vue Admin - 基于 Vue & Bulma 后台管理面板
Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...
- 【转】手摸手,带你用vue撸后台 系列二(登录权限篇)
前言 拖更有点严重,过了半个月才写了第二篇教程.无奈自己是一个业务猿,每天被我司的产品虐的死去活来,之前又病了一下休息了几天,大家见谅. 进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常 ...
- 【转】手摸手,带你用vue撸后台 系列三(实战篇)
前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...
- 【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...
- 【转】手摸手,带你用vue撸后台 系列一
前言 说好的教程终于来了,第一篇文章主要来说一说在开始写业务代码前的一些准备工作吧,但这里不会教你webpack的基础配置,热更新怎么做,webpack速度优化等等,有需求的请自行google. 目录 ...
- vue开发后台管理系统有感
使用vue开发后台近一个月,今天终于完成得差不多了,期间也遇到很多的问题,所以利用现在的闲暇时间做个总结 使用element-ui基础,这次使用了vue-element-admin(github地址) ...
随机推荐
- swift使用查阅资料备份1
SnapKit RxSwift R.swift https://www.jianshu.com/p/68e12b966d86 iOS - RxSwift 项目实战记录 https://blog.csd ...
- BZOJ2440: [中山市选2011]完全平方数 容斥原理_莫比乌斯函数
emmm....... 数学题都不友好QAQ...... Code: #include <cstdio> #include <algorithm> #include <c ...
- 03 Winform基础
补充: MD5加密 static void Main(string[] args) { string s = GetMD5("123"); Console.WriteLine(s) ...
- 移动端优先的flex三栏布局
默认情况下先显示移动端,通过 @media 属性适配屏幕变化 使用flexbox相关的CSS属性 display: flex; (父元素) flex-wrap: nowrap | wrap | wra ...
- django-8-django模型系统
<<<表关系实现>>> 1.OneToOne models.OneToOneField('another_table', on_delete=models.CAS ...
- Hdu 1429 胜利大逃亡(续) (bfs+状态压缩)
这道题的钥匙只有10个,可以压成二进制 这里有有句非常关键的话 (k & door[x][y]) == door[x][y] 一开始以为只要(k & door[x][y]) ==1就可 ...
- 实现双向数据绑定mvvm
实现双向数据绑定mvvm
- Linux用shell链接上传文件
yum install lrzsz 安装lrzsz ,直接拖拽到黑框框就可以上传了 或者使用 rz 命令,会弹出选择文件的框框
- (转)redis源代码分析 – event library
每个cs程序尤其是高并发的网络服务端程序都有自己的网络异步事件处理库,redis不例外. 事件库仅仅包括ae.c.ae.h,还有3个不同的多路复用(本文仅描述epoll)的wrapper文件,事件库封 ...
- angular-Scope
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 当你在 Ang ...