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

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

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

孽起

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

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

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

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

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

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

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

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

源代码&#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/…

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

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

WPF 制作便携小空调

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

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管脚互换很多时候…

为什么数学叫“数学”?

全世界有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年后…

捷达vs7测试_捷达VS7——品质硬核!

立冬&#xff0c;准备好“冬眠”了吗&#xff1f;一汽大众的子品牌-捷达(Jetta)在去年9月推出VS5和VA3之后&#xff0c;新型SUV&#xff0c;捷达VS7车型已在国内正式开始预售。这款新车基于大众MQB平台构建&#xff0c;将推出4款车型供消费者选择&#xff0c;定位为紧凑型SUV。…

一句 Task.Result 就死锁, 这代码还怎么写?

一&#xff1a;背景 1. 讲故事前些天把 .NET 高级调试 方面的文章索引到 https://github.com/ctripxchuang/dotnetfly 的过程中&#xff0c;发现了一个有意思的评论&#xff0c;截图如下&#xff1a;大概就是说在 Winform 的主线程下执行 Task.Result 会造成死锁&#xff0c;我…

ant 改变表格数据_表格技巧—Excel表格怎么替换数字

在编制报表时&#xff0c;如果把序列号中的某些数字改变&#xff0c;一个个更正&#xff0c;肯定是比重新录一遍还要慢的&#xff0c;如果只是想替换其中的数字&#xff0c;其实可以利用Excel表格自带的查找替换功能&#xff0c;一步到位解决。接下来小编教大家怎么样将一大批的…

程序员的鄙视链

全世界有3.14 % 的人已经关注了数据与算法之美最近这几年在世界各地突然吹起了一股全民写程序的风潮&#xff0c;连即将卸任的美国总统奥巴马都在写 JavaScript 了&#xff0c;但是身为一介靠写程序&#xff08;以及在上班时间胡乱上网&#xff09;来谋生的 developer&#xff…

基于 registry 搭建 Docker 私有镜像仓库

dockerhub: https://registry.hub.docker.com/_/registry安装命令docker run -p 5000:5000 -d -v /opt/registry:/opt/registry --restart always --name myregistry registry参数介绍&#xff1a;•-p 容器的端口映射&#xff0c;这里绑定 5000•-d 后台运行容器•-v 挂载主机…

BBSXP论坛手工得到用户md5密码的方法

07年发表在《***手册》的一篇文章。通过阅读本文&#xff0c;您将了解到&#xff1a;1、一种手工得到两个版本的BBSXP论坛的用户md5密码的方法。2、如何Cookie欺骗。大家都知道BBSXP论坛5.13&#xff0c;5.15版本的blog.asp文件存在注入漏洞&#xff0c;网上也有几种这个漏洞的…

2010C语言添加背景图片_2019级C语言大作业 - 火柴人试炼之地

C语言大作业 - 火柴人试炼之地https://www.zhihu.com/video/1200491618794606592分享19级同学大一上学期用C语言实现的火柴人试炼之地。分步骤代码、图片音乐素材、可执行程序可以从百度网盘下载&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1XelHD8GVnXfR8coAYOAC9w …

基于单TCP连接的高吞吐模型设计

对于服务与服务之间往往需要高效的吞吐的信息交互&#xff0c;但在绝大部分服务应用中为了实现高吞吐交互都是基于连接池模式&#xff0c;即通过多个TCP连接来提高吞吐量&#xff0c;这种设计完全是通过增加IO的读写量来实现高效吞吐。如果能减少连数和降低IO量&#xff08;合并…

程序员8大终极杀器,你get了几个?

全世界有3.14 % 的人已经关注了数据与算法之美经常有同学问&#xff1a;作为程序员&#xff0c;终极杀器是什么&#xff1f;其实有大佬早已回答过&#xff1a;持续学习&#xff0c;开阔视野才是程序员的终极杀器&#xff01;基于此&#xff0c;给大家一个建议&#xff1a;不妨多…