主页面：
image.png
发布文章：
image.png
前端基于react、redux、webpack，接口提供使用koa、mongodb 搭建的个人博客，风格仿照 【ECMAScript 6 入门】
基于前后端分离的思想，后端提供接口，前端调用
只看前端代码可忽视server文件夹
在线地址：点击这里
开源代码请点击这里： github地址
$ node -v
v8.1.3
$ 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
技术栈
前端：
- react@15.3.1
- react-router@3.0.5
- redux@3.6.0
- webpack@1.13.2
- es6
后台：
- koa@2.0.0-alpha.8
- mongoose@4.11.1
- 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')
