redux+express+MongoDB 学习

作者: magic_pill | 来源:发表于2018-08-28 20:03 被阅读39次

一、react 开发环境

create-react-app 官方脚手架，生成文件格式，安装：

cnpm i -g create-react-app

创建一个应用：

create-react-app yjw

进入到 yjw 目录下：
- 可以看到自动生成的几个文件：

README.md、package.json、src、node_modules、public

执行命令：npm start；
在浏览器输入：localhost:3000

脚手架相关命令：

如何使用 create-react-app ：
①npm install --save redux : 安装第三方库 redux；
②npm run eject : 生成配置文件，可以自定义配置 webpack；
③扩展 package.json 里的 script 字段，扩展 npm run 命令。

二、ES6 简单介绍

ES6 的详细学习请参照 ES6 的快速入门与使用。
ES6 是新的 JavaScript 语法标准；
使用 babel 语法转换器，使其支持低版本浏览器；
流行的库基本都是基于 ES6 构建，React 默认使用 ES6 新语法开发。

1、块级作用域、字符串、函数

1.1、块级作用域

定义变量使用 let 替代 var；
const 定义不可修改的变量；
作用域：{}。

1.2、字符串

模板字符串：两个反引号，在两个反引号之间获取变量：${变量名}；

1.3、函数

可以设置参数默认值；
箭头函数：
- 参数只有一个时，参数外面的小括号可以省略；
- 只有一条 return 语句时，可以省略 return 和大括号；
- 可以保持 this 作用域。
展开运算符。

2、对象扩展、解构

2.1、对象的扩展：

Object.keys、values、entries：
- keys：获取到对象 key 组成的数组；
- values：获取到对象 value 组成的数组；
- entries：获取到两个数组，分别有对象的 key 和 value 组成；
- 说明：定义一个对象时，键可加引号可不加引号，默认会被认为是一个字符串，如果想要用外面定义的变量作为 key，可按如下方式使用（计算属性）：

const name = 'yijiang';
const person = {
  [name] : 18
};

对象方法简写，计算属性：

