我是vue菜鸟,第一次用vue做项目,写一些自己的理解,可能有些不正确,欢迎纠正。

vue开发环境要配置本地代理服务。把config文件加下的index.js里的dev添加一些内容,

dev: {
env: require('./dev.env'),
port: 8090,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://xxxxxxxxxx.xxx',//这里是服务器地址额
changeOrigin: true,
pathRewrite: {
'^/api': ''//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
},

  然后就是在main.js文件里添加一下内容:

import axios from 'axios'
Vue.prototype.$axios=axios;

  然后呢就是在src文件夹里创建一个api文件夹,在api文件夹中创建一个api.js文件,在里边简单的处理请求一下是我写的:

//说明一下"/api/api"第一个api是vue接口代理必须要添加的,第二个api是因为我们后台给的接口是api开头的
/*post请求*/
export const getUserListPage = params => { return axios.post('/api/api/user/UserList', params).then(res => res.data); };
/*get请求*/ 
export const addUser = params => { return axios.get('/api/api/user/addUser', { params: params }); };

  最后你就可以在要用到接口的.vue文件里使用了

首先要引入
import {getUserListPage,addUser} from '../../api/getData'
然后在调用
methods: {
//获取用户列表
getUsers() {
let para = {
page: this.page,
name: this.filters.name
};
this.listLoading = true;
getUserListPage(para).then((res) => {
this.total = res.data.total;
console.log(res.data.total);
this.users = res.data.users;
console.log(res.data);
this.listLoading = false;
}).catch((err) => {
console.log(err);
});
},
addSubmit: function () {
this.$refs.editForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.editLoading = true;
let para = Object.assign({}, this.editForm);
para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
addUser(para).then((res) => {
this.editLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['editForm'].resetFields();
this.editFormVisible = false;
this.getUsers();
});
});
}
});
},
}

  第一次使用vue做项目,若发现错误请大神留言纠正,O(∩_∩)O谢谢!

vue数据请求的更多相关文章

  1. VUE 数据请求和响应(axios)

    1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库,用于浏览器和 nodejs 的 HTTP 客户端.具有以下特征: 从浏览器中创建 XM ...

  2. vue数据请求显示loading图

    一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...

  3. vue 数据请求

    作者QQ:1095737364    QQ群:123300273     欢迎加入!   要引入模块: vue-resource 1.在package.json中的dependencies中添加vue ...

  4. vue axios数据请求get、post方法的使用

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...

  5. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  6. 02 Vue之vue对象属性功能&axios数据请求实现

    1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...

  7. day 74 vue 2 axios数据请求 以及组件的学习

    前情提要:   vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...

  8. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

  9. vue开发请求本地模拟数据的配置方法(转)

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

随机推荐

  1. 工厂模式 and 单例模式

    工厂模式:使用工厂类使创建类与使用类分离,从而提高代码的易维护性,可扩展性等 工厂模式分位简单工厂模式和工厂方法模式 使用简单工厂模式的步骤:     1.创建父类及其子类         父类中有[ ...

  2. Geronimo tomcat: 在 Apache Geronimo 插件体系中将 Apache Tomcat 这个优秀的 Web 容器整合至其中

    Apache Geronimo 灵活的插件体系将 Tomcat, OpenJPA, OpenEJB, ActiveMQ 等第三方组件集成至其中.本文从多角度介绍了在 Apache Geronimo 中 ...

  3. Java SpringMVC小白的成长(一)

    如果你是一个小白,请跟着我走,我会让你少走弯路,如果你是大牛,那么多谢大牛可以给我提提建议. 说实话,来公司这么久,一直在做的是维护与修改bug.(我的语言是php,来公司才开始接触java). 要毕 ...

  4. Project Euler 92:Square digit chains C++

    A number chain is created by continuously adding the square of the digits in a number to form a new ...

  5. MongoDB 分布式架构 复制 分片 适用性范围

    转载自 http://www.mongoing.com/archives/3573

  6. 去掉 Warning:$HADOOP_HOME is deprecated

    修改配置文件/etc/profile,增加环境变量HADOOP_HOME_WARN_SUPPRESS=1, 保存退出,再次启动hadoop,就不会出现警告信息了

  7. JVM菜鸟进阶高手之路二(JVM的重要性,Xmn是跟请求量有关。)

    转载请注明原创出处,谢谢! 今天看群聊jvm,通常会问ygc合适吗? 阿飞总结,可能需要2个维度,1.单位时间执行次数,2.执行时间 ps -p pid -o etime 查看下进程的运行时间, 17 ...

  8. 循环语句for,while,until,select

    循环 *循环执行 将某代码段重复运行多次 重复运行多少次: 循环次数事先已知 循环次数事先未知 有进入条件和退出条件 *常见的循环语句有for,while,until for循环 for 变量名 n ...

  9. [UIKit学习]08.关于自定义控件

    自定义控件 选用xib用自定义view代码与xib相关联 示例代码 + (instancetype)shopView { return [self shopViewWithShop:nil]; } + ...

  10. 移动端与PHP服务端接口通信流程设计(增强版)

    增强地方一: 再增加2张表,一个接口表,一个授权表,设计参考如下: 接口表 字段名 字段类型 注释 api_id int 接口ID api_name varchar(120) 接口名,以"/ ...