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.pswp.cn/news/454221.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/454221.shtml
英文地址,請注明出處:http://en.pswp.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"…