const obj = {
  hello:function(){//之前写法},
  hello1(){//现在写法}
}

展开运算符（不是 ES6 标准，但是 babel 也支持）

//合并两个对象
const obj1 = {name:'yijiang',age:18};
const obj2 = {score:100,height:180};
const obj3 =  {...obj1,...obj2};

2.2、解构赋值

函数也可以多返回值了：
- 数组解构；
- 对象解构。
数组解构：

const arr = ['yijiang',18];
const [name,age] = arr;

对象解构：

const obj = {name:'yijiang',course:'computer'};
const {name,course} = obj;

3、类、模块化等

3.1 类

提供 class 的语法糖：
- 是 prototype 的语法糖；
- extends 继承；
- constructor 构造函数。
ES6 中新出现的数据结构：
- Set，元素不可重复；
- Map；
- Symbol。

3.2 模块化

ES6 中自带了模块化机制，告别 seajs 和 require.js
- export , export default;
- import {}，import；

export 的内容，在 import 时，需要使用 {} 来导入变量名/类名；
export default 的内容，在 import 时直接导入变量名/类名即可。

node 现在还不支持，还需要用 require 来加载文件。

3.3 其它：还有一些特性，虽然不在 ES6 的范围，但是也被 babel 支持，普遍被大家接受和使用（需要安装插件）

对象扩展符（Babel-plugin-transform-object-rest-spread 插件，支持扩展符号），函数绑定；
装饰器；
async await。

3.4 其它的特性

promise；
迭代器和生成器；
代理 proxy。

三、express + mongodb 基础

express + mongodb 开发 web 后台接口；
express 开发 web 接口；
非关系型数据库 mongodb（存储类似 json 的数据）；
使用 nodejs 的 mongoose 模块链接和操作 mongodb。

1. express

基于 nodejs，快速、开发、极简的 web 开发框架；
安装： npm install --save express。
创建服务器：

//新建一个文件 server.js
const express = require('express');

const app = express();

app.get('/',function(req,res){
  res.send('<h2>Hello World</h2>');
});
//返回 json 数据
app.get('/data',function(req,res){
  res.json({name: 'yjw',age: 18});
})
app.listen(3002, ()=>{
  console.log('监听到了端口 3002');
})
//在终端进入到 server.js 所在的文件夹，然后执行 node server.js 即可启动服务
//如果对文件中的内容进行修改，必须要先重新启动才能生效（ctrl + c，node server.js）
//如果想要修改 server.js 中的文件，不进行重启就使修改的内容生效，可使用插件 nodemon。首先全局安装 nodemon 插件；然后使用 nodemon server.js 进行启动；以后刷新浏览器页面即可。

其它的特性：
- app.get、app.post 分别开发 get 和 post 接口；
- app.use 使用模块；
- res.send（文本）、res.json（json）、res.sendfile（文件）响应不同的内容。

2. mongodb + mongoose

非关系型数据库
官网 https://www.mongodb.com/ 下载安装 mongodb；
安装 mongoose：npm install mongoose --save；
通过 mongoose 操作 mongodb，存储的就是 json，相对 mysql 来说，要易用很多。

2.1. mongoose 的基础使用

connect 链接数据库；
定义文档模型，schema 和 model 新建模型；
String、Number 等数据结构；
create、remove、update 分别用来增、删、改的操作；
find 和 findOne 用来查询数据。

//找到 mongodb 安装目录，然后在控制台执行 mongo，即可连接上 MongoDB
const express = require('express');
const mongoose = require('mongoose');
// 链接 mongoose
const DB_URL = 'mongodb://127.0.0.1:27017';
mongoose.connect(DB_URL);
// 此句测试 是否链接成功，可以删除
mongoose.connection.on('connected',function(){
  console.log('mongoose 链接成功啦~')
})
// 类似于 mysql 的表，mongo 里面有文档、字段的概念
const User = mongoose.model('user',new mongoose.Schema({
  name:{type:String,require:true},
  age:{type:Number,require:true}
}))
//增加数据
// User.create({
//   name:'mike',
//   age:18
// },function(err,data){
//   if(!err){
//     console.log('增加数据成功:',data)
//   }else{
//     console.log('增加数据失败:',err)
//   }
// })
// 删除数据
// User.remove({name:'yijiang'},function(err,data){
//   console.log('删除数据成功：',data)
// })
// 更新数据，$set 可以省略
User.update({name:'mike'},{'$set':{age:28}},function(err,data){
  console.log('更新数据成功：',data)
})

// 新建app
const app = express();

app.get('/',function(req,res){
  res.send('<h2>Hello New App</h2>')
})

app.get('/data',function(req,res){
  // 查询数据
  User.find({name:'mike'},function(err,data){ //还有 findOne 方法，该方法返回一个 json
    res.json(data)
  })
})

app.listen(9003,function(){
  console.log('新建 APP')
})

2.2. express + mongodb 实战（后面讲解）

mongod --config /usr/local/etc/mongod.conf 后台启动；
express 结合 mongodb；
封装 mongoose。

2.3. 后续进阶

express 和 mongodb 结合：
- mongodb 独立工具函数；
- express 使用 body-parser 支持 post 参数；
- 使用 cookie-parser 存储登录信息 cookie。

四、React 基础简述

这里只是简单回顾一下 props、state、生命周期函数的相关知识，详细学习请参考：React 之高级使用
需要绑定 this 的三种解决方案：
- ①在 constructor 方法中对方法进行绑定： this.aaa = this.aaa.bind(this)；
- ②调用函数时，使用箭头函数进行调用() => this.aaa()；
- ③定义函数时，使用箭头函数。
安装 babel-plugin-import，进行按需加载：
- 在 package.json 中的 plugins 按需加载：

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import",{"libraryName": "antd-mobile","style": "css"}]
    ]
  }

对 props、state 传值的简单使用：

import React,{Component} from 'react'
import {Button, List} from 'antd-mobile'
// import 'antd-mobile/dist/antd-mobile.css'

class App extends Component{
  render(){
    const director = '李云龙';
    return (
      <div>
        <h2>独立营营长：{director}</h2>
        <Yiying boss='yijiang'/>
        <Erying name='jiang' />
      </div> 
    )
  }
}

// 如果组件只有 render 函数，还可以用函数的形式写组件
function Erying(props){
  return <h2>二营营长：{props.name}</h2>
}

