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谢谢!

转载于:https://www.cnblogs.com/qing619/p/7746040.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454221.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jetty部署多个web应用及将jetty配置成服务

通常情况下一个jetty部署一个java web应用,但一台服务只部署一个应用可能会造成资源浪费,所以有时候可能在一台服务器上要部署多个web应用。下面我们以一台server部署两个web应用为例。 服务器环境:安装JDK,2个jetyy9 重点&#x…

程序员成长的10个阶段

我的程序员成长之路 程序员的成长经历往往很相似,大部分的人走过了最前面相同的一段路,而有的人则走得更远。总结自己这些年来的历程,这也许能让年轻的程序员少走一些弯路,成长得更快;或许更好一些,能让大家…

mapper注解的主要作用_Mybatis中mapper的xml解析详解

上一篇文章分析了mapper注解关键类MapperAnnotationBuilder,今天来看mapper的项目了解析关键类XMLMapperBuilder。基础介绍回顾下之前是在分析configuration的初始化过程,已经进行到了最后一步mapperElement(root.evalNode("mappers"))&#x…

机器学习之梯度下降法(GD)和坐标轴下降法(CD)

梯度下降法 梯度下降法(Gradient Descent, GD)常用于求解无约束情况下凸函数(Convex Function)的极小值,是一种迭代类型的算法,因为凸函数只有一个极值点,故求解出来的极小值点就是函数的最小值…

阿里云Https部署网站

0、开始之前 文章图片很多,注意流量 首先你得准备好一个已经备案成功的域名,并且有一个在阿里云的服务器部署了的网站。 然后就是你迫切的希望升级网站为HTTPS部署。 那么我们开始吧! 1、申请CA证书 1.1登录阿里云控制台,选择菜单…

mysql数据库多实例部署

本文系统:rhel5.8 ip : 192.168.100.150 数据库版本:mysql-5.6.15 1、创建部署mysql服务账号: 1234[rootdaf ~]# useradd -d /opt/mysql mysql [rootdaf ~]# echo "mysql" |passwd --stdin mysql Changing password for user mysq…

Python 第三方模块之 numpy.linalg - 线性代数

目录 numpy.linalg.det() 行列式 numpy.linalg.solve() 方程的解 numpy.linalg.inv() 逆矩阵 np.linalg.eig 特征值和特征向量 np.linalg.svd 奇异值分解 np.linalg.pinv 广义逆矩阵(QR分解) numpy.linalg模块包含线性代数的函数。使用这个模块&am…

rabbitmq direct 多个消费者_一文解析 RabbitMQ 最常用的三大模式

Direct 模式所有发送到 Direct Exchange 的消息被转发到 RouteKey 中指定的 Queue。Direct 模式可以使用 RabbitMQ 自带的 Exchange: default Exchange,所以不需要将 Exchange 进行任何绑定(binding)操作。消息传递时,RouteKey 必须完全匹配才会被队列接…

程序员成长最快的环境

除开五大或者ThoughtWorks这种要什么有什么,进去做打字也能光耀门楣的不谈。如果是嫁到一个普通软件公司,怎样的环境才能最快的成长呢?首先基本的 公司项目管理水平是必要的;其次是稳健而不保守的公司技术选型和一班能沟通的同事。…

【BZOJ4254】Aerial Tramway 树形DP

【BZOJ4254】Aerial Tramway 题意&#xff1a;给你一座山上n点的坐标&#xff0c;让你在山里建m条缆车&#xff0c;要求缆车两端的高度必须相等&#xff0c;且中间经过的点的高度都小于缆车的高度。并且不能存在一个点位于至少k条缆车的下方。求缆车的最大总长度。 n,m<200,…

C# 读取保存App.config配置文件的完整源码参考

最近出差在北京做一个小项目&#xff0c;项目里需要读取配置文件的小功能&#xff0c;觉得挺有参考意义的就把代码发上来给大家参考一下。我们选择了直接用微软的读取配置文件的方法。 这个是程序的运行设计效果&#xff0c;就是把这些参数可以进行灵活设置&#xff0c;灵活保存…

TensorFlow 简介

TensorFlow介绍 Tagline&#xff1a;An open-source software library for Machine Intelligence.Definition&#xff1a;TensorFlow TM is an open source software library fornumerical computation using data flow graphs.GitHub&#xff1a;https://github.com/tensorfl…

webbrowser设置为相应的IE版本

注册表路径&#xff1a; HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION 或者HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION 究竟选择哪一个…

jmeter压力测试_用Jmeter实现对接口的压力测试

一、多个真实用户对接口的压力测试1. 获取多个真实用户的token的两种方法&#xff1a;1)第一种&#xff1a;让开发帮忙生成多个token(多个用户账户生成的token)&#xff0c;导出为csv格式的文件(以下步骤均以该方法为基础)2)第二种&#xff1a;自己设置多个用户账户和密码&…

程序员成长之路(转)

什么时候才能成为一个专业程序员呢&#xff1f;三年还是五年工作经验&#xff1f;其实不用的&#xff0c;你马上就可以了&#xff0c;我没有骗你&#xff0c;因为专业程序员与业余程序员的区别主要在于一种态度&#xff0c;如果缺乏这种态度&#xff0c;拥有十年工作经验也还是…

嵌入式开发——PWM高级定时器

学习目标 加强掌握PWM开发流程理解定时器与通道的关系掌握多通道配置策略掌握互补PWM配置策略掌握定时器查询方式掌握代码抽取优化策略掌握PWM调试方式学习内容 需求 点亮8个灯,采用pwm的方式。 定时器 通道 <

解决虚拟机时间引起的奇怪问题

一直使用得好好的虚拟机最近出了一个奇怪问题在虚拟机装好的lamp在客户端访问phpmyadmin的时候,使用firefox登录没问题,但是使用IE不行总是停留在登录的界面,而且没有提供任何的出错信息,就连在apache的日志里面也看不到.注意到同样访问的时候,在IE上显示的转向的url是[url]htt…

TensorFlow 基本操作

Tensorflow基本概念 图(Graph):图描述了计算的过程&#xff0c;TensorFlow使用图来表示计算任务。张量(Tensor):TensorFlow使用tensor表示数据。每个Tensor是一个类型化的多维数组。操作(op):图中的节点被称为op(opearation的缩写)&#xff0c;一个op获得/输入0个或多个Tensor…

03_zookeeper伪集群安装

一句话说明白&#xff1a;在1台机器上模拟多台机器&#xff0c;对外提供服务 在理解zookeeper集群安装方法的基础上&#xff0c;本文描述如何将1个机器模拟为3个节点的zookeeper集群&#xff0c;建议先参考阅读本文的前一期 zookeeper伪集群安装总结 在本机上通过复制的方式&am…

python合成语音_MicroPython动手做(25)——语音合成与语音识别

6、AB按键切换语言合成项目[mw_shl_codepython,true]#MicroPython动手做(25)——语音合成与语音识别#AB按键切换语言合成项目from mpython import *import networkimport timeimport ntptimefrom xunfei import *import audiomy_wifi wifi()my_wifi.connectWiFi("zh"…