Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wtfjun/chenxj-blog
一个使用react+redux+koa实现的开源的个人博客，欢迎star&fork
https://github.com/wtfjun/chenxj-blog
Last synced: about 1 month ago
JSON representation
一个使用react+redux+koa实现的开源的个人博客，欢迎star&fork
- Host: GitHub
- URL: https://github.com/wtfjun/chenxj-blog
- Owner: wtfjun
- Created: 2017-07-07T06:18:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-07-24T03:51:02.000Z (over 7 years ago)
- Last Synced: 2024-08-03T09:10:52.120Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 37.4 MB
- Stars: 138
- Watchers: 5
- Forks: 37
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-star - chenxj-blog
README
基于 ``koa`` 和 ``react`` 搭建的个人博客，风格仿照 [【ECMAScript 6 入门】](http://es6.ruanyifeng.com/)
基于前后端分离的思想，后端提供接口，前端调用
在线地址请点击这里： [在线地址](http://47.52.5.137:4011)
开源代码请点击这里： [github地址](https://github.com/wtfjun/chenxj-blog)
```bash
$ node -v
v8.0.13
$ npm -v
4.5.0
```
## 命令使用
### 安装 && 运行
``` bash
$ cd chenxj-blog
$ npm install // src包安装
$ cd server
$ npm install // 后台包安装
$ node run // 启动后台
$ cd ../
$ npm run dev // 启动前端
```
#### 命令
``` bash
// 开发
$ npm run dev
// 打包
$ npm run build
```
## 技术栈
前端：
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- es6
后台：
- [email protected]
- [email protected]
- asyn/await
## 浏览器兼容
- Chrome
- Firefox
- Safari
- IE10+
## 简单介绍
异步fetch结合action的使用：
```
// 获取所有文章id、title
export const getArticles = () => {
return dispatch => {
const url = `${CONFIG.server}/api/getArts`
return fetch(url, {
method: 'POST',
// 设置这个header，才能正确parse
headers: { 'Content-Type': 'application/json' },
mode: 'cors'
})
.then(response => response.json())
.then(data => {
console.log(data)
dispatch({
type: GET_ARTICLES,
articles: data.articles
})
})
}
}
```
```
// 获取所有文章action对应的reducer
case GET_ARTICLES:
return Object.assign({}, defaultIssuesState, {
isFetching: false,
articles: action.articles
})
```
异步dispatch（action）的处理
```
componentDidMount() {
const { dispatch } = this.props
NProgress.start()
dispatch(getArticles())
.then(() => {
const { _id } = this.props.articles[0]
dispatch(getArticleById(_id))
.then(() => {
NProgress.done()
this.setState({
article: this.props.article
})
})
})
}
```
jsonwebtoken在koa的实现
```
// token 验证
router.post(
'/valid',
async(ctx, next) => {
const { token } = ctx.request.body
try {
const decoded = jwt.verify(token, 'secret')
// 过期
if (decoded.exp <= Date.now()/1000 ) {
ctx.body = {
status: 0,
msg: '登录状态已过期，请重新登录'
}
return
}
if (decoded) {
// token is ok
ctx.body = {
status: 1,
msg: '登陆验证成功'
};
return;
}
} catch(e) {
if(e) {
ctx.body = {
status: 0,
msg: e.message
}
}
}
}
)
```
让nodejs支持es6，注意：nodejs主持async／await的话要8.0以上
```
require('babel-core/register')
require('babel-polyfill')
require('./app')
```