class Yiying extends Component{
  constructor(props){
    super(props);
    this.state = {soldiers:['虎子','狗子','嘎子']}
  }

  show(e){
    alert(e.target.innerText)
  }

  clickAntButton(e){
    alert(e.target.innerText)
  }

  render(){
    return (
      <div>
        <h2>一营营长：{this.props.boss}</h2>
        <Button type='primary' onClick={this.clickAntButton}>这里是ant Button </Button>
        <List renderHeader='士兵列表' renderFooter='收兵'>
          {this.state.soldiers.map((v,idx) => {
            return (
              <List.Item 
                extra='快来参军吧' 
                key={idx} 
                onClick={this.show}
                arrow='up'
              >士兵：{v}</List.Item>)
          })}
        </List>
      </div>
    )
  }
}

export default App

生命周期函数执行顺序图：

生命周期图.png

五、redux 的使用

1.redux基本概念

是一个专注于状态管理的库：
- redux 专注于状态管理，和 react 解耦，也可以和 vue、angular 结合使用；
- 单一状态，单向数据流；
- 核心概念：store、state、action、reducer。
redux 的结构可以模仿如下结构：

redux 结构.png
redux 的使用方法：

redux 的使用方法
结合上图理解以下代码：

// src/index.js
import {createStore} from 'redux'
// 新建 store
// 通过 reducer 建立，reducer 根据老的状态和 action 生成新的 state
function counter(state=0,action){
  switch(action.type){
    case '加机关枪':
      return state + 1;
    case '减机关枪':
      return state -1;
    default:
      return 10;
  }
}

//通过 reducer 新建 store
const store = createStore(counter);
const init = store.getState();
console.log('初始化 state：',init); //初始化 state： 10

function listener(){
  const count = store.getState();
  console.log(`现有机枪 ${count} 把。`)
}
// 监听，每次 state 修改都会调用 listener
store.subscribe(listener)
// 现有机枪 11 把。
// 现有机枪 12 把。
// 现有机枪 11 把。

store.dispatch({type:'加机关枪'})
store.dispatch({type:'加机关枪'})
store.dispatch({type:'减机关枪'})

以上代码中的 subscribe 方法可以进一步优化：

store.subscribe(()=>{
  console.log(`现有机枪 ${store.getState()} 把`)
})

2.redux 如何和 react 一起使用

2.1. 手动连接 react 和 redux

图片.png

个人理解：dispatch(action)时，会自动将 action 传给 reducer，然后 reducer 进行相应处理；如果处理中 state 发生变化，会触发 store.subscribe(func)。
src 文件夹下有三个文件，内容分别如下：

// index.js
import React from 'react'
import {render} from 'react-dom'
import {createStore} from 'redux'

import App from './App'
import {reducer, addGun, removeGun} from './index.redux'

const store = createStore(reducer)

function show(){
  render(
    <App store={store} addGun={addGun} removeGun={removeGun}/>,
    document.getElementById('root')
  )
}

show()

store.subscribe(show)

// App.js
import React from 'react'
import {Button} from 'antd-mobile'

class App extends React.Component{
  render(){
    const {store, addGun, removeGun} = this.props
    return (
      <div>
        <h2>现有枪支：{store.getState()}</h2>
        <Button type='primary' inline onClick={()=>{store.dispatch(addGun())}}>增加枪支</Button>
        <Button type='primary' inline onClick={()=>store.dispatch(removeGun())}>减少枪支</Button>
      </div> 
    )
  }
}

export default App

// index.redux.js
const INCREASE_TYPE = 'INCREASE'
const REDUCE_TYPE = 'REDUCE'

export function addGun(){
  return {type:INCREASE_TYPE}
}
export function removeGun(){
  return {type:REDUCE_TYPE}
}

export function reducer(state=0,action){
  switch (action.type){
    case 'INCREASE':
      return state + 1
    case 'REDUCE':
      return state -1
    default:
      return 10
  }
}

2.2. 处理异步、调试工具、更优雅的将 react 和 redux 结合：

redux 异步处理，需要使用 redux-thunk 插件
调试工具：npm install redux-devtools-extension 并且开启
使用 react-redux 优雅的连接 react 和 redux

