框架篇： React + React-Router + antd + nodejs + express框架開發運用（nodejs做前后端server）

前提：在我們的上一章里，我們搭建了對應的框架，這章我們來講怎么運用。

 

---

 

如何開發

 

首先，我們需要更改后端nodejs的服務端口，因為默認情況下后端nodejs服務與前端nodejs服務用的端口都是3000。

 

1：打開src\server\bin\www.js文件

 

2：將其更改為4000端口，之后cmd窗口執行npm run start

 

3：啟動web服務，在my-app這層執行語句npm run start，執行完以后前端若想發送http請求，則將請求端口改為4000就成啦。

 

---

 

React-Router運用

 

該篇React-Router運用為舉例，詳細用法自己根據項目更改即可。

 

1：首先讓我們先執行以下語句，下載React-Router對應模塊

　　npm install react-router --save-dev

　　npm install react-router-dom --save-dev

 

2：更改src\index.js文件

//src\index.js

import React from 'react'
import ReactDOM from 'react-dom';
import { HashRouter, Route, Switch } from 'react-router-dom'

import Test from './view/index'
import App from './view/app'

const SliderComponent = () => (
  <Switch>
    <Route exact path='/' component={App} />
    <Route path="/Test" component={Test}/>
  </Switch>
)

ReactDOM.render((
  <HashRouter >
    <SliderComponent />
  </HashRouter>
), document.getElementById('root'));

 

3：新建view目錄，並添加app.js，index.js

//src\view\app.js

import React, { Component } from 'react';
import { Button } from 'antd';
import '../App.css';

class App extends Component {

    handleClick(){
        window.location.href = "/#/Test"
    }

  render() {
    return (
      <div className="App">
        <Button type="primary" onClick={this.handleClick}>Button11</Button>
      </div>
    );
  }
}

export default App;

//src\view\index.js

import React, { Component } from 'react';
import { Button } from 'antd';
import '../App.css';

class App extends Component {

    handleClick(){
        window.location.href = "/"
    }

  render() {
    return (
      <div className="App">
        <Button type="primary" onClick={this.handleClick}>Button22</Button>
      </div>
    );
  }
}

export default App;

 

 4:添加完以后，我們進網頁查看，輸入http://localhost:3000/#/

 

5：點擊按鈕，我們發現跳轉成功了

 

6：此時，我們將現有代碼打包拷貝，確認代碼在正式環境中也可用

 

7：第六步如果出錯，請看這一步。這里我們先來講一個中間件：connect-history-api-fallback，它用於SPA的頁面索引，專門處理索引頁面代理請求。在現有的SPA程序中，我們通常是只存在有一個html文件的，它就是index.html。當我們用JS語句跳轉頁面時，因為找不到對應路徑的html文件，通常會爆出404的錯誤。

 

這個中間件解決了一些問題。 具體來說，它會將請求的位置更改為您指定的索引（默認為/index.html）。那么就讓我們來用吧,我們在src\server\app.js里添加如下代碼

//......

const history = require('connect-history-api-fallback');
app.use(history(
  {
    htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
  }
));

 

之后我們再次回到web頁面，發現這次跳轉router成功了。