vue数据请求
我是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数据请求的更多相关文章
- VUE 数据请求和响应(axios)
1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库,用于浏览器和 nodejs 的 HTTP 客户端.具有以下特征: 从浏览器中创建 XM ...
- vue数据请求显示loading图
一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...
- vue 数据请求
作者QQ:1095737364 QQ群:123300273 欢迎加入! 要引入模块: vue-resource 1.在package.json中的dependencies中添加vue ...
- vue axios数据请求get、post方法的使用
我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- 02 Vue之vue对象属性功能&axios数据请求实现
1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...
- day 74 vue 2 axios数据请求 以及组件的学习
前情提要: vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...
- 手把手教你vue配置请求本地json数据
本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...
- vue开发请求本地模拟数据的配置方法(转)
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
随机推荐
- 工厂模式 and 单例模式
工厂模式:使用工厂类使创建类与使用类分离,从而提高代码的易维护性,可扩展性等 工厂模式分位简单工厂模式和工厂方法模式 使用简单工厂模式的步骤: 1.创建父类及其子类 父类中有[ ...
- Geronimo tomcat: 在 Apache Geronimo 插件体系中将 Apache Tomcat 这个优秀的 Web 容器整合至其中
Apache Geronimo 灵活的插件体系将 Tomcat, OpenJPA, OpenEJB, ActiveMQ 等第三方组件集成至其中.本文从多角度介绍了在 Apache Geronimo 中 ...
- Java SpringMVC小白的成长(一)
如果你是一个小白,请跟着我走,我会让你少走弯路,如果你是大牛,那么多谢大牛可以给我提提建议. 说实话,来公司这么久,一直在做的是维护与修改bug.(我的语言是php,来公司才开始接触java). 要毕 ...
- 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 ...
- MongoDB 分布式架构 复制 分片 适用性范围
转载自 http://www.mongoing.com/archives/3573
- 去掉 Warning:$HADOOP_HOME is deprecated
修改配置文件/etc/profile,增加环境变量HADOOP_HOME_WARN_SUPPRESS=1, 保存退出,再次启动hadoop,就不会出现警告信息了
- JVM菜鸟进阶高手之路二(JVM的重要性,Xmn是跟请求量有关。)
转载请注明原创出处,谢谢! 今天看群聊jvm,通常会问ygc合适吗? 阿飞总结,可能需要2个维度,1.单位时间执行次数,2.执行时间 ps -p pid -o etime 查看下进程的运行时间, 17 ...
- 循环语句for,while,until,select
循环 *循环执行 将某代码段重复运行多次 重复运行多少次: 循环次数事先已知 循环次数事先未知 有进入条件和退出条件 *常见的循环语句有for,while,until for循环 for 变量名 n ...
- [UIKit学习]08.关于自定义控件
自定义控件 选用xib用自定义view代码与xib相关联 示例代码 + (instancetype)shopView { return [self shopViewWithShop:nil]; } + ...
- 移动端与PHP服务端接口通信流程设计(增强版)
增强地方一: 再增加2张表,一个接口表,一个授权表,设计参考如下: 接口表 字段名 字段类型 注释 api_id int 接口ID api_name varchar(120) 接口名,以"/ ...