todo-list 项目题目总结

这个 todo-list 项目，很简朴，前端运用 react，后端 nodejs 运用 koa2 举行开辟。数据库运用 Mysql。之所以要挑选这些框架、数据库，是由于我都不会这些手艺，为了进修，所以就运用这些手艺举行开辟。

在这次的小项目开辟中，也许用了1个月的时刻吧，日常平凡有空就最先开辟或许进修。

而这篇文章，主假如记录了在进修开辟历程，碰到的一些题目，是怎样处置惩罚的。

运用的框架、库

前端

项目脚手架是用 create-react-app 天生的

• react
• react-router
• redux

后端

后端用的是 nodejs

• koa2
• mysql

前端开辟碰到的题目

create-react-app

css module 题目

用 create-react-app 天生的项目后，再用 npm run eject 把 webpack 设置文件天生出来（由于要修正设置）。底本盘算运用 css module + scss 举行开辟的。然则我在设置完 webpack 以后，css module 有个题目处置惩罚不了

经由过程 composes 援用的类，在源文件运用了变量或许 @include 都是没有结果的，另有运用了 postcss-px2rem 这个插件，也是没法转成 rem 的。

不晓得是我设置那里涌现了题目，所以就临时运用 scss 举行开辟，背面再找下有没有现成的设置，看看是怎样做的。

其他增加的设置

只是简朴得增加了 scss-loader 和 postcss-px2rem 插件举行运用。

运用 postcss-px2rem，在 css 中写 px，会依据设置参数，转译后变成 rem。轻易挪动端开辟。

其他临时没有什么大的题目，create-react-app 和 vue-cli 比拟，功用也挺完全的。然则开辟和打包的是两个设置文件，个中大众部份没有抽出来，以为这点就比 vue-cli 不好了。

react

由于我有 vue 的基本，所以以为进修 react 的时刻并不以为很难，固然还没真正在事变项目中运用 react 开辟，所以许多题目都没碰到。

react 是用 jsx 举行编写模板的。我本身从 vue 的 template 转到 react 的 jsx 以为照样没什么题目。

react 自带的 api 并不多，许多都要去看看有什么库能够用，而挑选库的时刻，要看看其他开辟者的引见、评价等，再去挑选运用，另有 github 的 star 数。

动画库挑选

像要完成动画结果时，vue 能够直接自带的 <transition> 的组件就好了，很轻易完成：

<transition name='className'>
  <div v-if='isShow'>test</div>
</transition>

再编写 css 动画类就好了。而 react 能够找一些库去完成，没有什么束缚，挑选更多。

我这里就运用了 react-motion 这个动画库。能够完成更多物理结果的的动画。

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

官方 demo 看起来也以为挺简朴的。用起来以为还行。

当动画完毕后，有一个钩子函数能够运用 onRest

其他一些功用组件，都是本身尝试去编写的，像日历组件、picker 组件、toast 组件等。由于项目简朴，所以须要的组件不多。

react-router

刚最先看的时刻，晓得 react-router (背面直接说 router 了) v4 版本和之前的版本区分有点大。然后挑选了 v4 版本。v4 版本的 router，是没有任何的钩子函数，我就以为懵逼了。。。拦截器功用要怎样完成。。。路由权限要怎样完成。一个 2.8W star 数的库，一定有处置惩罚要领。

关于 React Router 4 的统统

人人能够看下上面这篇文章，协助很大。

完成拦截器和路由权限功用

这个实在挺简朴的，想一下就能够了，在每一个 Route 组件，包多一层父级组件，每次婚配 Route 时，都要先经由那层父级组件，推断要输出什么。

const AuthRoute = ({ component: Component, redirect, loginStatus, ...rest }) => (
  <Route {...rest} render={props => (
    loginStatus ? (<Component {...props} />) : (
      <Redirect to={redirect || {
        pathname: '/home'
      }} />
    )
  )} />
)

依据传进去的 loginStatus ，推断是要重定向照样输出原组件。这类做法就是“高阶组件”，接收一个组件参数，返回一个组件。

运用的时刻就是如许：

<AuthRoute path='/group/:id' component={GroupPage} loginStatus={loginStatus} />

但是贫苦的是，只需涉及到要权限推断的，就要用这层组件包裹。。。没用到的就不须要。但是大部份页面都是须要的。

