react + typescript 博客内容管理系统

RyanCMS

项目地址 https://github.com/m-Ryan/RyanCMS

基于这个项目,你可以了解到

  • 前后端分离的实践
  • react如何搭配typeScript

     - 例如编写基本的接口,枚举、泛型
     - 例如使用第三方包如何编写d.ts,如何扩展window对象
    
  • react服务端渲染

     - 如何通过nodejs中间层做服务端渲染
     - 如何在服务端渲染时向redux注入数据
     - 如何避免服务端已经调用的接口,在浏览器端重复调用
    
  • 一种简单易用的redux模型

    • 这样的redux模型你用过没
    • react + typescript 博客内容管理系统_第1张图片
    • 只要这样调用

      react + typescript 博客内容管理系统_第2张图片

  • 装饰器的一些妙用

    • 例如编写一个autobind 绑定react中的this
    • 例如编写一个catchError 捕获错误
    • 例如编写一个loading 设置加载状态等等
    • react + typescript 博客内容管理系统_第3张图片
  • 写一个webpack插件动态设置主题颜色


项目地址 http://cms.maocanhua.cn

项目演示地址 http://cms.maocanhua.cn/u/Ryan

如何使用

 git clone [email protected]:m-Ryan/RyanCMS.git

在 backend下新建一个文件夹config,在下面新建 ormconfig.json

react + typescript 博客内容管理系统_第4张图片

里面的内容大概是这样

{
  "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/ 即可预览


独立域名绑定

5.如果不想搭博客,又想在自己的域名下有个博客,可以配置nginx映射到绑定域名下,例如 我想绑定到 www.maocanhua.cn

  • 1- 绑定独立域名
    react + typescript 博客内容管理系统_第5张图片
  • 2- 配置nginx

    server {
        listen 80;
        server_name  www.maocanhua.cn;
        location /api {
           proxy_pass  http://cms.maocanhua.cn;  
        }
        
        location / {
             proxy_set_header ACCEPT-HOST $host;
             proxy_pass  http://cms.maocanhua.cn/domain/;  
        }
    }
    
  • 3- 打开绑定的域名,如果能正常访问,即配置成功

如果你喜欢或者对你有帮助,不妨给我个star或者fork一下吧❤️

部分页面

react + typescript 博客内容管理系统_第6张图片

react + typescript 博客内容管理系统_第7张图片

react + typescript 博客内容管理系统_第8张图片

react + typescript 博客内容管理系统_第9张图片

react + typescript 博客内容管理系统_第10张图片

react + typescript 博客内容管理系统_第11张图片

react + typescript 博客内容管理系统_第12张图片

react + typescript 博客内容管理系统_第13张图片

react + typescript 博客内容管理系统_第14张图片

你可能感兴趣的:(blog,javascript,typescript,react.js,nest)