2.2.1. redux异步处理：

redux 默认处理同步，异步任务需要 redux-thunk 中间件：

npm i --save redux-thunk
使用 applyMiddleware 开启 thunk 中间件（见下面代码）
action 可以返回函数，使用 dispatch 提交 action

2.2.2. 调试工具

亲测发现，只要在 Chrome 浏览器中安装插件 Redux DevTools；
然后再从 redux 中引入 compose
- 将原来创建 store 的方式修改一下：

//原来创建 store 的方式
const store = createStore(reducer,applyMiddleware(thunk))
// compose 将函数组合到一起 , 在 Chrome 中安装插件 redux 后，将上面创建 store 方式改为如下形式，在浏览器中调试清晰方便
// 现在创建 store 的方式
const store = createStore(reducer,compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : ()=>{}
))

现在 src 文件夹下的代码如下：

// index.js
import React from 'react'
import {render} from 'react-dom'
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'

import App from './App'
import {reducer, addGun, removeGun, addGunAsync} from './index.redux'

// const store = createStore(reducer,applyMiddleware(thunk))
// compose 将函数组合到一起 , 在 Chrome 中安装插件 redux 后，将上面创建 store 方式改为如下形式，在浏览器中调试清晰方便
const store = createStore(reducer,compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : ()=>{}
))

function show(){
  render(
    <App store={store} addGun={addGun} removeGun={removeGun} addGunAsync={addGunAsync}/>,
    document.getElementById('root')
  )
}

show()

store.subscribe(show)

// App.js
import React from 'react'
import {Button} from 'antd-mobile'

class App extends React.Component{
  render(){
    const {store, addGun, removeGun, addGunAsync} = this.props
    return (
      <div>
        <h2>现有枪支：{store.getState()}</h2>
        <Button type='primary' inline onClick={()=>{store.dispatch(addGun())}}>增加枪支</Button>
        <Button type='primary' inline onClick={()=>{store.dispatch(addGunAsync())}}>迟缓加枪</Button>
        <Button type='primary' inline onClick={()=>store.dispatch(removeGun())}>减少枪支</Button>
      </div> 
    )
  }
}

export default App

// index.redux.js
const INCREASE_TYPE = 'INCREASE'
const REDUCE_TYPE = 'REDUCE'

// action creator
export function addGun(){
  return {type:INCREASE_TYPE}
}
export function removeGun(){
  return {type:REDUCE_TYPE}
} 
//异步
export function addGunAsync(){
  // thunk 插件的作用，这里可以返回函数
  return dispatch => {
    setTimeout(()=>{
      dispatch(addGun())
    },2000)
  }
}

export function reducer(state=0,action){
  switch (action.type){
    case 'INCREASE':
      return state + 1
    case 'REDUCE':
      return state -1
    default:
      return 10
  }
}

2.2.3. 使用 react-redux

首先安装插件： npm install --save react-redux
忘记 subscribe，记住 reducer，action 和dispatch 即可
react-redux 提供 Provider 和 connect 两个接口来连接
具体使用：
- Provider 组件在应用最外层，传入 store 即可，只用一次
- connect 负责在组件内从外部获取组件需要的参数，这时组件内不需要显式触发事件（dispatch），直接传 actionCreator 即可
- connect 可以用装饰器的方式来写
src 文件夹下内容：

// index.js
import React from 'react'
import {render} from 'react-dom'
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import {Provider} from 'react-redux'

import App from './App'
import {reducer} from './index.redux'

const store = createStore(reducer,compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : ()=>{}
))

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

// App.js
import React from 'react'
import {Button} from 'antd-mobile'
import {connect} from 'react-redux'

import {addGun, removeGun, addGunAsync} from './index.redux'

class App extends React.Component{
  render(){
    const {num, addGun, removeGun, addGunAsync} = this.props;
    return (
      <div>
        <h2>现有枪支：{num} 支</h2>
        <Button type='primary' inline onClick={addGun}>增加枪支</Button>
        <Button type='primary' inline onClick={addGunAsync}>迟缓加枪</Button>
        <Button type='primary' inline onClick={removeGun}>减少枪支</Button>
      </div> 
    )
  }
}