怎样在 js 里举行路由调解？

react-router-dom 库是有依靠 history 这个库的。在组件里，用 withRouter （这个组件是在 react-router-dom 内里的）包住当前组件，就会在 props 涌现 histroy、location、match 这三个对象。history 具有 push、replace、go 等等多种路由操纵的要领。

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

class Com extends Component {
  constructor(props) {
    super(props)
    // this.props.history....
  }
  
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

export default withRouter(Com)

假如我在纯 js 内里，要怎样调解？

要求 api 我是用 axios，我想在 axios 拦截器里，当推断后端返回你没有登录，就要自动跳去登录页。

网上有个教程是，运用 history 库，实例化一个 hisotry 对象，就能够 push 、replace 等。然则谁人好像是在 v3 之前的版本才有用。在 v4 中，路由的 url 是变化了，然则内容没有变。

react-router v4 运用 history 掌握路由跳转

这个人人能够看下这位先辈写的要领。前两种是在组件里运用的。第三种要领是：

import { Router, Link, Route } from 'react-router-dom'
import history from './history'

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      ...
    </Router>
  </Provider>,
  document.getElementById('root'),
)

把 history 传到 Router 组件里。然后其他地方就能够运用了。但这里有个题目，Router 组件是没法用 BrowserRouter 其他的一些功用，像 basename。这个以为照样很必要，Router 组件是没有这个属性的选项的。我如今做的项目，基本上每一个都要设置 basename（用的是 vue 开辟的项目）。虽然能够用其他一些要领去增加这个 basename，但以为很贫苦。

然后我就看了第四种要领。。。直接从 react-router-dom 内里的 BrowserRouter 源码里 copy 下面，本身封装了一个组件：

import React from "react"
import { setHistory } from '@/utils/history'
import { createBrowserHistory as createHistory } from "history"
import { Router } from 'react-router-dom'

class BrowserRouter extends React.Component {

  history = createHistory(this.props)

  render() {
    setHistory(this.history)
    return <Router history={this.history} children={this.props.children} />
  }
}

export default BrowserRouter

实在 Router 组件，加上 history 对象和 children ，就是一个 BrowserRouter。在内里天生 history 对象，我本身就缓存起来。那里要用，我就直接挪用它就好了。

然后运用这个“假的” BrowserRouter，其他功用和“真的”是一样的。在内里加 basename 也是能够的。

如许我在 axios 里就能够跳转路由

import axios from 'axios'
import { getHistory } from '@/uitls/history'

axios('http://xxxx.com/api').then(res => {
    if (res.code === 500) {
        getHistory().push('/login')
    }
})

上面就是我在 react-router 临时碰到的题目。

redux

redux 也没什么好说的，教程网上搜搜或许看文档就好了。 redux 刚最先用的时刻，以为有别扭。。。转不过去，只能照搬复制粘贴用。能够用着用着，才邃晓，额。。原来是这么回事，然后再去刷文档。。。

主假如怎样在 axios 里，更新 store 的数据。这个也很简朴

store.dispatch(setToast({ status: true, title: '请从新登录' }))

react 和 vue 开辟时的区分

以为做一样的事变，react 须要写的代码轻微会多点，以为也贫苦点，不晓得是否是还没熟习，用 vue 以为写起来很爽。

vue 供应的功用比较周全，像 computed, watch 这些，react 的话好像是没有供应的？react 更多须要找现成的库。不过自从学了 react，es6 也要越发熟练了。。。

前端总结

全部前端开辟起来，实在还好。一些大众处置惩罚的题目，在背面都处置惩罚到了。但照样要看看其他项目， 开辟是怎样做好束缚，组件是怎样分类等等。

后端开辟碰到的题目

相对前端，后端基本即是没有，靠看文档、搜刮、问同事，从而处置惩罚一些题目。

后端重要要做的是供应接口，举行简朴的增编削查。数据库运用 Mysql。nodejs 框架就运用 koa2（由于没学过，就决议用它了）。

项目运用 koa2-generator 天生的。开箱既用。再本身增加一些库就好了。

衔接 mysql 的话，用 npm 的一个 mysql 包就好了。

其他的话，后续更新吧~~

末了附上 项目 github 地点

另有体验地点