#Web研发部寒假作业
二人组队项目或者单干
如果你觉得你够牛逼, 就单干吧喵!!!
一个后端一个前端
目前前端人数大于后端人数.部分前端同学会找不到后端同学组队.
先自由组队, 在1月7日晚7点之前将组队情况以邮件的形式发送至[email protected].
若自由组队完毕后前后端同时有人没有组上队, 剩下的将随机分配
剩余的前端可以自由选择前端作业.
在完成作业过程中, 已组队前端如果A掉了, 后端可以寻找未组队前端补上, 实在没找到就自己撸个出来, 后端A掉的前端作业交出页面即可, 即展示作业时, 未组队或后端A掉的前端必须能展示出页面/游戏, 可以没有与服务器交互功能, 前端A掉的后端必须能展示出有相应功能的作品, 界面可以丑点, 成功组队的队伍必须展示完整的作品
- 分工方式可以灵活处理
- 每个人所完成的工作量都要差不多
- 最好能交换方向编码(如后端可以做做前端)
- 界面的搭建前端来做, 样式
必须使用提供的 UI库(后面会提供)
- 完成部长要求的任务即可
##作业内容:
###多选一(小括号中为选作):
-
博客
- 日志(分享到微博贴吧空间)
- 留言板(可以对他人的留言进行回复,实现楼中楼最好)
- 分页: 文章列表以及留言板列表可能会很长, 所以就做成有分页的
- 关于我, 用户登录注册
- 搜索功能: 在搜索结果列表中高亮搜索关键词
- 后台管理系统: 对博客所有动态内容进行"增删改查"(如博文的发布等等)
- [选作]相册: 对缩略图的处理, 图片上传
- [选作]日志分类/标签
- [选作]日历，在日历上显示自己今天是否有博文，点击当天日期后可跳转至当天博文列表, 后台删除
- [选作]时间轴，把所有的日志显示在一条轴上，实在不懂就百度。
-
贴吧
- 发帖/回帖/看帖(只看楼主功能)
- 分页
- 关于我
- 头像上传基本信息修改
- 站内消息
- 用户登录注册
- 搜索帖子
- 后台管理系统:对帖子, 用户, 贴吧进行
增删改查 - [选作]时间轴 timeline
- [选作]分享功能(分享到微博贴吧空间)
-
知乎
- 提问/回答
- 分页
- 关于我
- 头像的上传(后台剪裁尺寸)
- 简单的站内消息系统
- 用户登录注册(可以试试ajax)
- 搜索
- 用户关注问题, 对问题点赞, 对问题评论(最好楼中楼), 可以添加问题分类
- 后台管理系统
- [选作]分享到微博贴吧空间
-
B站
- 用户登录注册
- 视频文件上传
- 视频播放/评论
- 视频分类
- 搜索:视频根据视频标签和标题进行搜索
- 后台管理系统:
- 视频管理
- 用户管理
- [选作]弹幕功能
- 提醒: 虽然我们不会做flash, 但是我们可以用飞翔的HTML元素来实现→_→
- 脑洞大开: 可以做用户等级, 自己想等级制度, 等级越高, 发的弹幕越大
- 脑洞大开: 比如说一级的时候弹幕是h5标签, 二级的时候弹幕是h4标签→_→...
- 提醒: 虽然我们不会做flash, 但是我们可以用飞翔的HTML元素来实现→_→
- [选作]浏览历史, 收藏功能
-
如果你有什么其他想做的东西, 只要难度和上述的相近, 那就放心地去做吧0v0..
###前端注意事项：
####页面不崩是基本要求就不用我强调了吧，IE8以上浏览器能看
- 关于留言板
- 可以模仿A站等留言回复样式，自己发挥吧
- [选作]尝试留言板实现换字体、颜色、字体大小等功能（有插件的哦）
- 关于用户登录注册
- 进行表单验证
- [选作]关于相册（尼玛程序是选作我想必选也没法啊）
- 萌萌哒的相册，要有点击图片放大效果（就像QQ空间的相册）
- 可以的话相册旁边加上评论神马的
- 关于头像上传：
- 基本图片上传功能
- [选作]头像的裁剪功能
- [选作]试着用ajax
- [选作]飞翔的弹幕。。如果想的话。。就飞一下。。
###后端注意事项:
###关于Github
- 必须通过github进行二人协作(手动合并大量代码的都是逗比不解释, 手动合并代码的时间不比看git教程的时间少).
- 也可以配合项目管理平台进行开发.teambition tower colorwork 都可以.
####附录
##如果假期组队有困难的同学:
- 请先跟大三的联系
###前端方向做
- 前端与后端不太一样, 前端最重要的是写代码之前掌握良好的编程思想, 不然就会掉入巨大坑之中. 半天都写不完.
- 不要亲信周围身边的同学对前端的看法, 在他们眼里, 前端就是切图,写写JS. 那种思想早晚都会被他们写入历史.
- 一个优秀的前端工程师需要具有各个方面的技能, 绝对不只是切个图那么简单!! 只会切图? 趁早转行吧→_→
- 做一个页面不只是从头到尾写一堆全七八糟的CSS和JS. 一个设计良好的架构可以让你写的代码可能很轻松得看第二次,第三次.(请问: 如果现在让你去切个图, 你愿意去做二次开发么→_→)
- 最后给个计算公式: 牛逼的前端 = (后端工程师 + 移动开发工程师 + 一般前端工程师 + 安全工程师 + 性能工程师), 不过我见过哪些牛逼的前端工程师, 国内就几个..
牛逼的前端我帮不了你, 但我能帮你成为一个一般前端工程师..
小提示： 前端在下学期还会分成2个方向： 图形与逻辑开发方向， 数据与布局方向
- CSS
- 阅读代码的技能, 不会阅读代码怎么用我提供给你们的UI框架
- CSS 布局技能, 不会居中的乘早转行吧→_→
- 盒模型技能
- 基本的页面兼容 IE8+
- JS
- 阅读代码的技能，不会看代码还写啥代码→_→
数组(重点)- 创建数组， 稀释数组， 数组长度， 多维数组
基本数组方法, pop, push, shift ...ECMA5 数组方法, forEach, map, reduce- 类数组与真数组， 已经如何将类数组转换成真数组, 如何区分类数组和真数组
- 如何使用数组方法进行字符串操作 (Array.prototype.join.call, Array.prototype.fliter.call])
对象(重点)对象类型判断（Object.prototype.toString.call）- 对象属性检测
属性枚举 for/in 已经 forin 和对象原型的关系， 如何避免枚举到继承的属性序列化对象 Object.stringify, Object.toJSON- Object.create （在原型继承会用到！）
- Object.keys
this 指针的指向问题(新生开学的笔试题哦)
函数(重点)- 函数定义， 函数声明和函数赋值的区别
函数的call, apply 方法作用域与作用域链- 学会使用将一些属性保存在函数中， 可以显著提高性能
闭包arguments 对象- 原型对象prototype
- 通过bind修改函数指针
- 函数式编程, 使用函数来操控函数
巧用闭包实现区部作用域
- 类 (可选掌握, 可暂时不要求)
- 正则表达式（可选掌握， 可暂时不要求）
Ajax(重点中的重点)GET 方法POST 方法- Restful API
- 浏览器跨域与同源策略
- Websocket
- Window API
setTimeout, setInterval 基本用法- 理解setTimeout, setInterval 中的异步事件队列
location对象navigator对象- 错误处理
- window 与iframe 以及同源策略与iframe
- DOM API （住店）
啥是DOM树删除节点， 创建节点， 节点类型获取元素属性- Form API
CSS 操作(style, H和getComputedStyle)getElement[byId, sByClassName, sByTagName]等选择器querySelector, querySelectorAll 的选择器- 上面2中选择器的区别， （动态，性能，兼容）
- 事件 (重点)
冒泡和捕捉基本浏览器事件（load, click, mouseover, mouse out, blur, b,submit...）去除浏览器模式事件如何阻止事件冒泡- 匿名函数与事件监听的取消
- 面向对象(可选掌握, 可暂时不要求)
- 面向对象与对象原型(可选掌握, 可暂时不要求)
- 对象原型与原型链(可选掌握, 可暂时不要求)
+ canvas
+ application cache
+ localstorage
+ audio
+ CSS3 animation, rotate, translate, transition
+ 响应式布局
+ REM && EM
+ Ajax 队列
+ 桌面端浏览器兼容
###后端方向做
- 学习常用的设计模式用并PHP实现 + 自己的思考.
- 尽量实现代码分离(MVC).
- 可以使用框架(speedphp, ThinkPHP, Yii2, Laravel).
- 数据库的设计并且用简单的图表表现.
##友情提示: 寒假回来进行展示的时候, 所有代码会放到Linux环境下测试, 请注意在Linux环境下别崩了, 比如大小写问题, 路径问题等等,假期可以进行一些Linux的学习，在Linux下进行开发，对Linux下的环境搭建到时可咨询网校学长学姐
##不能联网的同学
- 陈熙
- 李泽月