分享一波~【koa + mongodb】【webpack + react + redux + ES6 】的开源博客
发布于 2 年前 作者 wtfjun 5196 次浏览 来自 分享

主页面: 屏幕快照 2017-07-24 下午1.12.10.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')
17 回复

求指点,求交流,求star~

咋没人

更新:增加文章分类。游客可发帖留言

koa 怎么入门

@meooxx 社区里有比较好的入门帖子,可以跟着做一做。https://cnodejs.org/topic/5709959abc564eaf3c6a48c8

现在做博客的太多了,我想知道楼主有没有打算移植到手机APP上?

@wtfjun 那个帖子太粗糙了,有没有详细一点的

不错。可否先看看再说呢。

我iPhone6sp显示有点问题。。

@CRAZYFAKE 目前没做响应式,只支持pc,下个版本大概会做吧。。关键是设计问题呀

@lei2231 做一个自己的博客,用上自己喜欢的技术栈,不断完善,平时还可以总结知识,既可以帮助别人又能帮助自己,很喜欢这种感觉,大概就是freestyle吧~。我这个博客能完善的地方还有很多,以后可能会做app版的吧,不过短期内还没这个打算~

@wtfjun 恩,学习了!

@lei2231 反手来个star git

新写了几篇react源码分析的文章

@wtfjun 关于 react 分析,这边也可看看,非常棒哦!Under-the-hood-ReactJS

@DevinXian 真的好棒!感谢

对于这种东西我只看前端页面,程序都一个鸟样,没点心意,我没说楼主。。

回到顶部