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