• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

wtfjun/chenxj-blog: 一个使用react+redux+koa实现的开源的个人博客,欢迎star&fo ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

wtfjun/chenxj-blog

开源软件地址:

https://github.com/wtfjun/chenxj-blog

开源编程语言:

JavaScript 79.8%

开源软件介绍:

基于 koareact 搭建的个人博客,风格仿照 【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

技术栈

前端:

后台:

浏览器兼容

  • 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')



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap