一步一步搭建react應用-先後端初始化

一步一步搭建react應用-項目初始化

[一步一步構建一個react應用-開篇](https://segmentfault.com/a/11...

git地址

前端初始化

# 目錄結構

+----/build
    +
    +----/config
    +
    +----+/public
fe- +                            +--+/less
    +----/scripts   +----/common-+--+/svg
    +               |            +--index.less         
    +----+/src+-----+    
                    |
                    |               +--+nav.jsx
                    +----/component-+--+route.jsx
                    |               +--+header.jsx
                    |               +--+user.jsx
                    |               +。。。。。。
                    |
                    +----+/util---Utils.js
                    |
                    +-----+app.js
                    |
                    +-----+index.js

• 腳手架

create-react-app fe

npm run eject 配置文件導出到項目目錄下

配置後端代理地址

package.json中加入 "proxy": "http://XXXXXXX"

• 引入antd-mobile

具體webpack中的修改和如何自定義主題來覆蓋默認樣式參見：

antd 在在 create-react-app 中使用

• 路由規劃

src/component/route.jsx

項目主要有 頭部、底部導航、首頁、詳情頁、個人幾個部分

+-----------------------+
  | +------------------+  |
  | |     Header       |  |
  | +------------------+  |
  |                       |
  | +-----------------+   |
  | |                 |   |
  | |                 |   |
  | |     Content     |   |
  | |                 |   |
  | |                 |   |
  | |                 |   |
  | +-----------------+   |
  | +------------------+  |
  | |      Nav         |  |
  | +------------------+  |
  +-----------------------+

主要代碼

import React from 'react';
import {
    BrowserRouter as Router,
    Route,
    Redirect
} from "react-router-dom"
import Header from "./header"
import Nav from "./nav"
import Home from "./home/homePage"
import Detail from "./detail"
import User from "./user"
import Reptile from "./reptile"
import Collect from "./collectList"
import Util from "../util/Util"

export default class Rout extends React.Component {

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

    componentDidMount() {
        <!--傳遞到各個組件的當前是否登陸狀態-->
        Util.fetch('/api/user/checkLogin').then(res => {
            this.setState({
                login: !res.code
            })
        })
    }
    render() {
        return (
            <Router>
                <div>
                   <!--頭部-->
                    <Header></Header>
                    <div className="main">
                        <Route exact path="/" render={() =>
                            <Redirect to="/home"></Redirect>
                        }></Route>
                        <Route path="/home" render={(props) => {
                            return <Home login={this.state.login} {...props}></Home>
                        }}></Route>
                        <Route path="/detail/:id" component={Detail}></Route>
                        <Route path="/user" render={(props) => {
                            return <User login={this.state.login} {...props}></User>
                        }}></Route>
                        <Route path="/reptile" render={(props=>{
                            return <Reptile login={this.state.login} {...props}></Reptile>
                        })}></Route>
                        <Route path="/collect" component={Collect}></Route>
                    </div>
                    <!--底部菜單-->
                    <Nav login={this.state.login}></Nav>
                </div>
            </Router>
        )
    }

}

• 如何實現全局的ajax請求時loading狀態

每次有ajax請求時咱們要顯示正在請求的loading狀態，這裏咱們封裝一下fetch

主要代碼：src/util/Util.js

import 'whatwg-fetch'
const Loading = {
    pendingRequest: 0
}

const Util = {
    open(fn) {
        Loading.open = fn
    },
    close(fn) {
        Loading.close = fn
    },
    fetch(url, options) {
        Loading.open()
        Loading.pendingRequest++
        options = fillTokenToHeader(options)
        return fetch(url, options).then(res => {
            Loading.pendingRequest--
            if (Loading.pendingRequest <= 0) {
                Loading.close()
            }
            return res.json()
        }).then(data => {
            if (url !== '/api/user/checkLogin') {
                if (data.code) {
                    Toast.info(data.name || data.message, 1)
                }
            }
            return data
        })
    }
}
export default Util

在最外層的App組件中,定義一個isLoading狀態，控制loading活動指示器的顯示隱藏。
並將控制isLoading的兩個方法傳遞到Util中，在具體的請求發生時調用
具體代碼以下: src/app.js

import React, { Component } from 'react'
import Router from "./component/route.jsx"
import {
    ActivityIndicator
} from "antd-mobile"
import Util from "./util/Util"
import initReactFastclick from 'react-fastclick';

initReactFastclick();

export default class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            isLoading: false
        }
        Util.open(() => {
            if(this.state.isLoading){
                return
            }
            this.setState({
                    isLoading: true
                })
        })
        Util.close(() => {
            this.setState({
                isLoading: false
            })
        })
    }
    render() {
        return <div>
            <ActivityIndicator
                toast
                animating={this.state.isLoading}>
            </ActivityIndicator>
            <Router></Router>
        </div>

    }

}

後端初始化

後端基於express框架，使用MongoDB數據庫，用戶身份認證基於token，而且使用mocha+supertest來對接口進行單元測試

• express-generator初始化項目

npm install express-generator -g
    express -e be

    node ./bin/www 

    瀏覽器訪問localhost:3000 能看到東西就能夠了

• 引入pm2

pm2 是一個強大的node進程管理工具

npm install -g pm2

• 在項目根目錄下新建文件ecosystem.config.js

module.exports = {
  apps: [ //數組，能夠指定多個服務
    {
      name: 'movies-be',
      script: 'bin/www',
      watch: true,
      env: {
        PORT: 9000, //node服務端口
        NODE_ENV: 'development'
      },
      env_production: {
        PORT:9000,
        NODE_ENV: 'production'
      }
    }
  ]
};

package.json中

"scripts": {
    "start": "pm2 start ecosystem.config.js"
  }

啓動

npm start 就能夠啓動咱們的node服務

• 開發中經常使用的pm2 命令

pm2 list 能夠查看node服務列表

pm2 logs 查看日誌,console打印信息等

pm2 kill 關閉服務

• 以後文章中會介紹如何經過pm2來部署node應用到服務器