初级前端如何去理解全栈开发?

作为一名初级前端工程师如何去理解全栈开发?

使用技术栈: vue3+mysql+node.js

理解产品需求 发散开发思维

简单来说,就是给你一个需求,你会怎么去理解这个需求

需求是什么?可以说是一个功能,也可以说是多个功能,例如一个模块,里面包含多个功能

比如一个风险模块,这个模块里可能有风险管控、风险预防、处理风险等多个功能

这样的就叫需求

前端如何去充分理解一个需求,这里我举个例子:某项目中有一个需求是能进行发布文章,并且文章有不同的类别,那么作为前端的我们,在前端的角度上就要想到这可能用到表单,表单中输入框,有选择不同类别的单选或者多选框,有确认和取消的按钮,如下图所示

那作为后端,我们需要考虑的就是如何实现发布文章,同时我们要进行curd的思想

什么是curd?也就是mysql上说的增删改查

我们在想到发布文章的时候,除了要想到可以发布文章,还要想到使用者会删除文章、改变文章内容、查看文章

例如最常见的登录功能,就包含了注册账号、更改密码、注销账号

这些都是我们要思考的,并且是需要和需求方进行再次确认的

在思考关于使用者的角色时,我们需要考虑有三种常见的使用者,分别是超级管理员、普通管理员、用户,并且对使用者的权限进行界定

需要注意的是,绝大部分的系统都具有上述所说的三种角色

以上面的发布文章为例,超级管理员可以拥有对文字类别增删改的权限、普通管理员可以对用户的文章进行增删改查和对用户进行禁止发布、用户有增删改查权限

完善需求内核 规划数据库表

单从理解需求上来看,需求可以抽象成简单的curd

但真正的走入需求,我们则可以对需求的内核进行完善,让论题得以完善论文

以上面的发布文章为例,我们需要考虑的是一篇文章拥有什么要素,我们可以随便选择一篇新闻网站进行借鉴,可以发现有以下的最基本元素

作者、文章题目、文章内容、文章配图、文章发布时间

除了最基本的元素,我们还要思考一篇文章之外的元素,比如其他用户可不可以收藏、可不可以评论? 从甲方或者说产品需求方去进行逆向思考,甲方给1,我们要考虑1.5甚至2,这样才能有良好的合作,这些就考验我们对需求的积累了

有了以上的基础思维,我们就可以对数据表进行规划,避免在后期迭代版本的时候又要对数据表进行重写

注意数据安全 前后都要验证

后端永远都不要相信前端提交的内容

以登录模块为例,我们知道组件可以自定义校验规则,如下所示:

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  age: '',
})

const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  age: [{ validator: checkAge, trigger: 'blur' }],
})

通过这些规则,我们可以向后端提交我们输入的通过规则的字段

但在后端中,我们也还是要对前端提交过来的字段进行验证,如下所示:

// 验证模块
const joi = require('joi')

// 用户名的校验规则
// 值必须是字符串，值只能是包含 a-zA-Z0-9 的字符串最小是1最大是10必填项
const username = joi.string().alphanum().min(1).max(10).required()

// 密码校验规则
const password = joi.string().pattern(/^[\w]{6,12}$/).required()

// 注册和登录表单的验证规则对象
exports.login_validation = {
  body: {
    username,
    password
  }
}

虽然作为初级前端对协议、SQL注入之类的不了解,但在力所能及的情况下还是要保证前端传给后端的安全

我们可以在npmjs中找到不少关于验证规则的依赖

2023年3月3日 21点49分 前端小王hs