基于 koa 和 react 搭建的个人博客，风格仿照 【ECMAScript 6 入门】
基于前后端分离的**，后端提供接口，前端调用
在线地址请点击这里： 在线地址
开源代码请点击这里： github地址
$ node -v
v8.0.13
$ npm -v
4.5.0$ cd chenxj-blog
$ npm install // src包安装
$ cd server
$ npm install // 后台包安装
$ node run // 启动后台
$ cd ../
$ npm run dev // 启动前端// 开发
$ npm run dev
// 打包
$ npm run build前端：
后台：
- [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')
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent