【招聘App】—— React/Nodejs/MongoDB全棧項目：項目準備

時間 2019-11-09

標籤招聘App react nodejs mongodb 項目準備欄目 React 简体版

原文原文鏈接

前言：最近在學習Redux+react+Router+Nodejs全棧開發高級課程，這裏對實踐過程做個記錄，方便本身和你們翻閱。最終成果github地址：https://github.com/66Web/react-antd-zhaoping，歡迎star。javascript

1、項目概述css

2、需求分析前端

文件架構和規範

src目錄：前端源碼目錄
server目錄：後端express目錄
根據功能文件夾：component，container，reducers等

router劃分頁面方式

進入應用時獲取用戶信息，用戶未登陸跳轉login頁面
Login和reigster頁面不須要權限認證
用戶信息，聊天列表，職位列表頁面共享底部tabbar

其它注意事項

Mongodb字段設計
axios發送異步請求
redux管理全部數據，組件儘可能用antd-mobile，弱化css

3、React開發環境java

Ceate-reacp-app腳手架生成文件格式

官網：https://github.com/facebookincubator/create-react-app
全局安裝：
```
npm install -g create-react-app　　
```
新建項目：
```
create-react-app my-project　　
```
開啓調試環境：
```
npm start　　
```
查看調試頁面：瀏覽器訪問localhost:3000

腳手架命令

安裝第三方庫redux：
```
npm install redux --save　　
```
彈出配置文件，自定義配置webpack：
```
npm run eject　　
```
擴展package.json裏的script字段，擴展npm run命令

4、ES6經常使用語法react

ES6是新的JavaScript語法規範

使用babel語法轉換器，支持低端瀏覽器
流行的庫基本都屬於ES6構建，React默認使用ES6新語法開發

ES6語法概述：塊級做用域、字符串、函數、對象擴展、解構、類、模塊化

5、AntD-Mobile組件庫 webpack

螞蟻金服出品的UI組件庫：antdesignPC端使用，ant-mobile移動端使用

Ant Design Mobile：一個基於 Preact / React / React Native 的 UI 組件庫

官網：https://mobile.ant.design/index-cn 【AntUI文檔】

安裝：

npm install antd-mobile --save
//或使用yarn更塊
yarn add antd-mobile --save

使用組件

import {Button} from 'antd-mobile'
import 'antd-mobile/dist/antd-mobile.css'　//所有加載

按需加載

安裝babel-plugin-import（以後就能夠不用引入css）
```
yarn add babel-plugin-import --save
```

配置：修改package.json中的bable項

"plugins":[
    ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 會加載 less 文件
]

個性化配置須要執行
```
npm run eject　　
```

兼容Web和ReactNative

經常使用組件：Import後能夠直接使用

Layout 佈局組件
表單組件，數據展現組件，選擇器等等
操做組件

6、先後端聯調ios

使用axios發送異步請求
axios：簡潔好用的發送請求庫git
```
npm install axios --save
```
如何發送：端口不一致，使用proxy配置轉發

package.json中：使用proxy統一端口

"proxy":"http://localhost:9093" //全部端口都轉換到9093

獲取數據（不使用redux的狀況）

import axios from 'axios'

constructor(props){
    super(props)
    this.state = {
         data: {}
    } 
}

componentDidMount(){
     axios.get('/data')
        .then(res => {
                if(res.status == 200){
                   this.setState({data: res.data})
                } 
                //console.log(res)
       }) 
}

<h2>個人名字是{this.state.data.user}</h2>

使用redux獲取數據

redux.js中：使用異步數據

import axios from 'axios'

const USER_DATA = 'USER_DATA'

const initState = {
        user: '李雲龍',
        age: 20
}
export function auth(state=initState,action){
        switch(action.type){
             case USER_DATA:
                  return {...state, ...action.payload}
             default:
                  return state  
        }
}

//獲取異步數據：axios.get,post發送請求，返回promise對象；Redux裏獲取數據，而後dispatch便可
export function getUserdata(){
        //dispatch用來通知數據修改
        return dispatch => {
             axios.get('/data')
               .then(res => {
                  if(res.status == 200){
                    dispatch(userData(res.data)
                  }    
                  //console.log(res)
             })    
        }
}
export function userData(data){
        return {type:USER_DATA, payload:data}
}

Auth.js中：渲染頁面github

import {connect} from 'react-redux'

import {getUserData} from './Auth.redux'

componentDidMount(){
       this.props.getUserData()
}

<h2>個人名字是{this.props.user}，年齡{this.props.age}</h2>

Auth = connect()(Auth) 
export default Auth;

axios攔截器，統一loading處理

config.js中：專門配置axios，Axios.interceptors設置攔截器，好比全局的loadingweb

import axios from 'axios'
import {Toast} from 'antd-mobile'  //輕提示

//攔截請求
axios.interceptors.request.use(function(config){
         Toast.loading('加載中',0)
         return config
})

//攔截響應
axios.interceptors.response.use(function(config){
         Toast.hide()
         return config
})

index.js中：應用axios和antd配置

import './config'
import 'antd-mobile/dist/antd-mobile.css'

7、項目環境搭建

安裝

yarn  add  antd-mobile   babel-plugin-import  axios  express、
           mongoose  react-redux  redux   redux-thunk
           redux-devtools-extension   cookie-parser  --save

yarn add babel-plugin-transform-decorators-legacy --save-dev

配置

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ],
      ["@babel/plugin-proposal-decorators",
        { "legacy": true }
      ]
    ]
  },
  "proxy":"http://localhost:9093"

reducer.js：合併全部reducer的文件

//合併全部reducer，而且返回
import {combineReducers} from 'redux'

export default combineReducers({})  //暫無reducer

注：項目來自慕課網

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。