框架篇： 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成功了。