Redux+React Router+Node.js前期配置-1

作者: 这个超人不会飞阿 | 来源:发表于2018-04-20 19:53 被阅读95次

运行之前首先要启动mongodb (提醒:在win+r cmd内运行)

第一步开启mongodb服务器:
D:\mongodb\bin\mongod --dbpath d:\data\db
第二步打开mongodb服务
D:\mongodb\bin\mongo.exe
//开启9993端口
$ node server.js

用过React就知道.React就是针对于View层的一个库.

单纯的React在做复杂应用是比较吃力的.所以React在做复杂的应用是离不开官方的推荐的Redux(状态管理库).由于Redux上手比较困难.因为Redux中dispatch action reducer state 单身边数据流都是比较吃力的.

做什么?
有实时聊天功能的招聘APP,接口都是真实的接口.
那些功能?
登录注册,信息完善,个人中心,牛人列表,BOSS列表,消息列表,聊天详情页.
技术栈?
React全家桶
前端支持:
antd-mobile Redux状态管理 React-router4 axios异步请求 create-react-app 第三方组件 React
后端支持:
Express Socket.io (聊天实时通讯)
Mongdb(存储)

搭建环境:
1.create-react-app
2.如何安装和使用第三方库
3.如何定制化配置

image.png

$cnpm install redux --save-dev 安装redux
$cnpm run start 启动
$ cnpm run eject 将它的配置弹出来

ES6语法:
解构赋值:
函数也可以多返回值了

数组解构
对象解构

image.png

提供类的语法糖
是prototype的语法糖
Extends继承
Constructor构造函数

image.png

ES6新出现的数据结构
Set , 元素不可重合
Map
Symbol

模块化
Import import{}
Export ,Export default
Node现在还不支持,还需要用require来加载文件.
ES6自带了模块化机制告别seajs和require.js

image.png

装饰器
Async await

其他特性
Promise
迭代器和生成器
代理Proxy

image.png

Express + mongodb
Express + mongodb开发web后台接口
Express开发web接口
非关系型数据库mongodb 存储的是类似于json的数据.

使用nodejs的mongoose模块链接和操作mongodb

Express基于nodejs,快速,开发,极简的web开发框架.
$: cnpm install express --save-dev 安装express
express最简单的使用:
server.js

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

app.get('/',function(req,res){
    res.send('<h1>Hello World</h1>');
})

app.listen(9993,function() {
    console.log('Node app start at port 9993');
})

启动express
进入server.js目录下
$:node server.js

image.png

如果遇见

image.png

将$:node server.js 重新跑一下
server.js

app.get('/data',function(req,res){
    res.json({name:'bin',age:20});
})

image.png

解决一个问题:
每次修改完server.js以后我们都需要手动 control + c 然后再node server.js 这样繁琐.
解决:
安装:$ cnpm install nodemon -g

然后不在用
$node server.js
而用:

$nodemon server.js

Express使用

image.png

当我们的模块复杂以后,我们使用模块 app.use

res.send res.json res.sendfile响应不同的内容

Mongodb + mongoose
非关系型数据库
官网 [图片上传失败...(image-8928a5-1524225217093)] 下载安装mongodb

image.png

mongodb与express配合时候最好的一个库是mongoose

image.png

安装mongoose
$: cnpm install mongoose --save-dev

启动mongodb(教程看的是菜鸟教程-mongodb)
是菜鸟教程-mongodb

第一步开启mongodb服务器:
D:\mongodb\bin\mongod --dbpath d:\data\db
第二步打开mongodb服务
D:\mongodb\bin\mongo.exe

如何使用这个库:
例子
server.js

//连接mongodb
const DB_URL = 'mongodb://localhost:27017';
mongoose.connect(DB_URL);

//如果连接成功打印一个字符串
mongoose.connection.on('connected',function(){
    console.log('mongo connect success!!');
})

运行这个脚本(在server目录下)

nodemon server.js

mongodb里面是一个集合或者说文档.如何用

//如果没有这个immoc它会自己生成一个
const DB_URL = 'mongodb://localhost:27017/immoc';

mongoose操作mongodb,存储的就是json,相对于mysql来说,要易用很多.

image.png

新增数据

