妙味学员作品:一次 JS 学习成果的全面校验项目

前言

在当今前端热门框架的学习热潮下,小编很好奇的想问大家:你们一般用什么样的作品,来验证自己所学成果呢?是否很多朋友努力学了很多东西,却不知道最终要做什么?

如果是这样,不妨先来围观一下妙味实体班学员 刘富伟、谢俊星、周江黎 在学习期间相互配合、通力合作完成的作品:看板(Trello 卡片)

学员项目地址:http://kanban.microbu.com

项目介绍

项目开始之前,先让我们简单了解一下 “Trello 看板” 到底是个什么东东吧:Trello 看板是装满卡片、由你和你的团队使用的各种列表的应用,可以帮你整理任何事情,让你所有任务、想法、资料、讨论通通变得「井然有序」。

Trello 看板 可以让你在一大块屏幕中建立众多清单,你要整理某种资料,可以清楚的在整个屏幕上一览无遗。并且可以随时拖曳清单改变左右排列顺序。

建立多条清单后,就可以新增一张一张卡片。什么是卡片?可以是一个任务、一份资料、一个问题与讨论串,或是一张图片、一次投票统计。然后就可以简单快速的展开你所有的资料,随时开展你的工作了。

该项目还可以新增丰富的卡片内容,例如:文字图片、待办清单、插入档案、设定时间、颜色标签、特殊印章。尤其适合团队共用功能:简单易懂、即时同步、多人管理。见下图:


项目成立

在面对 “Trello 看板” 这样如此实用、且功能强大的前端产品面前,妙味实体班学员 刘富伟、谢俊星、周江黎 对此深表敬佩。同时,也为该产品可应用到如此全面的 JavaScript 知识而感到兴奋。

他们在学习周期最后一个月的 JS 实战中,组成了项目小分队,向 Trello 看板 所用到的全面 JS 知识、工程化开发、技术开发难点发出挑战,对自己所学技术做一次全面检验,也为了向经典致敬学习,以图今后的突破。


下面是这三位同学对该项目开发情况的介绍:

技术栈

  • JS 框架:Vue.js
  • CSS 框架: Semantic-ui&&Element-ui
  • 脚手架:vue-cli

运行

  • npm start
  • 安装 sematic-ui 会出现对话框 skip 然后 no, let me specify 就可以了。
  • 通过 http://127.0.0.1:8080 访问

小插件

  • dnd.js

实现功能

  • 添加多个列表
  • 列表内添加多项列表项
  • [x] 列表项信息编辑

    • 快速编辑: 列表项右方小按钮
    • 详细编辑: 点击列表项弹出详情页
    • 列表头编辑: 点击表头修改
  • [x] 删除列表/清除列表所有子项(列表右上方)

  • 列表项拖动
  • 滚动条部分
    • 内容超出页面弹出滚动条
    • 添加列表自动滚动至末端
    • 鼠标点击文档部分亦可拖动

功能描述

1、快速添加列表

在看板的右侧可直接添加多个列表;可通点击表头名称直接编辑表头,效果如下:

添加多个列表

2、卡片编辑

点击卡片,可进行标签名称编辑、修改到期日期、上传头像、删除 等操作,非常快捷方便,效果如下:

3、清单编辑

点击头像,可进行添加标签、日期、描述、评论,效果如下:

4、标签设置

在添加标签的过程中,可以通过编辑框的文字编辑和颜色区分,对事件的重要程度和需要完成事件的先后顺序进行划分,效果如下:

5、日期时间的选择

这是一个非常实用的功能,开发小组并没有在网上找那些日期组件去套用,他们完全用原生方式自己写了一套日期组件,用来巩固自身所学。效果如下:

日期时间选择

6、拖拽功能

如果你想对卡片进行管理,那么你可以直接通过拖拽方式,把相关的卡片、描述等直接进行看板之间的拖拽了,效果如下:

项目总结

1. 内容模块

列表组件
列表项组件

2. 公用弹出层模块

快速编辑
详情编辑

3. 日历组件

标签编辑组件
列表头菜单

  • 难点

    • 数据的流向

      1. 根组件接受到数据
      2. 渲染多个列表
      3. 列表数据 props 到子项
      4. 通过一个空的 vue 对象联结起子项与大小编辑面板(非父子组件通信)
    • 子项的拖动

      1. 每一个子项添加一个阴影框,检测到拖动元素进入时显示,并且接收宽高大小
      2. 拖动移出或结束时阴影框移除
      3. 被拖动元素元素需要传输的数据包括

        • 容器宽高
        • 父数据与索引(用于移除)
        • 自身的数据
      4. 放下的位置需要检测的数据包括

        • 父数据以及索引(用于决定添加的位置)
    • 滚动条部分
      1. 鼠标在文档拖动的距离
      2. 滚动条移动的距离
      3. 内容移动需要移动的距离
      4. 三者需要按相同比例关联起来
  • 改进

    • Vuex 管理 替代混乱的 eventBus,正在进行中…

以上就是关于 “Trello 看板” 的项目介绍了。看似小小的 “看板”,其中所涉及的前端知识却是非常全面的。很是考验同学们所学技能成果哦~

各位前端小伙伴们,现在你们知道,该通过什么样的作品来检验所学成果了吧~~

学员作品地址:http://kanban.microbu.com

以上三位学员 刘富伟、谢俊星、周江黎 全部来自妙味 JS 实体班,他们所学的课程是妙味 《 JavaScript 资深全栈 WEB 工程师进阶课程》,在完成每节课系统的 JS 课后练习作业、步入最后一个月的 JS 实战阶段时,他们开始挑战这样一件作品,并按公司多人开发的模式,最终通力合作、完成该作品。

JavaScript 资深全栈课程大纲:http://www.miaov.com/index.php/course/coursedetail/cid/34


课程咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690

想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

妙味网友
请登录后留言,请登录注册