react + typescript 博客内容管理系统

xingqiba 发布于2019-08-23 16:19 / 1150人阅读

摘要：项目地址基于这个项目，你可以了解到前后端分离的实践如何搭配例如编写基本的接口，枚举泛型例如使用第三方包如何编写如何扩展对象服务端渲染如何通过中间层做服务端渲染如何在服务端渲染时向注入数据如何避免服务端已经调用的接口，在浏览器端重

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

里面的内容大概是这样

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

3- 打开绑定的域名，如果能正常访问，即配置成功

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

部分页面

GPU云服务器云服务器 TypeScript typescript javascript 博客系统访问博客系统

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102906.html

TypeScript - 一种思维方式

摘要：怎么影响了我的思考方式对前端开发者来说，能强化了面向接口编程这一理念。使用的过程就是在加深理解的过程，确实面向接口编程天然和静态类型更为亲密。摘要：学会TS思考方式。原文：TypeScript - 一种思维方式作者：zhangwang Fundebug经授权转载，版权归原作者所有。电影《降临》中有一个观点，语言会影响人的思维方式，对于前端工程师来说，使用 typescript 开...

noONE 2019-05-22 15:27 评论0 收藏0
初次尝试使用typescript开发react-native

摘要：搭建开发环境安装和命令行工具是提供的替代的工具，可以加速模块的下载。的命令行工具用于执行创建初始化更新项目运行打包服务等任务。 typescript是javascript的超集，在javascript的基础上添加了可选的静态类型，非常适合团队开，这次我们尝试使用typescript来开发react-native应用。搭建react-native开发环境安装yarn和react-na...

Hwg 2019-08-21 15:12 评论0 收藏0
typescript - 一种思维方式

摘要：怎么影响了我的思考方式对前端开发者来说，能强化了面向接口编程这一理念。使用的过程就是在加深理解的过程，确实面向接口编程天然和静态类型更为亲密。电影《降临》中有一个观点，语言会影响人的思维方式，对于前端工程师来说，使用 typescript 开发无疑就是在尝试换一种思维方式做事情。其实直到最近，我才开始系统的学习 typescript ，前后大概花了一个月左右的时间。在这之前，我也在...

CKJOKER 2019-08-23 17:05 评论0 收藏0
翻译 | 开始使用 TypeScript 和 React

摘要：原文地址原文作者译者校对者和其他人有一些关于比较好的博文，跟随这些博文，我最近开始使用。今天，我将展示如何从零开始建立一个工程，以及如何使用管理构建过程。我也将陈述关于的第一印象，尤其是使用和。原文地址：Getting started with TypeScript and React 原文作者：Jack_Franklin 译者：luxj 校对者：veizz Tom Dale...

superw 2019-08-21 16:27 评论0 收藏0