npm install
npm start
浏览器访问 http://localhost:3000
墨刀面试作业,目前所有数据都是假数据,色值取值于作业题,前端UI框架使用Ant Design。
思路整理:
在写代码之前我先分析作业题上页面的整体布局,并做了功能上的区分。
大概分了以下功能模块,我把单个方块视图抽象成一个App的概念
- App过滤组件,当切换不同类型的应用时,负责切换不同应用的数据源。
- App列表模块,负责显示一个或者多个符合条件的应用
- 这里每个应用的显示和数据封装到AppCard组件,这样比较好控制逻辑,感觉上也符合封装的概念
- “新创建应用”虽然外观和单个App一样,但是作用却不一样所以我做了一个CreateApp的组件来单独实现。这样可以把逻辑分开,方便以后的扩展