• 0
  • 0
分享
  • 前端小白躺平摆烂可以吗
  • Liam 2022-08-31 10:18:05 字数 2407 阅读 1069 收藏 0


开局即炼狱模式,前端小白躺平摆烂可以吗

这几年毕业的大学生有多苦都不必我们说了。大学才4年,疫情占3年,好不容易熬到毕业,找工作又进入了炼狱模式。

整个互联网裁员裁到上了热搜,之前选择这个专业时所幻想的高薪梦,大厂梦,受到现实的无情打脸。

如何在炼狱模式里成功突围通关呢。

突围,从项目实战开始

在当前的行业环境和疫情大背景下,企业招人会更加谨慎。

应届生或者刚毕业的前端小白在项目经验上十分匮乏,你凭什么卷得过别人,凭什么在这么多的候选人里脱颖而出?

项目经验就是程序员的硬通货,也只有做项目才能够真正提高一个人的编程能力。那么死循环又来了————

你现在可能找不到工作,可能拿不到实习的offer,没有企业里的真实项目去给你做,又哪来项目经验?

那么,你能不能自己做一个项目?

为什么我不建议你自己搭服务器

在前后端分离的开发模式下,自己单独做项目势必自己一个人要包揽前后端。

有很多同学很有决心,觉得自己一定要写个真项目,于是打算服务器也自己搭建。

这里会 有个问题,对于一个前后端都处于学习阶段的人来说,上来就搭服务器,对Apache,和Ngnix 一窍不通,一旦遇到服务器的问题能卡半天,这样很容易在项目开始的阶段就由于挫败感过强和被前端无关的问题卡脖子,导致项目开发不下去。

学习需要有个循序渐进的过程,在一开始先不要去钻研后端开发,而是想办法搞定前端调试需要的数据就行。

所以你需要有个工具,能帮你搞定前端所需要的数据,也就是说一个 mock服务器。

对此,我提出的解决方案是:

  • 调试一个页面,你尽管可以在代码里写死数

  • 调试一个小需求,可以自己用mock.js 写脚本去构建请求出来

  • 如果是项目级别的请求数据仿真,可以使用 Apifox 的云端 mock 功能来搭建 mock 服务器,将整个项目中需要用到的数据,通过 Apifox的 mock 服务器返回回来。


1.png

使用 Apifox mock 工具搭建虚拟服务器

1.Apifox mock 服务器

Apifox 的 mock 功能,本来就是为了方便前端调试页面而做出来的功能。

它是构造了一个高度仿真的智能mock引擎 ,能够接收前端页面的请求,并且返回高度真实的业务数据,方便前端调试。它没有真实的业务服务器,但使用体验就和实际的后端服务器一样的。

2.png

它为前端调试提供的功能有:

1.内置 mock 服务器,不需要自己搭建 mock 环境
2.内置数据 mock 规则,不需要自己编写脚本来构造业务数据
3.在响应中设置 mock 规则,不需要自己编写响应的 JSon 脚本
4.以项目/功能模块/接口 归档分类,每个接口都有自己的mock规则和地址,支持便捷的调用和修改

Apifox 云端 mock 使用教程

1.项目接口设计

实际的项目,有前后端分工,后端会和前端商量好每个接口的不同功能和返回的数据。 而前端做自己的个人项目,那么就需要自己完成项目接口设计这部分工作。规划好项目中的页面会用到哪些接口,需要什么数据,设计出来。

3.png

到这一步,就是前端自己做一个个人项目需要用到的全部后端知识了。

2.配置单个接口返回数据

在接口文档里接口的响应字段里,配置字段的mock规则,然后在 mock 环境下运行,可以预览出 Apifox mock 出的响应规则。

4.png

mock 出来的响应数据效果如下,数据接近真实业务数据,能直接用。

5.png

3.获取 mock 地址

将mock地址复制到前端代码中,请求的时候就会直接请求 mock 环境里的数据,mock 服务器会返回高度真是的模拟数据,可直接用于前端页面数据的呈现和处理。

7.png

不同页面需要用到不同的接口和数据,也是先在 Apifox 里配置好,后面再在前端代码里调用。

到这里你的前端个人项目的 mock 服务器配置就搭建完成了。

但如果你对你项目 mock 出来的数据要求比较高的话,可以了解下 Apifox 的 mock 规则。

3.自定义项目参数的 mock 规则

Apifox 里内置了20多种常用的数据规则,对于常规的项目数据类型,基本够用了;

7.png

但如果你的项目有专用的数据类型,那么需要自己去项目设置/功能设置/智能mock规则/自定义规则 里创建自己需要的规则。 只要会正则表达式就能写,难度不高,不需要去写js 脚本。

8.png

这样子,可以确保你的项目里使用的数据基本和真实的数据没有不同,如果有前端功能有数据校验,也能设置真实条件去验证,这样项目的真实程度会大大提高,流程也能根据需求去流转,不会因为接口返回的数据是模拟的而产生麻烦。

云端mock:把项目演示给面试官看

