node服務適配前端路由

阿9發表於2019-03-14
前端路由

可能網上已經大把類似的資料了，在這裡只不過是總結一下

用react舉例

在react-router 4.0版本中，BrowserRouter和HashRouter都可以實現前端路由的功能，區別是前者基於rul的pathname段，後者基於hash段。

前者：http://127.0.0.1:3000/a/b

後者：http://127.0.0.1:3000/#/a/b（有個#總是讓人難以接受）

這樣的區別帶來的直接問題就是當處於二級或多級路由狀態時，重新整理頁面，BrowserRouter會將當前路由傳送到伺服器（因為是pathname），而HashRouter不會（因為是hash段）。

通常我們都是使用BrowserRouter，前端路由在重新整理瀏覽器的時候會被認為是伺服器的路由被髮送到伺服器，然而伺服器並沒有配置相關的路由，然後瀏覽器當前的連結就會顯示404。

可以在node程式碼中新增這麼一段程式碼：

app.use(function(req, res, next) {
        fs.readFile(path.resolve(__dirname, '../server_file/dist/mobile.html'), function(err, data){
            if(err){
                console.log(err);
                res.send('後臺錯誤');
            } else {
                res.writeHead(200, {
                    'Content-type': 'text/html',
                    'Connection':'keep-alive'
                });
                res.end(data);
            }
        })
    });
複製程式碼

這段程式碼的意思就是說，只要伺服器接收到瀏覽器傳送過來的路由，在這個路由沒有在node中配置的情況下，都會嘗試著把前端頁面傳送回去，然後瀏覽器再去匹配前端路由。

我認為這其中需要注意的地方：

前端路由和後端路由不能出現重複。

多個單頁面的時候應該如何配置？

前端打包多個單頁面應該不是新鮮話題了，工作中有時候也會用到。

前端檔案在後端也是通過相應路由來傳送的，比如說/mobile，就是傳送mobile相關的html檔案，/pc就是傳送pc相關的html檔案。

在mobile的這個單頁面中，需要node適配前端的路由，在pc的這個單頁面中，也需要node適配前端路由。要解決的問題就是讓node知道瀏覽器當前開啟的到底是mobile還是pc。

我的做法是前端路由能適配node對應的路由，然後跟上述方法一樣，把多餘的路由的請求統一返回對應檔案

mobile前端路由這樣：

<Route  path="/mobile/main" component={App} />
<Route path="/mobile/main/login" component={Login} />
複製程式碼

後端路由這樣：

    app.use('/mobile', function(req, res, next) {
        fs.readFile(path.resolve(__dirname, '../server_file/dist/mobile.html'), function(err, data){
            if(err){
                console.log(err);
                res.send('後臺錯誤');
            } else {
                res.writeHead(200, {
                    'Content-type': 'text/html',
                    'Connection':'keep-alive'
                });
                res.end(data);
            }
        })
    });
複製程式碼

PC前端路由這樣：

<Route  path="/pc/main" component={App} />
<Route path="/pc/main/login" component={Login} />
複製程式碼

後端路由這樣：

    app.use('/pc', function(req, res, next) {
        fs.readFile(path.resolve(__dirname, '../server_file/dist/pc.html'), function(err, data){
            if(err){
                console.log(err);
                res.send('後臺錯誤');
            } else {
                res.writeHead(200, {
                    'Content-type': 'text/html',
                    'Connection':'keep-alive'
                });
                res.end(data);
            }
        })
    });
複製程式碼

完！

相關文章