//类似于mysql的表,mongo里有文档,字段的概念
const User = mongoose.model('user',new mongoose.Schema({
    user : { type: String, require: true },
    age : {type:Number,require:true}
}))
User.create({
    user : 'zhangbin',
    age : 20
},function (err,doc) {
    if(!err){
        console.log(doc);
    } else {
        console.log(err); 
    }   
})

增加成功

image.png

mongoose基本操作

const express = require('express');
const mongoose = require('mongoose');

//连接mongodb 并且使用imooc这个集合 如果没有这个集合会自动给我们建
const DB_URL = 'mongodb://localhost:27017/imooc';

mongoose.connect(DB_URL);

//如果连接成功打印一个字符串
mongoose.connection.on('connected',function(){
    console.log('mongo connect success!!');
})

//类似于mysql的表,mongo里有文档,字段的概念
const User = mongoose.model('user',new mongoose.Schema({
    user : { type: String, require: true },
    age : {type:Number,require:true}
}))

更新数据
User.update({'user':'xiaoming'},{'$set':{'age':32}},function (err,doc) {
    console.log(doc);
})
  
删除数据
User.remove({user : 'binbin'},function (err,doc) {
    console.log(doc);
})
 
User.create({
    user : 'binbin',
    age : 20 
},function (err,doc) {
    if(!err){
        console.log(doc);
    } else {
        console.log(err);  
    }   
})

回顾React基础知识
React是什么?
使用React实现组件化
React进阶使用

React是什么?
帮助你构建UI库,其实就是常说的mvc中的view库.
一切皆是组件
全部是使用ES6语法,最新版本16

React是什么?
render返回的值是输出JSX语法,会把JSX转成js执行.
class写成classname
变量要用{}包裹

同时可以在一个js文件写2个类

import React from 'react';
class App extends React.Component {

  render(){
    const name = 'bin';
    return (
      <div>
        <h1>superman:{name}</h1>
        <HH></HH>
      </div>

    );
  }
}

class HH extends React.Component {

  render() {
    const name = 'Gao';
    return (
      <h1>superman:{name}</h1>
    );
  }
}

export default App;

image.png

我们在开发的时候应该使用一个chrom提供给我们的插件:

image.png

antd-mobile组件库
蚂蚁金服出品的UI组件库
安装

$ cnpm install antd-mobile --save-dev

解释: $ cnpm install antd-mobile@next --save-dev 这个是安装最新版的

按需加载:安装插件

$ cnpm install babel-plugin-import --save-dev

app.js

import React from 'react';
import {Button} from 'antd-mobile';
// import 'antd-mobile/dist/antd-mobile.css'; 这个不在需要

package.json

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

于是就是按需加载了

并且react-native也是用的这个antd-mobile UI库
兼容Web和ReactNative

常用的组件:
Import后可以直接使用
Layout布局组件
表单组件数据展示组件选择器
操作组件

Redux基础知识
Redux是什么?
Redux核心概念?
Redux实战

Redux是什么?
Redux是专注于状态管理的库
Redux专注状态管理和react解耦.
单一状态,单向数据流.

核心概念:store state action reducer

我们来拿李云龙的独立团来说:
人少的时候,无论兵器和人员的变更,都是setState
发展为千人大团时候,老李决定,军事和生活分开.

所有状态归为赵政委管理(redux)管理, 自己只打仗(view显示)

赵政委(redux)有什么能力?
老赵有一个保险箱(store),所有人的状态,在哪里都有记录(state)
需要改变的时候,需要告诉专员(dispatch)要干什么(action)
处理变化的人(reducer)拿到state和action,生成新的state.

走马上任
首先通过reducer新建store,随时通过store.getState获取状态.
需要状态变更,store.dispatch(action)来修改状态
Reducer函数接收state和action,返回新的state,可以用store.subscribe监听mei每次修改.

Redux独自最基本的使用

import { createStore } from "redux";

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

//新建store
const store = createStore(counter);

const init = store.getState();
console.log(init);

function listener() {
    const current = store.getState();
    console.log(`现在有机枪${current}把~`);
}
store.subscribe(listener);

//派发事件 传递action
store.dispatch({ type: '加机关枪' });
store.dispatch({ type: '加机关枪' });
store.dispatch({ type: '加机关枪' });
console.log(store.getState());