Apifox 的 mock 功能还有个非常实用的云端 mock 功能,即你不需要开启本地 mock ,Apifox 在它自己的服务器上给你配置好了一个云端 mock供你使用,你在任何地方只要能连上网就能访问以上的 url 生成的mock数据。

9.png

如果你去面试,可以直接拿着这个项目去演示给面试官看,只要项目里配置的是云端mock 地址,无论何时何地打开,都能够正常运行,边演示功能,边讲述你这个过程遇到什么技术问题,又是如何解决的。

这不比什么学历证书都好使,都更有说服力,更能打动面试官?

总结:打造硬核的实战项目

在 Apifox mock 这几个核心的功能的支持下,它就能支撑起项目级别的数据仿真。

这样出来的一个项目,能硬核到什么程度呢? 你把mock地址更换成真实项目里的地址,这个前端项目就能直接上线了。

那是真正企业级别的开发,在项目实战的场景下,你会遇到你写几个前端页面遇不到的问题和挑战,当你能把他们一一解决时,你的经验增加了,战斗力也增加了,面试求职自然底气也更加足了。

所以真心建议大家多写几个前端个人项目,写多几个项目,你就能体验到能力飞升有多爽,面试求职一路绿灯有多爽。

工具下载

Apifox SaaS 版本完全免费,没任何功能限制。如果你需要使用这个工具,可直接去官网下载,官网直达:www.apifox.cn

  • 【留下美好印记】
    赞赏支持
登录 后发表评论
+ 关注

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          • 写在前面这篇文章主要给大家介绍一下如何使用charles对App及PC端应用进行抓包1.App抓包0."关掉电脑防火墙"1.手机与电脑连同一个wifi2.对手机所连WIFI设置HTTP代理(找到所连wifi,进入高级设置):代理服务器主机名(Proxy Hostname): 电脑IP代理服务器端口自(Proxy Port):Charles代理端口 (查看方法:Charles -> Proxy -> Proxy Settings -> Port)3.保持电脑上Charles处于打开状态App抓包时必须关闭(不勾选) Windows Proxy: Proxy ...
            0 0 762
            分享
          •   以下准则出自Ron Patton《Software Testing》一书,在测试职位工作多年后,对其中的准则体会颇深,分享以下10条实用性超强的准则及其在工作中的实践,建议在工作中多加参考:  1、完全测试一个程序是不可能的。(It’s Impossible to Test a Program Completely.)  实践:根据项目时间、资源、风险、用户要求等,有选择地去测试。  2、软件测试是一种基于风险的活动。(Software Testing Is a Risk-Based Exercise.)  实践:一般新功能、常用功能、默认配置属于高风险,需要优先测试,分配较多资源,而回归...
            0 0 1020
            分享
          • 1、文本框和密码框:文本框长度要求;输入内容限制;密码框(右边小眼睛):长度要求(前台控制、数据库控制、磁盘控制)输入内容限制(数字、字母、文字、特殊符号、空)不允许明文显示禁止复制粘贴两次密码要一致2、单选按钮、组合列表框、数码框单选按钮框架标题/提示文本不缺少且正确;各个选项正确;执行同一功能的多个单选按钮只能选一个;要有默认选中项;一般不能取消选中;存入后台的数据正确;存入后台的数据正确;组合列表框/下拉列表;通常单选,条目内容正确(没有多余/错放、缺少项);横向显示要完整;条目功能要正确实现;组合列表框汇总可能允许输入数据;数码框(up-down控件)能使用上下箭头控制数字变动;数字能...
            0 0 1760
            分享
          • 跟大家说说写好一份简历的三个核心点——技能、技能的结果、技能的价值。请好好琢磨这三个短语,如果有需要,记在你的小本本上,或者收藏本文,随时回看和品琢。1、技能。即,你掌握了哪些技术,具备哪些能力。此点,几乎每个人会写。你只需注意技能匹配度的问题——招聘企业的要求是什么,他们需要候选人具备什么样的技能。如果是投递心仪的公司,更要做好简历技能匹配,别拿一份简历广撒网。我做hr的朋友与我讲过,他最头痛的事,便是招聘需求写着要求职者具备x能力,并且有企业实操,可仍旧有很多不满条件的简历投进来,哪怕是加上必须具备这样的词眼,也没啥效果。而他的做法,也很简单:哼一句,右滑退出……你可能会说,咱就广撒网,说...
            0 0 1196
            分享
          • 编写一份优秀的接口文档会让软件开发中变得更加轻松,更有效率。这可是关键任务,写得好不仅可以帮助开发人员更好地理解和使用 API 接口,还可以提高整个团队的协作效率。大家可以在线感受一下优秀的接口文档是怎样的:https://petstore.apifox.cn那么我们该如何写好一份优秀的接口文档呢?接口文档结构首先我们要知道文档结构是什么样子的。接口文档应该有清晰明确的结构,以便开发人员能快速定位自己需要的 API 接口信息,同时帮助快速理解。一般来说,接口文档应该包括以下内容:接口概述接口参数接口请求和响应示例接口返回码接口调用方法这些内容都包括的话,起码在结构完整性上就已经做得很好了。接下...
            0 0 1254
            分享
      • 51testing软件测试圈微信