草稿箱實(shí)現(xiàn)自動(dòng)保存功能

思路

  1. 根據(jù)抓包軟件fiddler或者chrome分析網(wǎng)上已有的草稿箱功能是怎樣一個(gè)實(shí)現(xiàn)的模式滑绒;以簡書編輯為例,便是在0.5S左右會(huì)自動(dòng)保存一次骚勘,通過抓包可以看到在編輯的時(shí)候如圖所示


    image.png

    可以得知每次編輯之后簡書都會(huì)向服務(wù)器對(duì)應(yīng)的url發(fā)送數(shù)據(jù)铐伴;需要注意的是發(fā)送的方式為put而不是post。

  2. 因此不難得出俏讹,在實(shí)現(xiàn)類似自動(dòng)保存功能的時(shí)候当宴,需要向服務(wù)器put方式發(fā)送數(shù)據(jù),并且在檢測(cè)到鼠標(biāo)沒有輸入之后的0.5S左右自動(dòng)想服務(wù)器put一次數(shù)據(jù)泽疆。

  3. 了解put及post的區(qū)別

簡單地說:通常用于向服務(wù)器發(fā)送請(qǐng)求即供,如果URI不存在,則要求服務(wù)器根據(jù)請(qǐng)求創(chuàng)建資源于微,如果存在逗嫡,服務(wù)器就接受請(qǐng)求內(nèi)容,并修改URI資源的原始版本株依。
-----PUT請(qǐng)求那些封裝在Request-URI的實(shí)體驱证。如果Request-URI引用一個(gè)已存在的資源,則該封裝實(shí)體應(yīng)該作為原始服務(wù)器上的修改版本恋腕。如果Request-URI不是指向一個(gè)已存在的資源抹锄,并且該URI可被請(qǐng)求的用戶代碼定義為新資源,則原始服務(wù)器可用此URI創(chuàng)建新的資源荠藤。如果新的資源被創(chuàng)建伙单,這個(gè)原始服務(wù)器就必須通過201(Created)響應(yīng)通知用戶代理。如果已有資源被修改哈肖,則發(fā)送200或者204響應(yīng)吻育,表示成功完成了該請(qǐng)求。如果Request-URI既沒有創(chuàng)建也沒有修改資源淤井,則應(yīng)給予適當(dāng)?shù)腻e(cuò)誤響應(yīng)來反映問題本質(zhì)布疼。實(shí)體的接受者不能忽略任何不理解或沒有實(shí)現(xiàn)的Content-*(如Content-Range)頭部,并且必須返回501響應(yīng)币狠。

如果請(qǐng)求經(jīng)過緩存游两,并且Request-URI標(biāo)識(shí)出一個(gè)或多個(gè)當(dāng)前緩存的實(shí)體,則那些實(shí)體視為過期了漩绵。該方法的響應(yīng)不會(huì)被緩存贱案。
POST請(qǐng)求的URI表示處理該封閉實(shí)體的資源,該資源可能是個(gè)數(shù)據(jù)接收過程止吐、某種協(xié)議的網(wǎng)關(guān)宝踪、或者接收注解的獨(dú)立實(shí)體。然而祟印,PUT請(qǐng)求中的URI表示請(qǐng)求中封閉的實(shí)體-用戶代理知道URI的目標(biāo)肴沫,并且服務(wù)器無法將請(qǐng)求應(yīng)用到其他資源。如果服務(wù)器希望該請(qǐng)求應(yīng)用到另一個(gè)URI蕴忆,就必須發(fā)送一個(gè)301響應(yīng)颤芬;用戶代理可通過自己的判斷來決定是否轉(zhuǎn)發(fā)該請(qǐng)求。

大致流程圖思路分析(根據(jù)抓包)

根據(jù)點(diǎn)擊新建文章之后套鹅,開始

1.png

根據(jù)圖可知道站蝠,當(dāng)點(diǎn)擊新建文章之后post一段已經(jīng)寫好的數(shù)據(jù),并會(huì)給出響應(yīng)包括服務(wù)器給這篇新建的文章一個(gè)id號(hào)


2.png

根據(jù)1圖返回狀態(tài)碼201表示創(chuàng)建成功卓鹿;
接下來每次編輯的時(shí)候都向該id的文章進(jìn)行put菱魔,服務(wù)器進(jìn)行更新數(shù)據(jù)并且返回狀態(tài)碼200OK

流程圖

1.點(diǎn)擊新建文章之后像服務(wù)器發(fā)送一個(gè)字段,字段如圖所示:

image.png

