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 ...
随机推荐
- PHP连接数据_insert_id介绍
对于自增长的主键列不好取值的情况,php提供了一个变量来取值,insert_id $db = new MySQLi("localhost","root",&qu ...
- Python2.7笔记——常用技术点汇总
目录 · 概况 · 安装 · 基础 · 基础语法 · 数据类型 · 变量 · 常量 · 字符编码 · 字符串格式化 · list · tuple · dict · set · if语句 · for语句 ...
- Linux系统下用户与组的管理
Linux系统下用户与组的管理 一.用户及组基本概述 Linux 系统上,用户管理是基于用户名和密码的方式进行资源的分配. 1.uid(用户身份标识) (1)root用户 uid为0 (2)普通用户: ...
- 2017年9月19日 JavaScript语法操作
关于JavaScript个人还是觉得比较有意思的 {在</html>后面写或者在</body>前面写(必须紧贴</body>)} <script> va ...
- 小甲鱼:Python学习笔记002_数组_元组_字符串
创建普通数组 >>> member=["山东黄金","九阳股份"] >>> member ['山东黄金', '九阳股份'] ...
- MongoDB 所支持的数据类型 创建和删除集合 创建和删除数据库
数据类型 MongoDB 支持如下数据类型: String:字符串.存储数据常用的数据类型.在 MongoDB 中,UTF-8 编码的字符串才是合法的. Integer:整型数值.用于存储数值.根据你 ...
- popOver 弹出框简单使用
1.仿QQ弹出框 1.1用到的知识点 1.1.1如何调整弹出框的大小(这里弹出的也是控制器) 这里已经有讲解过http://blog.csdn.net/iostiannan/article/detai ...
- pytorch实现VAE
一.VAE的具体结构 二.VAE的pytorch实现 1加载并规范化MNIST import相关类: from __future__ import print_function import argp ...
- EOutOfResources字符异常
近日,用Delphi编程时,遇到一个莫名其妙的异常:EOutOfResources,这是一个可以重复再现的异常.开始以为是程序中创建的对象太多,导致占用了过多的资源,引起了这个异常.于是在代码中将许多 ...
- 【模版】AC自动机(简单版)
题目背景 这是一道简单的AC自动机模版题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 题目描述 给定n个模式串和1个文本串,求有多少个模式串在文本 ...