前端老弟第一次写后端,崩了!

幽默轻松小知识,一起来看看老弟第一次写的后端代码,你觉得如何?

大家好,我是鱼皮,今天分享我的老弟第一次写后端代码时出现的囧事,希望大家引以为戒。

孽起

我的老弟小阿巴,目前大一,自学编程有一段时间了,之前主要以学前端为主,比较好上手。

但这货最近不知道咋回事,一直嚷嚷着要写写后端代码。

我说:你前端才刚学没多久呢,急什么?

小阿巴说:没人比我更懂前端!

好家伙,没想到几日不见,这家伙现在这么骄傲了!那必须得杀杀他的锐气,让他领略一下后端的恐怖。

于是我说:成,正好我最近在开发一个新功能【删除消息】,功能很简单,允许用户删除自己已经阅读过的消息。前端后端都交给你来做,时间也不急,给你两周,拿去练练手,熟悉下项目吧~

没想到小阿巴这狗说:两周?瞧不起谁呢,就这么一个小功能,我 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。

我:没事,这是很正常的,知错能改,就还是好阿巴。

很多正在阅读文章的朋友们,是否也犯过这些小错误呢?请养成良好的编程习惯,多多检查自己的代码吧!

对了,听说点个 在看,印象更深刻!

往期推荐

被攻击了!

在车上偶遇一位阿里大佬!

刷了 1000 多道算法题,一点心得

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/302529.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows Phone 7 系统主题颜色RGB和Hex值

Windows Phone 主题是背景色与个性色的组合。背景色是背景的颜色&#xff0c;个性色是应用于控件和其他可视元素的颜色。有两种背景选项可供使用&#xff08;深色和浅色&#xff09;&#xff0c;另外共有 10 种标准个性色可用于您的应用程序。 下表列出了 10 种标准个性色及其以…

小米8对一加6打开软件速度测试,买一加6还是小米8?小米8和一加6区别对比

买一加6还是小米8&#xff1f;据相关媒体报道&#xff0c;继一加6后&#xff0c;小米前些天也推出了同样搭载骁龙845处理器的最新旗舰——“小米8”。值得一提的是&#xff0c;小米8还被官方称为“8周年的代表之作”&#xff01;那么&#xff0c;一加6和小米8哪个更好一些&…

面试算法工程师时,我居然被化学专业转行的老哥血虐了

全世界有3.14 % 的人已经关注了数据与算法之美我是小A&#xff0c;一个没能当成算法工程师的菜鸡Java工程师&#xff0c;内心却等着上AI这趟车。去年正是人工智能火热的时候&#xff0c;看着各种高薪招聘&#xff0c;我沉寂很久的内心也火热起来了。但是想归想&#xff0c;我内…

用python可以处理xml文件怎么打开_Python大神都是这样处理xml文件的!

最近有同学询问如何利用 Python 处理 xml 文件&#xff0c;特此整理一个比较简洁的操作手册&#xff0c;供大家参阅。首先准备一个xml文件&#xff0c;xml中的内容如下所示。存储为&#xff1a;student.xml如果要获取这个xml里面的数据&#xff0c;我们需要利用Python里面Eleme…

C# 使用 CancellationTokenSource 终止线程

我们在多线程中通常使用一个bool IsExit类似的代码来控制是否线程的运行与终止&#xff0c;其实使用CancellationTokenSource来进行控制更为好用&#xff0c;下面我们将介绍CancellationTokenSource相关用法。C# 使用 CancellationTokenSource 终止线程使用CancellationTokenSo…

编写一个程序,将一串字符倒序存放后输出。

源代码&#xff1a; 1 #include<iostream>2 using namespace std;3 int main()4 {5 char *p;int i,n;6 cout<<"请输入字符串的长度n";cin>>n;7 pnew char[n];8 for(i0;i<n;i)9 cin>>p[i]; 10 for(i0;i<n/…

下学期计算机教学工作计划,初中信息技术下学期教学工作计划

关键字&#xff1a; 计划信息技术教育是现代教育的主要教育之一&#xff0c;又是教师运用现代技术的指导性手段&#xff0c;现在如何提高自身素质来适应现代教育的需要&#xff0c;是我们每位老师思考的问题。如何培养学生[此文转于斐斐课件园 FFKJ.Net]对计算机的兴趣和意识&a…

超好看的科学科普书,孩子大人都可以看!

科学就是高不可攀的吗&#xff1f;科学探究就是神秘而枯燥的吗&#xff1f;科学教育就是“板着面孔”的吗&#xff1f;才不是呢&#xff01;小木认为科学研究是一个充满快乐的过程。而且&#xff0c;科学是无处不在的&#xff0c;日常生活中的点点滴滴也蕴含着科学原理。小木关…

WPF 制作便携小空调

