日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

大家好,我是魚皮,今天分享我的老弟第一次寫后端代碼時出現的囧事,希望大家引以為戒。

孽起

我的老弟小阿巴,目前大一,自學編程有一段時間了,之前主要以學前端為主,比較好上手。

但這貨最近不知道咋回事,一直嚷嚷著要寫寫后端代碼。

我說:你前端才剛學沒多久呢,急什么?

小阿巴說:沒人比我更懂前端!

好家伙,沒想到幾日不見,這家伙現在這么驕傲了!那必須得殺殺他的銳氣,讓他領略一下后端的恐怖。

于是我說:成,正好我最近在開發一個新功能【刪除消息】,功能很簡單,允許用戶刪除自己已經閱讀過的消息。前端后端都交給你來做,時間也不急,給你兩周,拿去練練手,熟悉下項目吧~

沒想到小阿巴這狗說:兩周?瞧不起誰呢,就這么一個小功能,我 3 天給你搞定!

我大驚:現在的年輕人都這么強了么?行,我等你!

沒想到,不到 3 天,小阿巴真的提交了代碼,讓我們一起來看看他的實現思路和代碼吧。

實現思路

功能實現包括前端和后端兩部分,分別來思考一下。

前端

要實現用戶已讀消息刪除功能,前端的工作比較簡單,添加一個刪除按鈕,并且給按鈕添加一個點擊事件,點擊后調用后端 消息刪除 接口即可。

前端老弟第一次寫后端,崩了

 

前端界面

小阿巴寫的前端代碼:

<!-- 偽代碼 -->
<button onClick={doDelete(消息)}>刪除</button>
<script>
  // 刪除消息
  function doDelete(msg) {
    // 消息 id 存在且為已讀
    if(msg.id && msg.isRead) {
      // 調用后端接口
      service.deleteMsgById(msg.id);
    }
  }
</script>

看著好像沒啥問題吧,寫的還挺工整的,代碼規范好評!

再看看后端怎么樣。

后端

后端要做的事情就是接受前端發過來的請求,操作數據庫,將數據庫中指定 id 的消息刪除,再返回是否刪除成功給前端。

前端老弟第一次寫后端,崩了

 

存放消息的數據庫

很多編程語言都可以拿來寫后端,比如 JAVA、Go 語言等。但由于小阿巴是第一次做后端,我心疼他,所以讓它使用 NodeJS(JavaScript 語法)來寫。

看看小阿巴寫的后端代碼:

// 刪除消息接口
// @params msgId 消息 id
function deleteMsgById(msgId) {
  // 調用數據庫刪除函數,得到結果
  const res = db.deleteById(msgId);
  return res;
}

總共就這么幾行代碼,簡潔清晰,也難怪小阿巴花了 3 天的時間就寫出來了。

不知道大家覺得這段代碼怎么樣,像不像自己第一次寫的代碼呢?

請大家思考一下,他寫的代碼有沒有什么問題?

 

分析問題

其實,小阿巴這段代碼問題非常大!一旦上線了,后果不堪設想!

主要有三個問題,我把小阿巴叫了過來,要根據問題的嚴重性從大到小給他盤一盤。

 

1. 未做校驗

我對小阿巴說:再仔細看看你的代碼,是不是少了校驗邏輯?

小阿巴疑惑:我不是在前端判斷消息 id 是否存在、消息是否已讀了么?

我:那如果用戶不在瀏覽器里點刪除按鈕,而是直接請求接口,隨便傳消息 id 呢?

小阿巴陷入了沉思。

這是第一次寫后臺的同學經常犯的錯誤,尤其是前后端都一個人寫的時候,以為在前端判斷參數是否合法就夠了。但其實,惡意用戶可不管這么多,他們可以直接用各種工具在瀏覽器外向你的后端發送請求,隨便傳一些消息 id,甚至直接遍歷可能的 id。如果后端不做校驗,一上線,正常用戶的消息可能就被刪光了!絕對的 最高級事故

小阿巴:沒想到這么嚴重,那我在后臺補上對消息狀態的校驗,好像也不太行吧?畢竟用戶可以任意傳遞請求參數。

我:挺聰明嘛,的確如此,所以我們還要補上對當前登錄用戶的校驗。

完善的代碼大致是這樣的:

// 刪除消息接口
// @params msgId 消息 id
function deleteMsgById(msgId) {
  // 校驗參數合法性
  if (!mgsId) {
    return false;
  }
  // 從數據庫查消息最新狀態
  const msg = db.getMsgById(msgId);
  // 從 session 或中間件獲取當前用戶信息
  const user = getCurrentUser();
  // 消息未讀或不是該用戶的消息
  if (!msg.isRead || !user || msg.userId !== user.id) {
    return false;
  }
  // 調用數據庫刪除函數,得到結果
  return db.deleteById(msgId);
}

小阿巴:我記住啦,后端接口是業務核心,一定要加強校驗!

我:不錯,來看看其他的問題吧。

2. 硬刪除

我:在你的代碼中,直接調用了 delete 函數直接刪除數據,你知道這會有什么問題么?

小阿巴:有啥問題?

我:直接刪除數據,會導致管理員在需要排查問題時缺少線索。比如用戶發送過違規消息,一段之間后把消息自己刪掉了,那管理員也不能查出他的違規記錄了。

小阿巴:還真是,那咋辦?這數據不能刪?

我:一般會采用 軟刪除,給數據表添加一個額外的字段來表示刪除狀態,比如 isDelete,狀態為 0 表示未刪除,為 1 表示已刪除。正常情況下,只給用戶展示 isDelete = 0 的數據,刪除時,將該字段的值從 0 更新為 1 即可。

所以上述代碼的最后那部分,可以略作修改:

// 原代碼,真實刪除
db.deleteById(msgId)
// 新代碼,軟刪除(更新)
db.updateById(msgId, {isDelete: 1})

這樣后端代碼就基本完善了。

當然,也不是所有的數據表都需要軟刪除,要根據業務場景來決定。

3. 無防誤觸

最后還有一個產品體驗上的小問題,建議在用戶點擊刪除時,出一個二次確認的彈框,否則用戶不小心點錯了,想找卻又找不回消息,那就會感到憤怒了!

前端老弟第一次寫后端,崩了

 

確認刪除

前端開發做的越多,就會越注重這些小細節,提升用戶體驗非常重要!


小阿巴:學到了,學到了!我好菜啊 555。

我:沒事,這是很正常的,知錯能改,就還是好阿巴。

很多正在閱讀文章的朋友們,是否也犯過這些小錯誤呢?請養成良好的編程習慣,多多檢查自己的代碼吧!

分享到:
標簽:后端
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定