const mapStateToProps = state => {
  return {num:state}
}
const actionCreators = {addGun, removeGun, addGunAsync}
App = connect(mapStateToProps,actionCreators)(App)

export default App

// index.redux.js
const INCREASE_TYPE = 'INCREASE'
const REDUCE_TYPE = 'REDUCE'

// action creator
export function addGun(){
  return {type:INCREASE_TYPE}
}
export function removeGun(){
  return {type:REDUCE_TYPE}
} 
//异步
export function addGunAsync(){
  // thunk 插件的作用，这里可以返回函数
  return dispatch => {
    setTimeout(()=>{
      dispatch(addGun())
    },2000)
  }
}

export function reducer(state=0,action){
  switch (action.type){
    case 'INCREASE':
      return state + 1
    case 'REDUCE':
      return state -1
    default:
      return 10
  }
}

使用装饰器优化 connect 代码：
- 弹出个性化配置：npm run eject
- 安装插件：npm i babel-plugin-transform-decorators-legacy
- package.json 里 babel 加上 plugins 配置：

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ],
      "transform-decorators-legacy"
    ]
  },

使用装饰器，主要是对 connect 进行优化：

// App.js
import React from 'react'
import {Button} from 'antd-mobile'
import {connect} from 'react-redux'

import {addGun, removeGun, addGunAsync} from './index.redux'

// const mapStateToProps = state => {
//   return {num:state}
// }
// const actionCreators = {addGun, removeGun, addGunAsync}
// App = connect(mapStateToProps,actionCreators)(App)
@connect(
  state => ({num:state}),
  {addGun, removeGun, addGunAsync}
)
class App extends React.Component{
  render(){
    const {num, addGun, removeGun, addGunAsync} = this.props;
    return (
      <div>
        <h2>现有枪支：{num} 支</h2>
        <Button type='primary' inline onClick={addGun}>增加枪支</Button>
        <Button type='primary' inline onClick={addGunAsync}>迟缓加枪</Button>
        <Button type='primary' inline onClick={removeGun}>减少枪支</Button>
      </div> 
    )
  }
}

export default App

六、react-router4

React 官方推荐的路由库，4 是最新版本
- 4 是全新的版本，和之前版本不兼容，浏览器和 RN 均兼容；
- React 开发单页应用必备，践行路由即组件的概念；
- 核心概念：动态路由、Route、Link、Switch。

1、初识 router4

安装： npm i --save react-router-dom
router4 使用 react-router-dom 作为浏览器端的路由
忘掉 router2 的内容

1.1、入门组件

BrowserRouter，包裹整个应用；
Route 路由对应渲染的组件，可以嵌套，语法：<Route path='/path' component={要渲染的组件}></Route>；
Link 跳转专用，语法：<Link to='/path'>展示的名称</Link>。
示例：这里只在 index.js 文件中进行添加

// index.js
import React from 'react'
import {render} from 'react-dom'
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import {Provider} from 'react-redux'
import {BrowserRouter, Route, Link} from 'react-router-dom'
import App from './App'
import {reducer} from './index.redux'

const store = createStore(reducer,compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : ()=>{}
))

function Erying(){
  return <h2>欢迎来到二营</h2> 
}
class Qibinglian extends React.Component{
  render(){
    return <h2>这里是骑兵连</h2>
  }
}

render(
  <Provider store={store}>
    <BrowserRouter>
      <div>
        <ul>
          <li><Link to='/'>一营</Link></li>
          <li><Link to='/erying'>二营</Link></li>
          <li><Link to='/qibinglian'>骑兵连</Link></li>
        </ul>
        <Route path='/' exact component={App}></Route>
        <Route path='/erying' component={Erying}></Route>
        <Route path='/qibinglian' component={Qibinglian}></Route>
      </div>
    </BrowserRouter>
  </Provider>
  ,
  document.getElementById('root')
)

1.2、其它组件

url 参数：Route 组件参数可用冒号标识参数；

class Test extends React.Component{
  render(){
    console.log(this.props.match.params.location)
    return <h2>测试组件</h2> 
  }
}
===============================
<ul>
  <li><Link to='/'>首页</Link></li>
  <li><Link to='/erying'>二营</Link></li>
  <li><Link to='/qibinglian'>骑兵连</Link></li>