服務(wù)器進(jìn)行新建一個(gè)文章數(shù)據(jù)字段吟孙,如果新建成功則返回一個(gè)id作為響應(yīng)傳回以及201狀態(tài)碼澜倦。
2.前端監(jiān)聽鍵盤輸入事件聚蝶,當(dāng)鍵盤0.5S左右沒有點(diǎn)擊的時(shí)候便向服務(wù)器put數(shù)據(jù),其中put形式如圖所示


image.png

服務(wù)器需要更新將傳過來的數(shù)據(jù)在文章數(shù)據(jù)庫的id進(jìn)行更新藻治。更新成功傳回一個(gè)狀態(tài)碼碘勉。

根據(jù)簡書的自動(dòng)保存得到大致流程如上

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市桩卵,隨后出現(xiàn)的幾起案子验靡,更是在濱河造成了極大的恐慌,老刑警劉巖雏节,帶你破解...
    沈念sama閱讀 217,907評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胜嗓,死亡現(xiàn)場離奇詭異,居然都是意外死亡钩乍,警方通過查閱死者的電腦和手機(jī)辞州,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來件蚕,“玉大人孙技,你說我怎么就攤上這事∨抛鳎” “怎么了牵啦?”我有些...
    開封第一講書人閱讀 164,298評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長妄痪。 經(jīng)常有香客問我哈雏,道長,這世上最難降的妖魔是什么衫生? 我笑而不...
    開封第一講書人閱讀 58,586評(píng)論 1 293
  • 正文 為了忘掉前任裳瘪,我火速辦了婚禮,結(jié)果婚禮上罪针,老公的妹妹穿的比我還像新娘彭羹。我一直安慰自己,他們只是感情好泪酱,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評(píng)論 6 392
  • 文/花漫 我一把揭開白布派殷。 她就那樣靜靜地躺著,像睡著了一般墓阀。 火紅的嫁衣襯著肌膚如雪毡惜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,488評(píng)論 1 302
  • 那天斯撮,我揣著相機(jī)與錄音经伙,去河邊找鬼。 笑死勿锅,一個(gè)胖子當(dāng)著我的面吹牛帕膜,可吹牛的內(nèi)容都是我干的枣氧。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼泳叠,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼作瞄!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起危纫,我...
    開封第一講書人閱讀 39,176評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎乌庶,沒想到半個(gè)月后种蝶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,619評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瞒大,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評(píng)論 3 336
  • 正文 我和宋清朗相戀三年螃征,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片透敌。...
    茶點(diǎn)故事閱讀 39,932評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡盯滚,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出酗电,到底是詐尸還是另有隱情魄藕,我是刑警寧澤,帶...
    沈念sama閱讀 35,655評(píng)論 5 346
  • 正文 年R本政府宣布撵术,位于F島的核電站背率,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏嫩与。R本人自食惡果不足惜寝姿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望划滋。 院中可真熱鬧饵筑,春花似錦、人聲如沸处坪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽稻薇。三九已至嫂冻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間塞椎,已是汗流浹背桨仿。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留案狠,地道東北人服傍。 一個(gè)月前我還...
    沈念sama閱讀 48,095評(píng)論 3 370
  • 正文 我出身青樓钱雷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親吹零。 傳聞我的和親對(duì)象是個(gè)殘疾皇子罩抗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)灿椅,斷路器套蒂,智...
    卡卡羅2017閱讀 134,656評(píng)論 18 139
  • API定義規(guī)范 本規(guī)范設(shè)計(jì)基于如下使用場景: 請(qǐng)求頻率不是非常高:如果產(chǎn)品的使用周期內(nèi)請(qǐng)求頻率非常高,建議使用雙通...
    有涯逐無涯閱讀 2,540評(píng)論 0 6
  • 1. 網(wǎng)絡(luò)基礎(chǔ)TCP/IP HTTP基于TCP/IP協(xié)議族茫蛹,HTTP屬于它內(nèi)部的一個(gè)子集操刀。 把互聯(lián)網(wǎng)相關(guān)聯(lián)的協(xié)議集...
    yozosann閱讀 3,444評(píng)論 0 20
  • 一說到REST,我想大家的第一反應(yīng)就是“啊婴洼,就是那種前后臺(tái)通信方式骨坑。”但是在要求詳細(xì)講述它所提出的各個(gè)約束柬采,以及如...
    時(shí)待吾閱讀 3,426評(píng)論 0 19
  • 給存儲(chǔ)屬性設(shè)定初值 在初始化器中設(shè)置欢唾。 在屬性定義中提供默認(rèn)值。 自定義初始化器 自動(dòng)為參數(shù)提供外部參數(shù)名(和內(nèi)部...
    樂人曹閱讀 388評(píng)論 0 1