Apple的个人博客
动机
一直想学习下typescript的,趁着业余时间,于是就写了这个博客,github 有需要的童鞋可以把代码下到本地呀,本地代码可以直接访问服务器的接口,管理端账号:guest,密码:guest , 觉得有帮助的话就点个star吧(⊙o⊙)…
技术栈
前后端都基于typescript3.0,使用tslint规范代码
后端使用 koa2 提供api接口, 并将所有路由定位到入口 router/index.ts 处理. 使用 react-router分发接口, 后端 API 采用类似 Restful 风格的接口, 数据库是 MongoDB, , 权限控制采用 jwt token 的方式.目前只有两种权限,游客只有浏览的权限,管理员可以增删改查文章
博客和管理端基于 react 框架, 使用 redux 和 redux-saga 统一处理数据, react-router 提供路由, ui 使用antd, 使用fetch请求后端数据.
演示地址
更新
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
)
目录结构
管理端截图
博客截图
有什么代码不规范的代码或者bug欢迎大家提出来
首屏加载有点慢
@jiyarong 服务器是腾讯云的学生优惠套餐,带宽有点小,后期看看怎么优化一下加载速度
做的可以 页面首次加载都慢 .chunk.js 这文件加载都好几秒 有的接口也有几百毫秒 接口数据都 20多K
@weizhuanhua 我想想后期把静态的js放别的地方去,不放在服务器,带宽有点小
@weizhuanhua 啊!!! 不后期,周末就优化加载速度
能问问为什么用react吗?
@Hanggi 因为我的技术栈一直都是react啊,而且个人感觉react相较于vue来说更加灵活一点,写起来舒服,不过每个框架都有自己的优点
更新:修复了文章详情代码只有第一段高亮的bug