• 0
  • 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

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

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          •   根据一份内部通知和两名知情人士的说法,特斯拉上海工厂当天已暂停生产。该厂当天的早班被取消,工人们被告知可以开始休假了,厂方也未说明具体原因。这比之前12月最后一周停止厂内大部分工作的计划稍微提前了一点。路透社此前曾披露,特斯拉计划从本月25日起至明年1月1日暂停该厂ModelY车型的生产。  报道称,特斯拉上海工厂暂停生产正赶上新冠肺炎病例在中国大幅增加。与此同时,特斯拉还面临库存增加的问题。作为特斯拉的全球第二大市场,中国市场正面临下行压力。消息人士透露,过去一周,特斯拉上海工厂的产能主要用于生产出口车型。  路透社补充说,年底假期暂停生产并不是特斯拉上海工厂的惯常做法。去年12月最后一...
            0 0 613
            分享
          • IT之家11月21日消息,暴雪娱乐创始人,现任部门总裁MikeMorhaime就近日“暴雪网易无法续约”一事进行了回复,他还承诺“暴雪将尽其所能确保中国的玩家可以玩到我们的游戏”。他表示:“最近在这个话题上有着诸多争论,很多人都想让自己成为话锋上的胜者,但其实伙伴关系是双向的,我也深切地明白这一点,我们自当倾尽全力去确保中国玩家能玩到我们的游戏,我们也不会在意那些指责或者其他负面的动作。”此外,他还称暴雪一直都在关注玩家的心意,并将一直如此。IT之家了解到,暴雪娱乐11月17日发布声明称,由于与网易的现有授权协议将于2023年1月23日到期,将暂停在中国大陆的大部分暴雪游戏服务,包括《魔兽世界...
            0 0 587
            分享
          • API安全概述       Application Programma Interface (API)由一组定义和协议组合而成,可用于构建和企业集成应用软件。随着数字化转型的深入,API产品的价值日益增高,特别是与微服务、DevOps等技术的融合,使得API成为企业战略发展加速的利器,但随之而来的安全问题也不容忽视。常见的API安全漏洞有以下五种:首先是API应该与应用系统一样在设计之初就考虑安全的因素,比如防篡改(签名)、防重放(时间戳)、防止敏感信息泄露(传输加密与数据最小化)等。API规范性带来的一个问题就是API很容易被发现,比如在URL中出现的...
            11 12 2406
            分享
          •   性能测试的提前准备关注点:性能测试的环境配置需要能够尽可能的模拟版本的现场使用,包括外网的设备,软件网元,各种硬件平台,操作系统,软件平台;性能测试需要准备合适的模拟脚本来尽可能全真的模拟客户可能的操作,比如同时并行网页操作,同时进行socket连接等。而且要超出客户的真实可能情况。  性能测试需要出两类数据:基准测试对比数据:比较本版本和前一版本的性能指标的情况。用以发现本版本的功能合入是否影响了基准的性能。基准测试的情况下,本版本的新增功能和特性默认都是不打开的,保持和前一版本一致。单个功能的性能对比数据:验证本版本中,新增的功能和特性打开的时候,此功能对于版本的性能的影响。  性能测...
            11 11 1503
            分享
          • 1.渲染引擎(所谓的内核)(1)Chrome--开源的Webkit,听说自主从Webkit中衍生了Blink(2)Safari--开源的Webkit(3)Firefox--Gecko,Mozilla自家的渲染引擎(4)IE--Trident内核(5)360极速版--Webkit+Trident(6)Opera--自家的Presto内核,然后这位兄弟也跟着Chrome用Blink(7)其他国内的基本都是Trident内核2.浏览器兼容性测试2.1为什么要做浏览器兼容性测试第一点也说了浏览器渲染引擎有区别,就算是同一渲染引擎,在做个性化修改后显示也会有差别,用过国内浏览器的你最明白的啦。而前端页面...
            0 0 1028
            分享
      • 51testing软件测试圈微信