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