nextjs开发的JS全栈开源社区Nobibi,包含前后台(JSer永不为奴!)
发布于 5 年前 作者 seawind8888 6890 次浏览 来自 分享

先贴项目地址 记得给个小星星哦(一给屋里giaogiao,mua)

关于Nobibi(纯属bibi)

小时候老师教育我们,少说(bi)话(bi),多做(ban)事(zhuan),长大才发现,那些说(bi)话(bi)的都成了领(sha)导(bi),而我依然只会做(ban)事(zhuan)
也许我生来就不会说(bi)话(bi),算了,那我就不(no)说(bi)话(bi)了
话说多了,反而是坏事(多管闲事多吃pi,少管闲事少拉xi)

Nobibi 是一个切图仔全栈梦的开始(呸呸!害bibi) … (Acton!) Nobibi 是一个纯 JS 的全栈开源社区,前台基于nextjs,后台基于Ant Deignt Pro开发,接口是常规的express+mongo。 起初是看到 antd 的comment 组件(这么美的组件,也许就只差一个社区…) So直接开搞(其实是 css 弱爆了,懒得自写) 它可以作为nextjs+antd+redux-saga轮子的美好的开始(也可以是nextjs深渊的结束…) 也可以领略antd+umi+dva+react搭中后台的快感 亦可以用express+mongo体验标准的resutful-api项目的魅力 同样可以让你从此脱离切图仔的苦海,真正的逆袭为全栈JSer,横踢Java,脚踩Python,构建美好和谐… (一顿电炮飞脚之后,一个切图仔横尸了街头)

架构设计

  • 前台项目 - 考虑到内容型需seo的依赖,加之antd依赖react生态,所以考虑用nextjs(后来才发现还是nuxt大法好,盲目崇拜React生态也是个坏事)
  • 后台项目 - 后台项目使用Ant Design Pro开源,开发一个中后台还是嗷嗷快的,但还是存在些小问题(1.url变化监听问题,频繁请求;2.表单验证组件内不能嵌套带有value属性的组件,否则调试会不停警告,需再封装一层)
  • 后端接口项目 - express + mongo 结构,全es6语法(本来想用node10,但考虑兼容问题,还是用babel-register了)

Nobibi-structure.png

效果预览

前台界面 screenshot1.png screenshot2.png

后台界面 role@2x.png

关于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
11 回复

code showed ,nice.

666。想问下楼主的架构图是用什么画的?

为什么说还是nuxt好呢? 我记得next.js可以结合nuxt一起用吧?

其实我也喜欢阿里react那套

@ycczkl next.js是react生态 nuxt是vue生态 俩真不一样 nuxt好主要因为:1.配置简单 2.中文文档

@Choicelin git里有在线地址

回到顶部