小白從零開始阿里雲部署react專案+node服務介面(二:node服務+web)
阿新 • • 發佈:2020-07-16
我們用極簡的方式來建立服務,沒有任何附加功能
1 新建一個server資料夾
2 使用npm init 或者yarn init 一路enter
3 yarn add express cors (express 封裝了http等外掛的框架, cors解決跨域)
4 在server 內新建 server.js
var express = require('express') var cors = require('cors'); var app = express(); app.use(cors()) app.post('/api/test', (req, res) => { res.json({ code:0, message: '成功', content: '介面呼叫成功', }) }) app.listen(4000, () => { console.log('正在監聽4000埠'); })
啟動 node server
看到dos 視窗如下表明介面服務啟動了,
如果你有介面呼叫工具例如:postman,可以直接呼叫試試或者介面改用get直接在瀏覽器訪問
得到返回值,證明介面沒問題
建立web ,這裡使用最常用的腳手架 create-react-app
npx create-react-appcreate_react_app
開啟 App.js 我們使用原生的fetch 呼叫介面, 執行檢視控制檯 network
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const testApi = () => { fetch('http://localhost:4000/api/test', { method: 'POST' }) .then((res) => { return res.json() }) .then((data) => { console.log(data); }) }return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> <button onClick={testApi}>測試介面</button> </header> </div> ); } export default App;
本地呼叫成功,下面來把node和web部署到伺服器