背景：項(xiàng)目初期一直在create-react-app腳手架配置好的環(huán)境下寫靜態(tài)頁面瓢对，用react-router-dom v4.x作為路由模塊，開啟的是客戶端服務(wù)器添吗。
最近嘗試將express腳手架生成的應(yīng)用作為后臺(tái)服務(wù)器沥曹，與react應(yīng)用進(jìn)行數(shù)據(jù)交互。
- 首先在終端生成一個(gè)express應(yīng)用命名為react-backend碟联，作為項(xiàng)目的根目錄
$ express react-backend - 然后在./routes/user.js中修改代碼為
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.json([
{id:1,username:"wyy"},
{id:2,username:"wyp"}
]);
});
module.exports = router;
- 在react-backend文件夾下運(yùn)行express妓美，并且指定端口為3001，避免與react的默認(rèn)端口3000發(fā)生沖突鲤孵。
~/wyy/react-backend% PORT=3001 node bin/www
打開localhost:3001看到如下畫面壶栋，表示后臺(tái)服務(wù)器應(yīng)用已經(jīng)在3001端口啟動(dòng)。
image.png
打開localhost:3001/users看到如下畫面普监，就是我們剛才寫在routes/users.js里面的json數(shù)據(jù)贵试。
image.png
- 現(xiàn)在打開一個(gè)新的終端窗口，在項(xiàng)目根目錄下生成新的react應(yīng)用
$create-react-app client - 修改client文件夾下的package.js文件如下凯正。添加proxy毙玻，指定代理服務(wù)器為3001端口運(yùn)行的應(yīng)用。
{
"name": "antd-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.2.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom"
},
"proxy": "http://localhost:3001"
}
- 在client文件夾下廊散，啟動(dòng)react應(yīng)用桑滩。
~/wyy/react-backend/client% npm start
此時(shí)打開localhost:3000，看到react應(yīng)用的畫面
7允睹、在react組件中运准，可以通過在compenentDidMount(){}方法中寫入fetch交互數(shù)據(jù)的代碼，類似于ajax的$.get()
componentDidMount() {
fetch('path').then()
}
參考地址
https://daveceddia.com/create-react-app-express-backend/
https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/
https://www.cnblogs.com/LLLLily/p/7492118.html
20180320更新 更簡單的配置方式
用express腳手架搭建的express太繁瑣缭受，下面是更簡單的方法胁澳。
- 將create-react-app生成的整個(gè)文件夾直接放在項(xiàng)目根目錄下的client文件夾中，然后在根目錄下進(jìn)行yarn init米者，package.json文件如下
{
"name": "antd-demo",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"express": "^4.16.2"
},
"devDependencies": {
"concurrently": "^3.5.0"
}
}
- 然后在終端執(zhí)行yarn安裝依賴包韭畸，concurrenly是一個(gè)可以通過配置命令來同時(shí)啟動(dòng)兩個(gè)服務(wù)器的插件。通過在package.json中的scripts下修改命令，可以同時(shí)開啟服務(wù)端和客戶端胰丁。
- 在項(xiàng)目根目錄下新建server.js普筹，內(nèi)容如下
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
app.get('/api/hello', (req, res) => {
res.send({
express: 'Hello From Express'
});
});
app.listen(port, () => console.log(`Listening on port ${port}`));
- 在client文件夾下的package.json中配置代理同上，端口和服務(wù)器端端口設(shè)為一直
- 在終端進(jìn)入項(xiàng)目根目錄隘马，執(zhí)行yarn start即可同時(shí)開始客戶端和服務(wù)器端。
20180322更新 補(bǔ)充一些代碼才能完全解決跨域請(qǐng)求數(shù)據(jù)的配置問題
- 先對(duì)前面的步驟進(jìn)行總結(jié)：
（1）在不同的端口開啟客戶端服務(wù)器和后臺(tái)服務(wù)器
（2）在react的package.json中添加proxy - 然后介紹今天從前端表單發(fā)送數(shù)據(jù)到后臺(tái)服務(wù)器的時(shí)候妻顶，跨域請(qǐng)求報(bào)錯(cuò)
（1）在server.js中添加代碼
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
（2）在前端login組件中通過fetch方法發(fā)送數(shù)據(jù)的時(shí)候酸员，添加一個(gè)允許跨域的屬性
mode：“no-cors”
fetch('http://localhost:5000/post/api/1.0/create',
{
method:"POST",
mode:"no-cors",//跨域
body:JSON.stringify({
phone:values.phone,
password:values.password,
}),
headers:{
"Content-type":"application/json;charset=utf-8"
}
})
.then(function(values){
console.log('注冊成功',values)
})
.catch(function(error){
console.log('注冊失敗',error)
})
}
