本次的寒假考核旨在以实战的方式,熟悉Web开发,进一步的让大家感受 Web 的强大。
考核分为前后端协作的双人作业与单人作业两种形式进行。
考核中所涉及的知识点以及还需掌握的东西会在后面的知识勘查中提到。
-
尽可能的找到队友,做双人作业。首先单人作业比较难,其次跟其他人合作开发项目有助于理解 Web 开发的整体流程
-
选择双人合作作业的同学请自行寻找队友,自己主动些去找人私聊。实在找不到请联系你们的导师帮你们找
-
请在 2020 年 1 月 15 号之前决定好做哪一个项目并在合作文档上填写相关信息
-
寒假作业好好写,尽量做,会对自己有很大提升
-
双人作业是为了培养你们的合作能力和从实战提升你们的综合能力
-
本次双人作业全部使用前后端分离的形式,后端的接口格式等等要你们自己沟通决定
-
沟通很重要。请多加沟通
-
禁止互相甩锅
-
如果你觉得你队友坑了你,给你三条路
- 自己也一起坑
- 自己顶上去做原本他做的事
- 写好自己的那部分
-
作业禁止抄袭,我们会 codereview
-
有问题及时联系自己的导师
-
下学期开学你们将要展示自己在寒假完成的作品
请从以下两个项目中二选一,并完成所要求实现的功能。
注:
下面给出的需求和功能也许比较多,尽最大努力去完成,做不完也没关系,能做多少做多少。
前端:本次作业的双人作业中前端优先考虑做 PC 端,有能力的尽量兼做移动端的适配。不允许使用任何库和框架 ,但可以使用 Webpack 等打包部署工具。在功能完成差不多的时候,可以考虑将网页升级为 PWA ,进一步优化网页加载性能。
后端:Web框架可以使用,比如这学期上课提到的gin框架,但数据库框架不能使用,即操作数据库的代码只能是go原生。在功能完善后可以考虑一下设计模式的使用或者如何让代码变得更优雅。
-
登录 / 注册页
- 注册
- 登录(保持登录状态)
- 退出登录
tip:登陆方式可以不限于用户名 + 密码,比如手机号 + 手机验证码、第三方账户登录
-
主页
- 搜索
- 推荐
- 关注
- 热榜
- 下滑(懒加载)
- 提问
- 写文章
-
问题详情页
- 回答数、回答的排序
- 图片、文字数据的展示
- 收藏 / 取消收藏
- 写回答
- 富文本编辑器
- 对回答发表评论 / 回复评论
- 发送 emoji 表情
- 发送图片
- 对回答点赞 / 取消点赞、踩 / 取消踩
-
个人信息页
- 关注了、关注者
- 动态、回答、提问、文章、收藏
- 能够上传头像、修改昵称与个人简介等信息
- 自己提问、回答、文章等的管理
加分项:
- 发送带图片的提问
- 发送带视频的提问
- 后台管理
- 使用 https
- 考虑安全性(比如 xss、sql 注入、csrf)
- 考虑缓存与性能
- 反爬虫
- 部署在自己的云服务器上(HTTP/HTTPS/CDN)
-
登录 / 注册页
- 注册
- 登录(保持登录状态)
- 退出登录
tip:登陆方式可以不限于用户名 + 密码,比如手机号 + 手机验证码、第三方账户登录
-
首页
- 搜索
- 轮播
- 侧边栏
- 视频预浏览
-
视频详情页
- 视频播放
- 自定义的播放器
- 拖拽进度
- 弹幕
- 收藏、点赞、投币、长按点赞一键三连
- 相关推荐
- 评论
- 视频播放
-
个人详情页
- TA 的视频
- 关注数、粉丝数、获赞数、播放数
- 自己视频的管理(投稿、删除……)
加分项:
- 后台管理
- 防止盗链
- 推荐视频
- 使用 https
- 考虑安全性(比如 xss、sql 注入、csrf)
- 考虑缓存与性能
- 反爬虫
- 部署在自己的云服务器上(HTTP/HTTPS/CDN)
轮播图
- 图片自动轮播
- 手动切换
- 底部的分页
- 根据传入属性或参数有不同的切换方式(左右滑动、浅入浅出……)、图片、自动轮播时间
- 纯 JS 实现(写三版)
- ES5 面向对象
- ES6 class
- Web Component
切图
- 依照 2019 迎新网 PC 端首页来切图
- 实现首页中所有的动效和功能
- 各种 CSS3 动效
- 返回顶部
- 地图查找、缩放
- 图片自己在网上扒
静态资源服务器
- 学习 Node.js
- 用原生 Node 搭建一个静态资源服务器
- 用该服务器展示前面轮播图、切图所写的 HTML、CSS、JS、IMG 等文件
三国杀
基础功能
- 请打开珍藏已久的三国杀桌游的说明书,或者去网上下载这款游戏来玩玩(手机是也有app)
- 抽牌,到自己的回合才能摸牌,当然也可能因为效果的限制,跳过此回合或者进入自己的回合但不能摸牌
- 只需要实现简单的游戏模式即可,1V1或者2v2
- 基础卡牌类型(杀、闪、桃、乐不思蜀、兵粮寸断、无中生有、顺手牵羊、万箭齐发)
- 装备只要求武器,例如:诸葛连弩、寒冰剑。 tips:你可以自己实现你设计的武器,不必完全按照游戏中来
加分项
- 有武将选择,且武将拥有自己的专属一个或多个技能,并且每个武将的血量不同
- 其它你想添加的卡牌类型(三国杀其它卡牌或者你自己觉得有趣的)
- 游戏模式增加主公、忠臣、反贼、内奸(主公的血量+1)。每个角色的获胜条件,要玩过游戏的才知道哦!
- 其它你想完成有趣的东西
- 如果有兴趣,可以把它变成一个公众号来玩,这里你需要自己去申请一个微信公众平台号测试号,具体教程上网可以找到,你需要做的转化为微信开发。
tips:游戏中不考虑角色之间的距离
不需要区分普通牌和锦囊牌
不考虑角色的性别
- git
- 调试
- 常用 Linux 命令
HTML
- 常用标签
- HTML5
CSS 基础
- CSS 居中与基础布局
- Flex、Grid 布局
- CSS3 过渡及动画
- CSS Houdini
- CSS 工作流
- PostCSS
- Sass / Less / Stylus
- CSS 规范(BEM 等)
JS 基础
- 基本类型与引用类型
- 各个类型的方法
- 正则表达式
- DOM、BOM
- AJAX
- 原型与原型链
- 闭包
- 执行上下文与函数执行栈
- 对象的深浅拷贝
- 函数的防抖、节流
- 错误与异常的防护处理
- this 指向
- new 的实现
- call,apply,bind 的区别及实现
- 模块化机制
- ES6+
- canvas
安全
- 理解 XSS、CSRF 攻击,如何防范?
- 理解 CSP
- 考虑密码安全
- 加盐
- 加密算法(信息摘要、对称加密、非对称加密)
- 登录态验证
- Cookie
- Session
- JWT
浏览器
- 理解跨域
- JSONP
- CORS
- Nginx
- Node 代理
- 存储
- localStorage
- sessionStorage
- cacheStorage
- Service Worker
- 理解浏览器渲染机制
- 页面渲染的几个步骤
- 重绘(Repaint)与回流(Reflow)
- 理解事件机制
- 事件捕获与冒泡
- 事件代理
- 理解 Event Loop 机制
- 浏览器中的 Event Loop
- JS 中的异步编程
性能优化
- 浏览器缓存机制
- prefetch、preload、prerender 标签
- 懒加载、懒执行
- 图片优化、开启 HTTP gzip 压缩、CDN 加速
- 首屏渲染
- 如何尽量避免回流重回
编程范式
- 命令式编程
- 函数式编程
- 函数的递归与迭代
- 函数组合与柯里化(compose、curry)
- 高阶函数与纯函数
- 面向对象编程
- 如何在 JS 中实现封装、继承、多态
- 基于原型的面向对象方式与基于类的区别
- GoF 23 种设计模式在 JS 中的应用
其它
- 代码规范(中文版)
- github 要有详细的 commit 记录
- 提前了解 Node,对你使用一些工具化的东西很有帮助
- 多读书
- 《JavaScript 高级程序设计》
- 《DOM 编程艺术》
- 《你不知道的 JavaScript》
- 《ECMAScript 入门》
- 《JavaScript 语言精粹》
golang基础
- 基础语法
- 变量、for循环、if条件语句、swich、数组和切片、函数
- 指针
- 包和文件
- 接口interface
- 常用的类库
- map
- time
- strconv
- strings
- http请求
- 异常和错误
- 延迟函数 defer
- 错误 error
- 错误处理 panic,log,recover函数
- I / O
- Reader
- Writer
- bufio——缓存io
- 序列化
- 并发
- goroutine(协程)
- select
- channel
- 线程安全
- 死锁
数据库
- 基础sql语法
- insert
- update
- select
- delete
- 数据库表设计
- rbac
- 表优化
- golang的数据库连接
- 数据库连接池
Web
- gin框架(这个网上可以说是很全了)
其它
- 出现报错首先上网解决,比如核心报错部分cv,使用搜索引擎解决。这样做,大部分问题都可解决
- github 要有详细的 commit 记录
- 不要太贪玩,建议作业一定要提前写。
- 可以去了解下非关系型数据库 Redis
- 有空把自己买的书拿来多看看,平时没看,没学,利用假期补上来。
新年快乐~
寒假加油~
记得找导师要红包 :)