0 results found
Utone
记博客搭建
2018/08/22 Code React DvaJs Umi

1、之前写过 WordPress 版的博客,使用别人造好的轮,但是始终感觉缺点什么 博客地址
2、还用过 Hexo 搭建过博客,基本也是拿来主义 博客地址
3、趁着工作中使用 React、Express 前后端分离的项目结构,决心搭建一个属于自己的博客系统
4、奉行”先有再优“、后续会不断优化完善博客
5、感谢大雄博客,灵感及页面样式从中获取很多

概述

  • 前后端分离,前端使用 React 框架,分为前台、后台两个项目。后端使用 Express 框架
  • React
    1、React 版本为 "react": "^16.4.1"
    2、使用 Ant Design 的一些基本组件,如弹出、表单组件,版本为"antd": "^3.8.0"
    2、使用 Dvajs 和 Umi,重构了博客系统,也修改了样式布局
    3、使用 scss,css 的扩展,写样式更加简洁
  • Express
    1、使用 Express 的脚手架搭建、版本为 "express": "~4.16.0"
    2、在加载路由前后,使用了一些中间件,后续将中间件整理出来
    3、使用 JWT,来验证请求
import { Fragment, PureComponent } from 'react'
import { BackTop, Icon, Row, Col } from 'antd'
import { connect } from 'dva'
// import { WiredCard } from "wired-elements";
import withRouter from 'umi/withRouter'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import Header from './header/components/Header'
import Footer from './footer/components/Footer'
import Siderbar from './siderbar/components/siderbar'

class Layout extends PureComponent {
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.location.pathname === this.props.location.pathname) {
      return false
    }
    return true
  }

  /**
   * xs  <576px
   * sm  ≥576px
   * md  ≥768px
   * lg  ≥992px
   * xl  ≥1200px
   * xxl ≥1600px
   */
  render() {
    const { children, location } = this.props

    // 前台布局
    return (
      <Fragment>
        <div className="body">
          <Header />
          <div className="main">
            <TransitionGroup>
              <CSSTransition
                key={location.key}
                appear={true}
                classNames="example"
                timeout={{ enter: 300, exit: 100 }}
              >
                {children}
              </CSSTransition>
            </TransitionGroup>
          </div>
        </div>
        <Footer />
      </Fragment>
    )
  }
}

function mapStateToProps(state) {
  return {}
}

export default withRouter(connect(mapStateToProps)(Layout))
请杯咖啡呗~
支付宝
微信
本文作者:Utone
版权声明:本文首发于Utone的博客,转载请注明出处!