</ul>

<Route path='/' exact component={App}></Route>
<Route path='/:location' exact component={Test}></Route>

点击“二营”、“骑兵连”会显示 Test 组件，并且可以打印相关的信息，这里会显示：“erying”、“qibinglian”。

Redirect 组件：跳转；
Switch 只渲染一个子 Route 组件。

// index.js
import React from 'react'
import {render} from 'react-dom'
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import {Provider} from 'react-redux'
import {BrowserRouter, Route, Link, Redirect,Switch} from 'react-router-dom'
import App from './App'
import {reducer} from './index.redux'

const store = createStore(reducer,compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : ()=>{}
))

class Erying extends React.Component{
  render(){
    return <h2>二营</h2>
  }
}

function Qibinglian(){
  return <h2>骑兵连</h2>
}

class Test extends React.Component{
  render(){
    console.log(this.props.match.params.location)

    return <h2>这里应该是 404 页面哟~ <br/>没有{this.props.match.params.location}这个路径喔~</h2> 
  }
}

render(
  <Provider store={store}>
    <BrowserRouter>
      <div>
        <ul>
          <li><Link to='/'>首页</Link></li>
          <li><Link to='/erying'>二营</Link></li>
          <li><Link to='/qibinglian'>骑兵连</Link></li>
        </ul>

        {/* <Redirect to='/qibinglian' component={Qibinglian}></Redirect> */}
        <Switch>
          {/* Switch 里面只渲染命中的第一个 Route */}
          <Route path='/' exact component={App}></Route>
          <Route path='/erying' component={Erying}></Route>
          <Route path='/qibinglian' component={Qibinglian}></Route>
          <Route path='/:location' component={Test}></Route>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  ,
  document.getElementById('root')
)

复杂的 redux 应用，会遇到多个 reducer 的情况，用 combineReducers 进行合并。

七、项目开发

这里不再贴详细代码，只列出用到的对应的知识点。详细代码可参照项目地址：项目地址

1、前后端联调

使用 axios 发送异步请求：
- 如何发送，端口不一致时，使用 proxy 配置转发；
- axios 拦截器，统一 loading 处理；
- redux 里使用异步数据，渲染页面；
- 拦截器：interceptor。

2、登录注册功能的实现

2.1、页面文件结构；

骨架结构实现：
- 组件放在 Component 文件夹下面；
- 页面放在 Container 文件夹下面；
- 页面入口处获取用户信息，决定跳转到哪个页面。

2.2、web 开发模式；

基于 cookie 用户验证：
- express 依赖 cookie-parser，需要安装：npm i cookie-parser --save；
- cookie 类似于一张身份卡，登陆后服务器端返回，你带着 cookie 就可以访问受限资源；
- cookie 的管理：浏览器会自动处理。
开发流程：

开发流程

redux+express+MongoDB 学习

一、react 开发环境

脚手架相关命令：

二、ES6 简单介绍

1、块级作用域、字符串、函数

1.1、块级作用域

1.2、字符串

1.3、函数

2、对象扩展、解构

2.1、对象的扩展：

2.2、解构赋值

3、类、模块化等

3.1 类

3.2 模块化

3.3 其它：还有一些特性，虽然不在 ES6 的范围，但是也被 babel 支持，普遍被大家接受和使用（需要安装插件）

3.4 其它的特性

三、express + mongodb 基础

1. express

2. mongodb + mongoose

2.1. mongoose 的基础使用

2.2. express + mongodb 实战（后面讲解）

2.3. 后续进阶

四、React 基础简述

五、redux 的使用

1.redux基本概念

2.redux 如何和 react 一起使用

2.1. 手动连接 react 和 redux

2.2. 处理异步、调试工具、更优雅的将 react 和 redux 结合：

2.2.1. redux异步处理：

2.2.2. 调试工具

2.2.3. 使用 react-redux

六、react-router4

1、初识 router4

1.1、入门组件

1.2、其它组件

七、项目开发

1、前后端联调

2、登录注册功能的实现

2.1、 页面文件结构；

2.2、web 开发模式；

2.3、前后端实现。

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2.1、页面文件结构；