Vue的一些API理解整理,如何一次引入多次呼叫
在我們做vue專案時通常會創一個config資料夾,裡面一般會包含 api.js和index.js,其中api.js一般用於存放一些url地址,例如
let base = 'http://192.168.1.110:8081/hhdj/'
export default {
login: `${base}login/login.do`,
codeUrl: `${base}validatecode.jsp`,
newsList: `${base}news/newsList.do`
}
或者這樣寫
const serverUrl = 'http://www.fooju.cn/fjw/api.php?'
export default {
serverUrl: 'http://www.fooju.cn/',
map: 'http://online0.map.bdimg.com/tile/?qt=tile',
login: serverUrl + 's=Login/login', /* 登入 */
register: serverUrl + 's=Login/register', /* 註冊 */
對於index.js檔案裡面存放的是將資料傳送給服務端的一些處理,例如
import api from './api'
import axios from 'axios'
axios.defaults.withCredentials = true
let qs = require('qs')
export const login = data => {
console.log('login api')
return axios.post(api.login, qs.stringify(data))
}
export const codeUrl = api.codeUrl
export const getNews = data => {
return axios.get(api.newsList, {params: data})
}
或者
import api from './api'
import axios from 'axios'
var qs = require('qs')
axios.defaults.withCredentials = true
export const getNewsList = params => {
return axios.get (config.getNewsList, {params: params})
}
export const saveNews = formdata => {
return axios.post (config.saveNews, formdata)
}
function createPostParams (obj) {
return qs.stringify(obj)
}
export const login = data => {
return axios.post (config.login, qs.stringify(data))
}
對於index.js檔案中export輸出的方法,我們可以在main.js中一次性引入,然後在vue中的檔案通過this.$api.XXX()呼叫,例如
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import * as api from './config'
//這裡需要注意的是路徑只寫到相應的資料夾下面即可
import mycom from './components/index'
import store from './store/store'
Vue.prototype.$api = api
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(mycom)
Vue.test = function () {
alert()
}
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store:store,
template: '<App/>',
components: { App }
})
在不用的vue檔案中呼叫方法為,
<template>
<div>
<el-input v-model="user.username"></el-input>
<el-input v-model="user.password"></el-input>
<el-input v-model="user.checkcode"></el-input>
<img :src="codeurl" alt="">
<el-button type="sucess" @click="loginUser">提交</el-button>
<!-- <a href="#/demo/111">111</a>
<a href="#/demo/222">222</a>-->
<router-link to="/demo/222">2222</router-link>
<router-link to="/demo/111">1111</router-link>
</div>
</template>
<script>
export default{
data () {
return {
user: {
username: '',
password: '',
checkcode: ''
},
codeurl: ''
}
},
methods: {
loginUser () {
this.$store.commit('setUser',this.user)
this.$router.push('/demo/11')
/*this.$api.login(this.user).then(function (res) {
console.log(res.data)
})*/這裡是呼叫不同方法的地方this.$api.login()
}
}
}
</script>
<style scoped></style>
相關推薦
Vue的一些API理解整理,如何一次引入多次呼叫
在我們做vue專案時通常會創一個config資料夾,裡面一般會包含 api.js和index.js,其中api.js一般用於存放一些url地址,例如 let base = 'http://192.168.1.110:8081/hhdj/' export d
關於vue下跨域問題,一看就明白!
最終還是遇到了跨域問題,經過一下午的各種嘗試終於成功的掉到了想要的東西,下面就來寫一下是如何實現的,也算是給後來者填個坑: 你需要做一個反向代理的東西開啟你的vue專案的config資料夾下的index.js 然後找到以下的程式碼: dev:
Vue開發環境搭建全過程,一步一個坑
Vue這裡就不多作介紹了,首先我們要安裝好整個開發環境,其實Windows和Mac的整個過程基本一樣 開發環境: ( Mac的包管理神器 ) → → cnpm(淘寶映象,節省安裝時間) → webpack → vue-cli(vue腳手架) → IDE( Vue
只執行一次的事件one(“事件名”,function(){}) 和可多次執行的事件bind(“事件名”,function(){})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
ajax小技巧,防止一次操作多次點擊發送多個請求
var isAjax=false;$("btn").click(function(){if(isAjax)return;isAjax=true;setTimeout(function(){alert(123);isAjax=false;},2000);});剛開始為false,點選之後,為true就不執行,即
android-繼承BaseAdapter--自己定義適配器,getView運行多次的解決方法
能夠 popu con data ssa baseadapt tracking you idt 定義的getView運行多次的ListView布局: <ListView android:id="@+id/lv_messages"
dtd + 復雜元素的子元素出現次數 一次或多次
ges block 珍惜 html XML 1.0 條件 sch version 禮悟: 好好學習多思考,尊師重道存感恩。葉見尋根三二一,江河湖海同一體。 虛懷若谷良心主,願行無悔給最苦。讀書鍛煉強身心,誠勸且行且珍惜。 xml:1.0
分離式編譯時 鏈接器工具錯誤 (一個變量被定義一次或多次)
效果 include private 可讀性 con lnk2005 可能 ring 生成 在編寫程序時,將類中的函數成員的聲明和定義分開,在頭文件(.h)中進行聲明,在源文件(.cpp)中進行定義 以及具體功能的實現。達到分離式編譯的效果,提高代碼的可讀性。 自己在編寫是
iOS直播Liveroom組件,遊客,用戶多次切換登錄同一直播間,消息出現多次重復問題解決
with handle roo 遇到 format 重復 con 單例 serve byzqk 新版,加入連麥功能,直播的流程修改很多,每次登錄都需要登錄liveroom組件 期間遇到一個奇葩的問題,就是遊客登錄組件之後,切換為用戶登錄,出現im消息重復的問題,一開始以為是
springMVC的controller中insert()多次,記優惠券被多次領取
校驗 syn https gmv list spring 源代碼 null tro 做活動,要發優惠券,規定一人只能領取一次(一張)。一天下來發現有一個客戶領到了4張,且是同一秒生成的,源代碼如下: 估計多個線程同時進了add方法。 想到了單例的雙重校驗,現修改代碼如
Qt開發 槽函式定義,以及槽函式二次響應多次響應問題
在Qt開發裡面,有一種傳說中的訊號槽機制,有好幾種實現的方法。 為了實現ui和邏輯的解耦,Qt開發可以利用Qt designer來做UI,同時也有一些UI和邏輯函式之間的通訊建立。 例如,要實現button的相應,有下面幾種方法:
Vue事件總線(eventBus)$on()會多次觸發解決辦法
off cti UNC 關於 span sea col on() for 項目中使用了事件總線eventBus來進行兩個組件間的通信, 使用方法是是建立eventBus.js文件,暴露一個空的Vue實例,如下: import Vue from ‘vue‘export de
使用 React 與 Vue 建立同一款 App,差別究竟有多大?
原文連結:https://www.jianshu.com/p/7cf... 眾所周知,Vue 和 React 都是目前非常著名的前端框架。我在工作中經常使用 Vue,因此我對它有很深入的瞭解。同時,我也對 React 充滿了好奇,想要學習一下,一探究竟。 於是我閱讀了 React 文件
任務排程框架quartz使用總結(異常處理,解決恢復後多次排程處理)
任務排程框架quartz使用總結(異常處理,解決恢復後多次排程處理) 首先先說說什麼是排程框架,大白話所謂的排程框架你可以把它看成一個定時任務管理框架,並且quartz框架是多執行緒的, quartz最主要的三大基本特性: (1)排程器&nbs
微信公眾平臺網頁登入授權多次重定向跳轉,導致code使用多次問題
背景:微信網站開發 昨天我負責的一個專案忽然出現了一個十分詭異的bug,進行微信授權登入的時候請求code的時候安卓手機會多次重定向調轉我的介面接收code的介面(redirect_uri 微信請求調轉接收code的的介面,加了utl.encode()),也就是我這邊預設請求了多次這個介面,然而蘋果手機
jquery簡單的table切換,在頁面可以多次使用。
<span style="font-size:14px;">生活無樂趣,程式碼更加無樂趣。</span> <span style="font-size:14px;"> </span> <style> body{ margin:0;
C# 實現程式只啟動一次(多次執行啟用第一個例項,使其獲得焦點,並在最前端顯示)
直接上程式碼 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq;
spark dataframe 一列分隔多列,一列分隔多行(scala)
關於spark dataframe ,這裡介紹三種實用中實現可能比較麻煩的操作,首先上原始資料集 mRecord:一,合併content列,將name相同的content合併到一行,用逗號隔開: mRecord.createOrReplaceTempView("
phoenix 批量插入優化(一次commit,多次commit比較)
1、沒插入phoenix表一條,commit一次 import java.sql.Connection; import java.sql.DriverManager; import java.sql.
解決 springboot整合shiro,redis快取session 多次從redis獲取session問題
spring boot整合shiro redis快取session的教程很多,我這裡就不多說了,看了好多教程沒有解決快取session 多次從redis獲取session的問題,所以發表此部落格,希望對大家有所幫助。本人也是小白一個,如果有什麼問題還請各位大神多多指教