[英]Node.JS, ExpressJS, React and HTML JSON rendering
我是网络开发的初学者,我正在开发一个网络应用程序,首先使用 Node.JS 从两个网站( Maitres Restaurateurs和Guide Michelin )抓取餐厅信息,然后使用 ExpressJS 开始应用程序。 我使用res.sendFile()
函数来显示我的 HTML 页面,然后使用res.json()
在 HTML 页面中发送一个 JSON 文件。
首先,这是我的工作目录(一团糟):
src
├server.js
├index.html
├server-side
├bib.js
├jsx
├react.jsx
server.js
代码(如果我在得到listFinal
。变量与两个网站上的木偶刮我所有的餐馆信息JSON对象有人做过感谢bib.js
):
const express = require('express');
const app = new express();
const bib = require('./server-side/bib');
var listFinal = bib.get();
app.get('/', function (req, res) {
res.sendFile('./index.html', {root: __dirname});
res.send(listFinal);
});
app.listen(8000, function () {
console.log('Example app listening on port 8000!');
});
服务器运行良好。 但是,我的 HTML 或 React 代码都不起作用(我对 React 完全陌生)。 我的 HTML 上唯一显示的是我存储在变量listFinal
中的巨大 JSON。 该列表的长度(或大小)为 50,这是它的结构:
[{"name": "Saperlipopette ",
"url": "www.saperlipopette1.fr",
"address": "9 place du Théâtre, Puteaux, 92800, France",
"price_style": "36 - 65 EUR • Cuisine moderne",
"phone": "+33 1 41 37 00 00"},
...]
我的index.html
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Session 3 Work - Axel Joly</title>
<meta name="description" content="Bib gourmand + Maitre restaurateur scrappeur">
<meta name="author" content="Axel Joly">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Welcome to the Bib Gourmand and Maitre Restaurateur list (made by Axel Joly):</h1>
<div id="root">
<ul id="list-rest">
</ul>
</div>
<script src="./jsx/react.jsx"></script>
</body>
</html>
还有我的react.jsx
代码:
var React = require('react');
var ReactDOM = require('react-dom');
export class Hello extends React.Component {
render() {
return (
<h1>Welcome to React!!</h1>
);
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));
如前所述,它们都不会显示。 当我运行node server.js
并转到 localhost:8000/ 时,我得到了这个:
如您所见,没有呈现<h1>
标头,它们通常与 React 和 HTML 一起显示。 另外,我不知道如何在 HTML 中“检索”我的变量listFinal
以将其呈现为带有<ul>
和<li>
标签的<li>
。
正如上面的评论中提到的,您试图通过单个JSX
文件运行React
,您想要做的是通过npx create-react-app client
创建一个React
npx create-react-app client
,它将请求发送到您的服务器端代码。 所以,我修改了你的代码,我所做的是使用concurrenlty
运行服务器端和客户端,这是通过更改服务器端的package.json
来完成的。
"scripts": {
"build": "next build",
"start": "node index.js",
"server": "node index.js",
"client": "npm start --prefix client",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
您要做的下一件事是从您的客户端向您发送请求,您可以使用axios
发送执行此axios
GetData = async () => {
try {
let response = await Axios.get(`http://localhost:8000/`, {
crossdomain: true
});
console.log(response.data); // This would log the data received from your server
//Res of Code
您可以在此处查看工作示例(我尝试使用 codeandbox,但在那里遇到了一些问题,因此我将其上传到 Github)
所以要运行 run 项目,您将打开终端并运行以下命令
git clone https://github.com/AbdullahAbid87/APIExample.git
cd APIExample
npm i
cd client
npm i
cd ..
npm run dev
(注意:如果对服务器端的请求没有通过,则可能是CORS
问题,虽然这可能不理想,但解决它的最简单方法是下载一个名为CORS Everywhere
的浏览器扩展应该可以解决马上)
希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.