基于typescript3.0 koa2 react 的个人全栈博客项目,学习ts的童鞋可以踩进来

#1

Apple的个人博客

动机

一直想学习下typescript的,趁着业余时间,于是就写了这个博客,github 有需要的童鞋可以把代码下到本地呀,本地代码可以直接访问服务器的接口,管理端账号:guest,密码:guest 觉得有帮助的话就点个star吧(⊙o⊙)…

技术栈

前后端都基于typescript3.0,使用tslint规范代码

后端使用 koa2 提供一个简易的 http 服务器, 并将所有路由定位到入口 router/index.ts 处理. 使用 react-router分发接口, 后端 API 采用类似 Restful 风格的接口, 数据库是 MongoDB, , 权限控制采用 jwt token 的方式.目前只有两种权限,游客只有浏览的权限,管理员可以增删改查文章

博客和管理端基于 react 框架, 使用 redux 和 redux-saga 统一处理数据, react-router 提供路由, ui 使用antd, 使用fetch请求后端数据.

演示地址

Apple的个人博客

Apple的个人博客管理端

更新

1.更新typescript 到3.0。

2.解决服务器接口本地跨域的问题。

Usage

安装

git clone https://github.com/fxy5869571/blog-react.git

cd blog-react

yarn install

入口

import { LocaleProvider } from 'antd'
import zhCN from 'antd/lib/locale-provider/zh_CN'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { applyMiddleware, createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'
import './index.less'
import reducer from './reducers'
import RouterMap from './router/RouterMap'
import rootSaga from './saga'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(reducer, applyMiddleware(sagaMiddleware))
sagaMiddleware.run(rootSaga)
ReactDOM.render(
  <LocaleProvider locale={zhCN}>
    <Provider store={store}>**加粗示例**
      <RouterMap />
    </Provider>
  </LocaleProvider>,
  document.getElementById('root') as HTMLElement
)

目录结构

管理端截图

博客截图

2 Likes
#2

有什么代码不规范的代码或者bug欢迎大家提出来

1 Like
#3

更新:修复了文章详情代码只有第一段高亮的bug

#4

你好,作者``` 谢谢你的分享; 最近想学习下react集成ts的写法, 嵌套路由总是报错,是真的尴尬—

#5

把项目克隆到本地,怎么进入后台管理系统呢?还有如何写文章呢?(小白一个,还望大佬多多指教)

#6

后台项目是另外一个项目 地址

#7

你可以参考我的项目看看呀

#9

博主你好,我也刚刚学习,遇到一些问题想向你请教一下,怎么私信你呢

#10

大佬太惨了吧 被删库跑路了

#11

我数据库是没有账号密码的,然后我把腾讯云对外的端口全放开了,然后就被别人删了两次

#12

可以加我微信啊fxy996276475

#13

谢谢大神无私的共享,谢啦

#15

@fxy5869571 大神能问一下有关 react-loadable的问题吗?