先贴项目地址
https://github.com/seawind8888/Nobibi 记得给个小星星哦
关于 Nobibi (纯属 bibi )
小时候老师教育我们,少说( bi )话( bi ),多做( ban )事( zhuan ),长大才发现,那些说( bi )话( bi )的都成了领( sha )导( bi ),而我依然只会做( ban )事( zhuan )
也许我生来就不会说( bi )话( bi ),算了,那我就不( no )说( bi )话( bi )了
话说多了,反而是坏事(多管闲事多吃 pi,少管闲事少拉 xi )
Nobibi 是一个切图仔全栈梦的开始(呸呸!害 bibi ) ... ( Acton !) Nobibi 是一个纯 JS 的轻量级全栈开源社区,前台基于 next.js ,后台基于 Ant Deignt Pro 开发,接口是常规的 express+mongo。 起初是看到 antd 的comment 组件(这么美的组件,也许就只差一个社区...) So 直接开搞(其实是 css 弱爆了,懒得自写) 它可以作为nextjs+antd+redux-saga轮子的美好的开始(也可以是 nextjs 深渊的结束..) 也可以领略antd+umi+dva+react搭中后台的快感 亦可以用express+babel+mongo体验标准 es6 的 resutful-api 项目的魅力 同样可以让你从此脱离切图仔的苦海,真正的逆袭为全栈 JSer,横踢 Java,脚踩 Python,构建美好和谐... (一顿电炮飞脚之后,一个切图仔横尸了街头)
架构设计
- 前台项目 - 考虑到内容型需 seo 的依赖,加之 antd 依赖 react 生态,所以考虑用 nextjs(后来才发现还是 nuxt 大法好,盲目崇拜 React 生态也是个坏事)
- 后台项目 - 后台项目使用 Ant Design Pro 开源,开发一个中后台还是嗷嗷快的,但还是存在些小问题( 1.url 变化监听问题,频繁请求; 2.表单验证组件内不能嵌套带有 value 属性的组件,否则调试会不停警告,需再封装一层)
- 后端接口项目 - express + mongo 结构,全 es6 语法(本来想用 node10,但考虑兼容问题,还是用 babel-register 了)
效果预览
前台界面
后台界面
关于 nextjs+antd 采坑心得
样式是个神坑
- 使用 antd 的Layout组件样式抖动
- pages 目录下 js 文件文件引入 less,在 router 跳转后样式会失效(把样式集合放到跟 less 文件) getInitialProps 为 next 服务端渲染钩子函数
- layout 无法使用 getInitialProps 方法 https://github.com/zeit/next.js/issues/928
- next>7.0.2 会报 antd theme 样式文件引入错误,需更改.babelrc 文件配置 https://github.com/zeit/next.js/issues/6181