2017-02-26 93 views
1

爲了說清楚,我使用了MongoDB,Express,React和Node堆棧。如何使用api在服務器端進行反應?

我在努力學習react.js。我掌握了基本知識,並且能夠使用路由器編寫簡單的反應應用程序。我也嘗試過在服務器端渲染一個簡單的反應應用程序,它也可以很好地工作。不過,我現在堅持認爲我想用api和服務器端渲染完成一個完整的應用程序。

1)我不知道如何去分離api和服務器文件中的反應代碼。首先列出api調用,然後執行服務器端渲染工作? 像這樣:

app.get('/api/whatever', function(req, res) { 
    //get whatever 
}); 
app.get('*', function(req, res) { 
    //math routes and renderToString React 
}); 

2)另外,我甚至不能測試上面,其原因是,當我嘗試使用nodemon它拋出一個錯誤運行服務器,因爲它不理解的反應代碼,我應該怎麼做呢?我應該以某種方式配置nodemon以讀取es6或忽略它或配置webpack運行express服務器?

3)最後的問題可以很容易地清楚這個整個故事。我試着找到一個答案,但得到了許多相互矛盾的答案。 Google抓取工具能夠抓取React應用嗎?我正在學習服務器端的搜索引擎優化,是否真的有必要?

對不起,很長的問題,期待閱讀你的答案。

+0

作爲第二個app.get函數中的響應,您給出了什麼? –

+0

app.get( 「*」,功能(REQ,RES){ ReactRouter.match({路線:AppRoutes,位置:req.url}, 功能(ERR,redirectLocation,renderProps){ 如果(ERR){ res.send(500,err.message) }否則如果(redirectLocation){ res.redirect(302,redirectLocation.pathname + redirectLocation.search) }否則如果(renderProps){ res.send(200,ReactDOMServer .renderToString()) } else { res.send(404,'Not found') } }); }); – YT98

+0

我將在問題中添加整個函數作爲編輯。這看起來不正確... – YT98

回答

3
  1. 我去做了,你在項目中的代碼示例做同樣的辦法,我目前的工作 - 我匹配*,然後利用路由器做出反應來呈現不同的頁面。 I wrote a blog article about this, with code examples

  2. 在我的設置中,我使用webpack編譯我的後端代碼,就像我使用前端代碼一樣。我使用監視機制來偵聽代碼更改並在重新編譯後自動重新啓動節點服務器。不需要nodemon。

#!/usr/bin/env node 
 

 
const path = require('path'); 
 
const webpack = require('webpack'); 
 
const spawn = require('child_process').spawn; 
 
const serverConfig = require('webpack.config.server'); 
 

 
const compiler = webpack(serverConfig); 
 
const watchConfig = { 
 
    aggregateTimeout: 300, 
 
    poll: 1000, 
 
    ignored: '**/*.scss' 
 
}; 
 

 
let serverControl; 
 

 
compiler.watch(watchConfig, (err, stats) => { 
 
    if (err) { 
 
     console.error(err.stack || err); 
 
     if (err.details) { 
 
      console.error(err.details); 
 
     } 
 
     return; 
 
    } 
 

 
    const info = stats.toJson(); 
 

 
    if (stats.hasErrors()) { 
 
     info.errors.forEach(message => console.log(message)); 
 
     return; 
 
    } 
 

 
    if (stats.hasWarnings()) { 
 
     info.warnings.forEach(message => console.log(message)); 
 
    } 
 

 
    if (serverControl) { 
 
     serverControl.kill(); 
 
    } 
 

 
    serverControl = spawn('node', [path.resolve(__dirname, '../../dist/polly-server.js')]); 
 
    serverControl.stdout.on('data', data => console.log(`${new Date().toISOString()} [LOG] ${data}`)); 
 
    serverControl.stderr.on('data', data => console.error(`${new Date().toISOString()} [ERROR] ${data}`)); 
 
});

  • 是,谷歌抓取客戶端陣營代碼,但服務器端渲染仍然是一個好主意,因爲抓取結果可能是不一致的,尤其是當您在Ajax調用後動態加載頁面的某些部分
  • +0

    謝謝你的回答,這正是我所希望的。但是,在博客文章的演示中,您可以從git hub api獲取數據。在server.js文件中生成一個API會起作用嗎? '*'與'/ api'是否衝突,因爲它處理所有請求?我想我會試試看看會發生什麼。 – YT98

    +0

    沒有衝突,只要確保您的*匹配最後一次,訂單就很重要 –

    相關問題