乐趣区

react + typescript 博客内容管理系统

RyanCMS
项目地址 https://github.com/m-Ryan/RyanCMS
基于这个项目,你可以了解到

[x] 前后端分离的实践

[x] react 如何搭配 typeScript
– 例如编写基本的接口,枚举、泛型
– 例如使用第三方包如何编写 d.ts

[x] react 服务端渲染
– 如何通过 nodejs 中间层做服务端渲染
– 如何在服务端渲染时向 redux 注入数据
– 如何避免服务端已经调用的接口,在浏览器端重复调用

[x] 一种简单易用的 redux 模型
这样的 redux 模型你用过没

只要这样调用

[x] 装饰器的一些妙用

例如编写一个 autobind 绑定 react 中的 this
例如编写一个 catchError 捕获错误
例如编写一个 loading 设置加载状态等等

TODO

[] 主题切换
[] 自定义栏目
[] 一些优化

项目预览 http://cms.maocanhua.cn
项目预览博客 http://cms.maocanhua.cn/u/Ryan
如何使用
git clone git@github.com:m-Ryan/RyanCMS.git
在 backend 下新建一个文件夹 config,在下面新建 ormconfig.json

里面的内容大概是这样
{
“type”: “mysql”,
“host”: “localhost”,
“port”: 3306,
“username”: “root”,
“password”: “******”,
“database”: “cms”,
“entities”: [
“src/**/**.entity{.ts,.js}”
],
“synchronize”: true,
“cache”: true,
“logging”: false
}
首次使用请先安装依赖

切换到 backend,npm install 或者 yarn
切换到 fontend,npm install 或者 yarn

1. 切换到 backend
yarn start => 本地开发
2. 切换到 fontend
yarn start => 本地开发
打开 http://localhost:3000/ 即可预览

服务端渲染
3. 切换到 backend
yarn start => 本地开发
4. 切换到 fontend

yarn build => 编译前端代码
yarn server:start => 本地开发,使用 nodejs 中间层

打开 http://localhost:3100/ 即可预览
如果你喜欢或者对你有帮助,不妨给我个 star 或者 fork 一下吧❤️

部分页面

退出移动版