你前后端分离开发真的规范吗?

你前后端分离开发真的规范吗?

PluginsKers
2021-01-28 / 6 评论 / 307 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年04月27日,已超过53天没有更新,若内容或图片失效,请留言反馈。

前后端分离

随着Vue&React等前端框架的兴起。
前后端分离这个开发模式渐渐进入开发者们的视线。(这已经是很久之前的现象了)
前后端分离已成为互联网项目开发的业界标准使用方式。
前后端分离的开发模式,有什么优点?

  1. 后期运维更加方便
  2. 前端开发效率提高,也让后端能专注于业务开发
  3. 减免前后端职责不清所带来的其他负面成本
  4. 对前端发挥的局限更小了

需要注意:

  1. 这样会使前端开发任务加重,但是会从其他方面所弥补回来
  2. 性能,因为多了一层通讯,使得性能下降

后端开发规范

这个是很多前端开发者很重视的,为了让自己看不到看了想吐血的后端逻辑以及相关变量命名。
比如,我最近的一个项目中,有些API的返回是sfzid(身份证ID)。这里有必要了解一下驼峰式命名规范,这其实很重要。

可以很大程度的减免交流成本。

id这个在数据库中经常被作为来使用,同时它也是前端很关键的值。
有那么一个需求:

一共有四级标签,XX的子是XXX,XXX的子的XXXX,XXXX的子是XXXXX。最后一级下面存储有相关文章。这个需求像Typecho的(父子)标签,以及标签下的文章。我需要去怎么调控分配他们?

后端工程师给我的数据让我吐血,他返回了一个super(父"标签"的Name)我看到的时候傻了,类型是String,心中有了一个疑问:为什么不用ID(Int)?

于是,为了兼容我在Map下的数据列内添加了一个新的Key(name) 表情

前端开发的规范

前端开发还要什么规范?看后端脾气就好了。 表情

如果前端进度超越了后端?

那么要注意的(我遇到的)变量命名尽可能遵循驼峰式命名,这其实很重要。
开发文档?
这个时候,你的开发文档就是针对前端需求列给后端看的。
那么,需要将所有请求都标注,返回结构严谨!!!
不然,你可能后期还需要改改改。(后期重新拿出来改是个死穴)
有过开发经验的开发者可能都懂,首先,你不一定认识你自己写的代码(如果不注释的话),重新认识你的代码将花费不少时间。

开发热情↓:正向反馈收到削减 表情

规范
规范代码往往很重要,所以像博主在开始项目之前,会熟悉相关语言的规范。当然,并不是说不能按照个人喜好了,如果你是单独开发,那么无所谓。

PHPJavaScriptJavaPython这些我所熟悉的语言,代码规范已经刻入骨子里了 表情

Vue.JS的踩坑记录

CSS

标签无法正常被CSS选择器选择

在这里踩过的一个坑,无法选择到相应的标签

PS:使用了框架Vuetify进行开发。

我希望更改<table>标签的样式,但是在代码中找不到<table>这一标签(它是被Vuetify后期渲染出来的)

怎么办?既然源代码中没有这个标签,我如何选择更改它?

这里涉及到一个深度穿透选择器,是Vue赋予SCSS的一个属性:
::v-deep

有何作用?直接透过映射层的虚拟节点选择Vue渲染前的DOM。

我尝试了对相关的节点以及父节点进行选择,最后都失败了。

思考:

  • 为何无法选择?(未解决)
  • 既然无法被选择,有何其他的方式实现需求?

我尝试在 开发者工具(F12) 内直接编辑标签的Style,成功了。

那么如何在内部进行这一步操作?

于是,我将目光对向了ref,它被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。

于是我获得了其父元素的DOM,通过chilren跌跌撞撞的指到了我所想要的DOM。
然后.querySelector("table").setAttribute("style","margin-top: 20px;overflow: hidden;white-space: nowrap;");进行修改Style。

问题解决,虽然方式略显笨拙。

组件通信

父 > 子通信

我想通过:instance="this"进行传递context给子文件。
但是却报错了。

错误位置在App.vue,当时找了很久没有找到哪里的问题。(直接忽略掉了最不可能出错的参数传递)

当我将this给予一个别名变量时,将:instance="this"变为了:instance="test"

它正常了,无报错。

反思:
App.vue下,this无法被赋予?(不是)
那是什么原因导致以上错误的发生?

Property的关系错误了吗?
原封不动的进行调用,为什么会错误?抑或者是其他原因?

报错中提到的一些方法都是我不曾使用的,那么?会是上下文的问题吗?
应该不会。

所以,错误的原因是this中有无法被其他上下文Property继承的因素。(这可能和我当时的一些操作有关)

以上全为个人想法,如有问题,敬请指正!

24

评论 (6)

取消
  1. 头像
    Quiet
    Windows 10 · Google Chrome

    没事就跟后端撕逼,他觉得他这样合理,我觉得我这样合理,反正撕逼 最后还是各写各的 表情

    回复
    1. 头像
      PluginsKers 作者
      Windows 10 · Google Chrome
      @ Quiet

      人间真实 表情

      回复
  2. 头像
    CHEYNE
    MacOS · Google Chrome

    正解是前后端都写!hhhh

    回复
    1. 头像
      PluginsKers 作者
      Windows 10 · Google Chrome
      @ CHEYNE

      甲方爸爸不让没有办法的鸭 表情

      回复
  3. 头像
    Joe
    Windows 10 · Google Chrome

    你得::v-deep写反了表情

    回复
    1. 头像
      PluginsKers 作者
      Windows 10 · Google Chrome
      @ Joe

      改回来了表情

      回复