您好,登錄后才能下訂單哦!
前言
大部分人在看到這篇文章的標(biāo)題時(shí)第一時(shí)間可能有點(diǎn)懵,我先簡(jiǎn)單介紹一下背景:
公司有一個(gè)基于Vue實(shí)現(xiàn)的登錄中心是我負(fù)責(zé)維護(hù)的,頁(yè)面上是一個(gè)常規(guī)的登錄界面,用戶名輸入框、密碼輸入框和登錄按鈕各一個(gè)
今天有個(gè)同事(之后簡(jiǎn)稱A)過(guò)來(lái)找我問(wèn)到這么一個(gè)問(wèn)題:
他負(fù)責(zé)的應(yīng)用將登錄中心集成到了APP端,他接到的需求是希望在APP端拉起登錄頁(yè)面時(shí),自動(dòng)將用戶帳號(hào)和密碼填入,然后自動(dòng)點(diǎn)擊登錄。
開(kāi)始正題
我們把登錄頁(yè)面簡(jiǎn)化成以下代碼
<template> <div> <input name="username" type="text" v-model="account.username"> <input name="password" type="password" v-model="account.password"> <button class="login-button" @click="login">LOGIN</button> </div> </template> <script> export default { name: 'app', components: { }, data () { return { account: { username: '', password: '' } } }, methods: { login () { $ajax({ method: 'POST', url: '/api/login', data: this.account }) } } } </script>
APP端在拉起登錄頁(yè)面時(shí),可以傳入js代碼并在當(dāng)前頁(yè)面執(zhí)行,拋開(kāi)MVVM框架Vue的影響,在前端的遠(yuǎn)古時(shí)代這其實(shí)是個(gè)很簡(jiǎn)單的問(wèn)題
const usernameInput = document.querySelector('input[name=username]') const passwordInput = document.querySelector('input[name=password]') const button = document.querySelector('.login-button') usernameInput.value = 'test@dji.com' // 修改用戶名輸入框的值 passwordInput.value = 'xxxxxxxx' // 修改密碼輸入框的值 button.click() // 觸發(fā)按鈕點(diǎn)擊事件
上面也正是同事A所嘗試的方法,然而他在實(shí)際測(cè)試中發(fā)現(xiàn),運(yùn)行js后,雖然頁(yè)面上的input框正確變更為修改后的值,但發(fā)起的ajax請(qǐng)求中 username 和 password 均為空字符串,于是將問(wèn)題反饋到了我這邊
原理
其實(shí)如果對(duì)Vue的響應(yīng)式數(shù)據(jù)原理有一定理解的話,就可以很快的想到這個(gè)問(wèn)題的原因。問(wèn)題的根源就在 v-model 的原理上:
v-model 其實(shí)是vue為了方便使用提供的一個(gè)語(yǔ)法糖,實(shí)際展開(kāi)來(lái)是這樣子
<input name="username" type="text" :value="account.username" @input="account.username = $event.target.value">
當(dāng)用戶在輸入框輸入時(shí)會(huì)觸發(fā)input事件,從而更新 account.username 值
而上一步中使用 document.querySelector('input[name=username]').value = 'test@dji.com'
模擬的輸入行為實(shí)際上并不能觸發(fā) oninput 事件,那么模擬 button 的點(diǎn)擊事件后發(fā)起的 ajax 請(qǐng)求拿到的數(shù)據(jù)自然也就是未修改前的值(即空字符串)
解決方案
弄明白了問(wèn)題的原理之后,解決方案自然也就很容易想到。既然js模擬輸入無(wú)法觸發(fā) oninput 事件,那我們就再進(jìn)一步,在修改完值后用js手動(dòng)觸發(fā) oninput 事件
實(shí)現(xiàn)代碼如下:
const usernameInput = document.querySelector('input[name=username]') const passwordInput = document.querySelector('input[name=password]') const button = document.querySelector('.login-button') const event = document.createEvent('HTMLEvents') event.initEvent('input', false, true) usernameInput.value = 'test@dji.com' // 修改用戶名輸入框的值 usernameInput.dispatchEvent(event) // 手動(dòng)觸發(fā)輸入框的input事件 passwordInput.value = 'xxxxxxxx' // 修改密碼輸入框的值 passwordInput.dispatchEvent(event) // 手動(dòng)觸發(fā)輸入框的input事件 button.click() // 觸發(fā)按鈕點(diǎn)擊事件
以上代碼未考慮兼容性、代碼封裝等問(wèn)題,僅提供解決思路的參考
寫在最后
其實(shí)問(wèn)題說(shuō)不上多難,但是對(duì)于很多學(xué)習(xí)知識(shí)時(shí)只是淺嘗輒止的同學(xué),很可能會(huì)是個(gè)不小的麻煩。平時(shí)經(jīng)常能聽(tīng)到一些 框架會(huì)用就行了,原理什么的也就應(yīng)付一下面試,工作壓根用不到 之類的言論,希望大家可以在日趨浮躁的大環(huán)境下,守住極客精神,認(rèn)真鉆研技術(shù),做一個(gè)真正的程序員,而不僅僅只是個(gè)搬磚的。
好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。