Redux如何与React一起使用?
把store.dispatch()方法传递给组件,内部可以调用修改状态.
Subscribe订阅render()函数,每次修改都重新渲染.
Redux相关内容,移到单独的文件index.redux.js单独管理.

更进一步
处理异步
调试工具
更优雅的和react结合.

redux处理异步,需要redux-thunk插件
Npm install redux-devtools-extension 并且开启
使用react-redux优雅的链接react和redux

安装

$ cnpm install redux-thunk --save-dev

安装完成后,需要applyMiddleware开启thunk中间件
现在Action是返回对象,安装这个插件以后可以返回函数.使用dispatch提交action

怎么开启applyMiddleware?
在index.js下

import { createStore , applyMiddleware} from 'redux';
import  thunk  from 'redux-thunk';

先创建store时候

const store = createStore(counter,applyMiddleware(thunk));

异步action


// 这个是异步函数,一般是返回对象的,这里是返回的一个异步函数. 因为安装了redux-thunk插件
export function addGunAsync() {
    return dispatch=>{
        setTimeout(() => {
            dispatch(addGun())
        }, 2000);
    }
}

引用

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

注入

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

获取属性

    const addGunAsync = this.props.addGunAsync;

  render(){
    const store = this.props.store;
    const num = store.getState();
    const addGun = this.props.addGUN;
    const removeGun = this.props.removeGun; 
    const addGunAsync = this.props.addGunAsync;
    return (
      <div>
        <h1>现在有机枪{num}把!</h1>
        <Button onClick={() => store.dispatch(addGun())}>申请武器</Button>
        <Button onClick={() => store.dispatch(removeGun())}>上交武器</Button>
        <Button onClick={() => store.dispatch(addGunAsync())}>脱2天申请武器</Button>
      </div>
    )
  }

调试工具
在chrom下扩展更多程序
在商店搜索 redux

image.png

重新开一个页面,F12就会出现新扩展的程序redux

image.png

如何使用:

image.png

第一步,引入compose

import { createStore , applyMiddleware, compose } from 'redux';

将

const store = createStore(counter, applyMiddleware(thunk));

改为

const store = createStore(counter,compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension():f=>f   //前提是安装了Redux DevTools 
));

运行界面:

image.png

老赵能力用起来很麻烦,为了方便管理.使用魏和尚来负责链接.
1.首先安装插件

$: cnpm install react-redux --save-dev

2.忘记subscribe 记住reducer action dispatch即可.
3.React-redux提供Provider和connect2个接口来链接.

React-redux具体使用
Provider组件在应用最外层,传入store即可,只用一次.

更新代码
在index.js

import { Provider } from 'react-redux';

将

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

render();

//状态改变.就重新执行以下render
store.subscribe(render);

注释掉.

新增

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

Connect在组件内部负责从外部获取组件需要的参数.
Connect可以用装饰器的方式来写.

在app.js

// export default App;
import  React  from "react";
import { Button } from 'antd-mobile';
import { addGun, removeGun, addGunAsync } from './index.redux';
import { connect } from 'react-redux';
class App extends React.Component {
  // constructor(props) {
  //   super(props);
  // }
  render(){
    //  const store = this.props.store;
    // const num = store.getState();
    const num = this.props.num;
    const addGun = this.props.addGun;
    const removeGun = this.props.removeGun; 
    const addGunAsync = this.props.addGunAsync;
    return (
      <div>
        <h1>现在有机枪{num}把!</h1>
        <Button onClick={addGun}>申请武器</Button>
        <Button onClick={removeGun}>上交武器</Button>
        <Button onClick={addGunAsync}>脱2天申请武器</Button>
      </div>
    )
  }
}

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

export default App;

Connect可以用装饰器的方式来写
但是需要一个插件(前提是create-react-app需要弹出个性化配置)
$ cnpm run eject 将它的配置弹出来
安装插件

$ cnpm install babel-plugin-transform-decorators-legacy --save-dev

在package.json在给刚才安装的插件配置上.

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

由于有了Connect这个插件,
可以将


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

改为

@connect(state => ({num: state}),
  { addGun, removeGun, addGunAsync }
)

React后序?
什么数据应该放在React里面
Redux管理ajax
Redux管理聊天数据

Redux+React Router+Node.js前期配置-1

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React.js

前端文章收集