优秀开发者刘熙作品:React 实现 teambition

这是妙味 刘熙 使用 React 框架完成的一款为不同的事务建立各自任务的项目。

项目名称:Teambition

线上地址:http://project.microbu.com/180520/teambition/
源码地址:https://github.com/Lucialiuxi

项目技术栈:

React
React-router-dom
Reudx
NodeJs
Express
Mongodb

项目实现的功能:

  • 1.登录页:

    • a. 注册账号
    • b. 登录账号;
  • 2.项目文件夹页面:

    • a.新建项目文件夹【项目文件名+文件描述】;
    • b.点击修改按钮,修改项目文件名、文件描述,把文件夹移动到回收站;
    • c.给文件夹标星 取消标星;在项目回收站 :删除项目、恢复项目;
    • d.点击一个项目文件夹,就会进去该项目文件夹的详情页的任务一栏。
  • 3.项目文件夹详情页-任务:

    • a.文件夹下都有任务和文件两个块;
    • b.新建一个项目文件夹后,项目文件夹下的任务一栏,就会有默认的三个任务列表:待处理、进行中、已完成;
    • c.新建任务列表:可以在最后一个任务列表后新建任务列表,可以在自己选定的任务列表后新建任务列表;
    • d.新建任务:在任务列表下新建一个任务:任务名称、截止时间、任务紧急程度、标签;选中或者取消选中任务;
    • e.移动或者复制任务:移动或者复制一个任务列表下的任务到本文件的其他任务列表或者其他文件的某任务列表;
    • f.移动或者复制任务列表:可以选定一个任务列表移动或者复制到其他文件的任务;
    • g.删除一个任务列表下的任务,删除任务列表。
  • 4.项目文件夹详情页-文件:

    • a.文件夹新建后,文件夹是空的状态,文件夹有缩略图模式和列表模式这两个显示模式;
    • b.新建一个文件夹,设置文件夹名;
    • c.单个文件的操作:重命名、移动文件夹、复制文件夹;
    • d.多个文件的操作:单选和取消单选、全选和取消全选,复制、移动、删除选中的文件夹以及该文件夹下的子文件夹到其他项目文件下的某一文件夹或者该项目文件夹下的非被选中文件夹以及非选中文件的子孙文件夹。
    • e.点击进入文件内部,可以查看下一级文件夹,一直可以往下查看,文件页面头部区域有显示面包屑导航,会显示从顶层文件进入到了哪一层文件,点击面包屑导航某一层的文件名,可以跳转显示那一层文件,刷新页面保持所在的文件层、面包屑导航显示、选中状态;
    • f.点击回到首页可以回到项目文件夹页面。
  • 5.公共头部:

    • a.在项目文件夹面:搜索文件夹名可以跳转倒相应的文件夹详情页;
    • b.有一个 extend 按钮下有三个跳转按钮:项目、任务、文件,在项目文件内部, 可以点击切换任务栏和文件栏的显示,点击项目就会回到项目文件夹页面;
    • c.显示注册的会员名,可以退出账号;
  • 6.所有的页面对数据的更改都是存到的数据库的,不同账号的退出再次登录的时候,跟前一次保持一致;

  • 7.浏览器前进后退的时候切换路由页面也保持一致的变化。

项目开发中的问题及解决方案:

  • 1.问题:用 setState 状态控制弹框打开之后要操作 DOM,弹框打开之后却找不到弹框里面的元素;
    1. 解决:要开一个定时器,setState 和定时器都是异步的,开一个异步的队列,就可以找到元素了
  • 2.问题:redux 中使用 push 方法给 state 添加数据,state 变为数组的长度;
    1. 解决:使用 Object.assign() 方法拷贝 state,然后使用 concat 方法就可以得到想要的结果;
  • 3.问题:切换路由报错:Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.还没有执行到某组件中的setState代码之前就离开了这个组件,组件就已经取消了挂载,就报错了;
    1. 解决:在组件挂载完成是设置一个组件的数据为 true,在组件取消挂载的时候将这个属性设置未 false,所有的 setState 必须是要在这个属性为true的时候才能执行;
  • 4.react 中 点击事件,ev 事件对象是最后一个最后一个形参,其他参数在 ev 前面,这一个是容易忘记的,跟原生不一样;

项目难点描述:

操作多个文件夹进行移动和复制,在弹框显示所在的项目文件层级的下的文件名,点击项目文件名或者文件名的时候动态请求,更改弹框的层级和高亮;

难点解决:

  1. reducer 文件 workFileMoveAndCopyMaskReducer 存渲染弹框目录的 worksfile 数据;点击文件进入下一层的时候,把已经请求到的当前的数据存到 redux 中,并且存到 localstorage 里面,{ parentId:arr , parentId1:arr1 } ;刷新works页面的时候去 cookie 里面去了存到 redux 里面; Works 组件中componentWillReceiveProps 中去监听路由,不是 works 根路径,切换后的面 包屑的长度比切换前的短,就说明要缩减存在 localstorage redux 里面的 WorkFileMoveAndCopyMaskData 长度;
  2. reducer 文件 workFileCrumbRudcer 存渲染导航面包屑;点击文件进入下一层的时候,就把点击的文件的 id 和名字存起来 ;点击面包屑,如果不是最后一个,就把点击哪个面包屑之后的数组都删掉,每次面包屑操作有变化就存到 cookie ;切换路由的时候,在 Workhead 组件里面;componentWillReceiveProps中去监听路由,路由有变化就请求当下应该显示的新的文件数据;
  3. state 里定义数组 arr 存应该每一个 WorkFilesMenu 高亮的 li id 每次选择移动或者复制一个文件时候,高亮的li是面包屑显示的加上选择要移动和复制的那个文件对应渲染的 li 操作的是多个的时候,高亮的 li 是面包屑显示 每次打开移动和复制弹框之前,存一下高亮的数组,但关闭弹框之后,恢复到打开之前的数组,这样弹框操作关闭之后再打开不会影响前一次的选择高亮的操作

线上地址:http://project.microbu.com/180520/teambition/


创建项目:

新建任务:

新建文件:


以上就是 刘熙 的作品介绍。
小伙伴们,你会通过什么类型的作品来检测自己所学呢?


谨以此作品,寻找优秀公司入职

求职者:WEB 前端开发工程师 刘熙 的话

作为一名技术人员,唯有踏实的钻研学习+完成度较高的作品,才能验证所学。期待加入有任务挑战的公司一起奋斗,让自己有发挥的空间、伴随公司共同成长…

“长风破浪会有时,直挂云帆济沧海”,我已满怀饱满的热情、坚韧的性格、勤奋的态度,等待着机遇与挑战!

  • 联系方式:18513597019
  • 联系邮箱: 1435554190#qq.com (请将#换成@)

  • 求职宣言:no pains no gains

  • 标签:做事很靠谱 抗压力强 活到老学到老
人个专业技能标签:

HTML5 \ CSS3 \ 原生JS \ 面向对象开发 \ OOP编程思想 \ ajax \ axios \ React全家桶 \ Redux实现的实现原理 \ React生命周期 \ Vue全家桶 \ JQuery \ NodeJS \ Express \ MongoDB \ GitHub \ Webpack \ 日常英语交流


进群方式:关注公众号,发送 “vip进群” 关键字,联系我们加入 VIP 微信学习群

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号