Skip to content

2021届校招生学习指南

ruifengwei edited this page Jun 25, 2021 · 1 revision

前言

Hello and welcome, 为了让大家快速的融入,我们针对性的选出了一些入门资料提供给大家,以方便提前性的熟悉和学习。

快速入门学习

学习要求:由于时间有限,我们并没有明确的要求每个部分的学习程度,但事实上 git、react、node 和 Linux(部分)将会伴随你的职业生涯,因此我们建议持续的保持学习,不断进步。

git

作为新手玩家,为了能够跟其他同学愉快的进行合作编程,git的学习与掌握是必不可少的,Git教程 是学习并逐步掌握git的必胜法宝,希望大家可以在入职前浏览一番,并能够通过练习提交代码来巩固一下。

传送门:Git教程

react体系

react基础

在前端的学习过程中,框架的学习是必不可少的,可以说了解和掌握框架是一个前端必备的基本功,而在众多前端框架中,react和vue是两个非常重要的框架,可以说掌握其中一个框架,便能够摘掉前端小白的帽子。我们在此整理了 react基础 供大家来学习。

传送门:react基础

状态管理

在了解了react框架之后,你是否也会有这样的困惑?react是为了渲染页面,那我从后端拿到的数据要怎样管理?怎样才能把真实的数据用到react框架上?小朋友,不要慌,我们在此推荐一款非常优秀的状态管理工具--唐刀,大家可以通过唐刀来了解一下什么是状态管理工具吧。

传送门:状态管理—唐刀

Node Server体系

当你的前端框架基础修为已经可以了的时候,就应该看看作为让前端无所不能的 node.js 了,node.js 不仅提供了包管理和编译文件,还提供了强大的服务能力。

这时候,你需要了解 Node.js-简单介绍Node.js-入门教程 了,我们希望你能够知道如何使用 npmyarn,也希望你能够了解node.js 的基本模块和 egg.js 框架。

Linux基础

设想一下,当你使用命令行来查找文件或者执行命令的时候,是否有种很酷的感觉?没错,Linux基础 能够满足装逼的你,当然,我们整理的 Linux基础 并不是为了装逼用的,而是帮你解决在命令行下如何熟练的操作,在服务器上的操作都是通过命令行的,当你把开发好的代码部署到服务器上的时候,如果有人反馈问题,你是需要上服务器上查看的,所以 Linux基础 还是很重要的哦。

实践出真知

启动框架

在大体熟悉学习资料的时候,你需要的是巩固一下,没错,我们为你们提供了一个技术框架 training-camp ,小伙伴们可以利用你们学习的git知识来将代码download到本地,使用 Node.js-简单介绍 中的 npmyarn 知识将依赖项install下来,然后让框架跑起来...

对于本届的小朋友,请切换至分支 2020-camp,不要在 master 里玩耍哦~~

习题巩固

在框架跑起来后,你们可以尝试着实现下面的一道或者两道题目来验证一下你们的 react基础状态管理—唐刀、和 Node.js-入门教程 的知识掌握能力。

当然在做习题之前记得要新建自己的代码分支哦(相信你们已经在Git教程中学会了怎么建新分支了)。

请注意!我们不要求功能实现的多么完美,这只是为了更好的巩固所学,可以借鉴,不要去拷贝粘贴,互动学习也是成长。

一、评论组件

参考下图实现多级评论模块

  1. 自行定接口,mock数据,模拟网络请求
  2. 最好能评论表情包
  3. 可以发挥自己想象添加新的炫酷功能

二、图片拖拽上传功能

实现图片拖拽上传功能组件

  1. 可以将图片拖拽到页面里,显示小图片、名称、尺寸和大小
  2. 可以上传多张图片
  3. 点击图片可以进入预览模式,实现左右翻页查看不同的图片
  4. 点击上传将图片传到后台
  5. 后台将图片放到一个指定的文件夹
  6. 可以添加自己的想法去实现更好的操作

三、可自动刷新的图表

使用 echarts,后端传回数据,进行展现。 数据可以自动刷新,按照指定频率~~

四、可拖动排序的树状结构

类似于电脑中文件夹的管理,可以拖拽进行排序,样式自行发挥,要求简洁齐整,可以从后端读取或发送顺序。

五、放射型弹出菜单

展现一个小图标(例如一个⭕️ 或者 🐱),鼠标悬停时,它的周围动画式的弹出一圈菜单,数量、文字、图表、事件均可配。 发挥设计能力!

作业提交

在你实现功能后,可以通过 Pull Request 的方式将代码提交至分支 2020-camp,我们会及时的查看并会提供一些建议的。

当然提交代码是需要一些信息规范的。我们针对commit的信息做了一些规范,如下所示:

前缀 功能介绍 示例
feat 用于新增功能 git commit -m 'feat: 新增图片拖拽上传功能'
fix 用于修复bug git commit -m 'fix: 修复评论后不显示到评论区到bug'
docs 文档修改 git commit -m 'docs: 添加图片上传组件使用说明文档'
ci 变更项目构建或外部依赖 git commit -m 'ci: 优化webpack打包配置'
test 测试用例相关 git commit -m 'test: 添加用户评论的测试用例'

问题反馈

当你有任何问题的时候,可以在 这里 提 issues 来向我们反馈,当然,提 issues 时我们也是有格式规范的:TODO

资料询问: TODO

demo询问: TODO

demoBUG: TODO

其他信息: TODO