react+node+mongodb项目

React

一、建立react项目

create-react-app my-app

二、安装第三方库 redux

npm install redux --save ###/二、自定义配置webpack npm run eject弹出配置文件

直接 npm run eject会致使报错

• 报错缘由： 脚手架添加.gitgnore文件，可是却没有本地仓库,
• 报错效果：

  

• 解决方法：

create-react-app my-react-app
    cd my-react-app
    git init
    git add .
    git commit -m 'Saving before ejecting'
    npm run eject  
复制代码

MongoDB

一、安装express

npm intsall express --save

• 为了不每次修改数据都须要重启服务，使用nodemon 监听路由和响应内容可自动重启服务
• npm install -g nodemon

二、安装mongoose，用于链接mongodb

npm install mongoose --save

三、支持post请求

npm install body-parser --save 安装body-parser插件

用户密码加密

npm install utility --save第三方库 用户密码加密 utiility.md5();

Redux

• redux 专一于状态管理
• 单一状态，单向数据流
• 核心概念: store, state, action,reducer

一、安装状态管理集： redux

npm install redux --save

二、安装react-redux简化react和redux

npm install react-redux --save

reac-redux提供了Provider和connect两个接口来链接

• Provider组件在应用最外层，传入store便可，只使用一次
• Connect负责从外部获取组件须要的参数
• Connect('属性', '方法')能够用装饰器的方式来写

// Connect装饰器依赖插件 
// 若是babel的版本在7以上须要安装 npm install @babel/plugin-proposal-decorators --save-dev
// 配置为
"plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
]
// 若是babel的版本再 7 一下 能够安装：npm install babel-plugin-transform-decorators-legacy --save-dev
// 配置为：
"plugins": [
    "transform-decorators-legacy"
]
复制代码

三、安装react-thunk中间件， 使用applyMiddelware开启thunk中间件

npm install redux-thunk --save

• redux默认只支持同步处理，异步任务须要react-thunk中间件

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { counter } from './index.redux';

const stores = createStore(counter, applyMiddleware(thunk));
复制代码

四、(react-Router + redux)多个reducer处理

reducer： 复杂的redux应用，多个reducer，用combineReducers合并
Redirect组件跳转
Swicth只渲染一个子Route组件

React-Router4

react-router 是官方推荐的路由库，4是最新版本

• 4是全新的版本，和以前版本不兼容，浏览器和RN均兼容
• React开发单页面应用必备，践行路由即组件的概念
• 核心概念： 动态路由、Route、Link、Swicth

一、安装react-router-dom

npm install react-router-dom --save

入门组件

• BrowserRouter/HashRouter， 包裹整个应用
• Router路由对应渲染的组件，可嵌套
• Link 跳转应用

其余组件

• url参数，Route组件参数可用冒号标志参数
• Redirect组件跳转
• Swicth只渲染一个匹配到的Route组件

axios

npm install axios --save

axios拦截器

• Axios.interceptors设置拦截器，好比全局的loading
• axios.get,.opst发送请求， 返回promise对象
• redux里获取数据，而后dispatch便可

开发模式

• 基于cookie用户验证
  一、express依赖cookie-parser,须要安装 npm install cookie-parser --save 二、cookie是惟一标志符，登陆后服务器端返回，客户端带着cookie能够访问受限资源
  三、清除cookie npm install browser-cookies