今天看到群里一个小页面挺有意思的&#xff0c;就是这个&#xff1a;https://ac.yunyoujun.cn/于是想着用wpf也模仿一下嘿嘿&#xff0c;为了方便&#xff0c;也顾不上什么代码结构了。。。看看效果吧&#xff1a;代码不多&#xff0c;只有一个窗口&#xff0c;下面就直接看看代…

ecg信号越界_精确心电图ECG信号处理的简单介绍

心电图(ECG)是用来捕捉心脏在一段时间内情况的反映&#xff0c;它通过外部电极连接到皮肤转换成电信号来采集。心脏外面形成的每个细胞膜都有一个关联电荷&#xff0c;它在每次心跳期间去极化。它以微小电信号的形式出现在皮肤上&#xff0c;可以通过心电图探测到并放大显示。本…

Cloudstack部署

近几天一直在玩cloudstack3.0&#xff0c;目前添加host一直不成功&#xff0c;还在继续摸索中&#xff0c;有了解的朋友可以回复交流转载于:https://blog.51cto.com/vfans/912405

奥的斯服务器状态显示,奥的斯电梯调试服务器(俗称st)按键介绍

st的前面板由一个显示两行每行可显示16个字符的液晶显示和16个按键组成。st的16个按键分两个部分&#xff1a;左边竖的4个&#xff1a;module 在服务工具软件的任何地方返回到服务工具主菜单.function 在系统中的任何位置返回到安装和维修功能菜单供选择系统set 在功能中的任何…

ML.NET 示例:将ML.NET模型导出到ONNX

在这个示例中&#xff0c;您将看到如何使用ML.NET来训练回归模型&#xff0c;然后将该模型转换为ONNX格式。问题开放式神经网络交换即ONNX是一种表示深度学习模型的开放格式。使用ONNX&#xff0c;开发人员可以在最先进的工具之间移动模型&#xff0c;并选择最适合他们的组合。…

别写代码了!行吗?

全世界有3.14 % 的人已经关注了数据与算法之美01刚才等红绿灯的时候&#xff0c;天开始下雨了。这时候旁边的程序员首先开口说&#xff1a;“下雨了。”大概过了5秒钟&#xff0c;其他人&#xff1a;对哦&#xff0c;有点下雨了。其实&#xff0c;这说的是程序员头秃的故事。02…

dma接收双缓存 stm32_「STM32学习笔记」USART 新特性

之前的学习笔记“SPI不够用&#xff1f;USART来帮忙”一文中介绍了用如何把USART当做SPI来用的方法。此外&#xff0c;ST的USART还有很多新特性&#xff0c;没准有你不知道的。在此&#xff0c;我们整理出来以下串口新特性&#xff0c;供大家参考。支持RXD和TXD管脚互换很多时候…

二狗叫你制作千M网线的线序及方法

千兆5类或超5类双绞线的形式与百兆网线的形式相同&#xff0c;也分为直通和交叉两种。直通网线与我们平时所使用的没有什么差别&#xff0c;都是一一对应的。但是传统的百兆网络只用到4根线缆来传输&#xff0c;而千兆网络要用到8根来传输&#xff0c;所以千兆交叉网线的制作与…

理请求时出现未知错误.服务器返回的状态码为: 500,react-native

我试图调用一个api&#xff0c;但出现错误“未处理的承诺被拒绝&#xff1a;错误&#xff1a;请求失败&#xff0c;状态码为500”。 我不知道如何得到错误。我将api调用放在componentDidMount中。 我不确定错误是来自redux实现还是来自我的api。这就是我所谓的api。 成功登录后…

为什么数学叫“数学”?

全世界有3.14 % 的人已经关注了数据与算法之美“数学”一词是来自希腊语&#xff0c;它意味着某种“已学会或被理解的东西”或“已获得的知识”&#xff0c;甚至意味着“可获的东西”&#xff1b;“可学会的东西”&#xff0c;即“通过学习可获得的知识”&#xff0c;数学名称的…

5月TIOBE编程榜,Java、PHP降级,C#再度上升!

TIOBE 5月编程语言榜单显示&#xff0c;Java数据下滑&#xff0c;排名降级了一位&#xff0c;被Python超越&#xff1b;PHP继续大幅下滑&#xff0c;排名降级到第9&#xff1b;而C#则是再度稳中求进&#xff0c;已经连续N个月上涨了。曾经Web开发三大语言&#xff0c;在2020年后…

使用Windbg内核调试连接调试用户态程序的方法

1. 中断目标计算机&#xff1b;2. kd>!process 0 03. 找到要调试的程序对应进程&#xff1b;4. kd>.process /i TARGETPROCESSADDRESS5. kd>g6. kd>.reload /user7. kd>bp /p TARGETPROCESSADDRESS moduleName!functionName8. kd>g转载于:https://blog.51cto…