react + typescript 博客内容管理系统

2019年9月20日 147次阅读来源: Ryan

RyanCMS

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

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

前后端分离的实践

react如何搭配typeScript

 - 例如编写基本的接口，枚举、泛型
 - 例如使用第三方包如何编写d.ts,如何扩展window对象

react服务端渲染

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

一种简单易用的redux模型
- 这样的redux模型你用过没
- 只要这样调用
装饰器的一些妙用
- 例如编写一个autobind 绑定react中的this
- 例如编写一个catchError 捕获错误
- 例如编写一个loading 设置加载状态等等
写一个webpack插件动态设置主题颜色

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

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

如何使用

 git clone git@github.com:m-Ryan/RyanCMS.git

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

《react + typescript 博客内容管理系统》

里面的内容大概是这样

{
  "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- 绑定独立域名

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/;  
    }
}