Node.JS、ExpressJS、React 和 HTML JSON 渲染
阿克塞尔·乔利
我是网络开发的初学者，我正在开发一个网络应用程序，首先使用 Node.JS从两个网站（Maitres Restaurateurs和Guide Michelin）抓取餐厅信息，然后使用 ExpressJS 开始应用程序。我使用函数来显示我的 HTML 页面，然后在HTML 页面中发送一个 JSON 文件。res.sendFile()res.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 上唯一显示的是我存储在变量中的巨大 JSON listFinal。该列表的长度（或大小）为 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 。
阿卜杜拉·阿比德
正如上面的评论中提到的，您试图React通过单个JSX文件运行，您想要做的是创建一个反应应用程序，通过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
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，应该立即解决它)
希望这可以帮助
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
UITableView的项目向下滚动后更改颜色，然后快速备份
- 2
Linux的官方Adobe Flash存储库是否已过时？
- 3
用日期数据透视表和日期顺序查询
- 4
应用发明者仅从列表中选择一个随机项一次
- 5
Mac OS X更新后的GRUB 2问题
- 6
验证REST API参数
- 7
Java Eclipse中的错误13，如何解决？
- 8
带有错误“ where”条件的查询如何返回结果？
- 9
ggplot：对齐多个分面图-所有大小不同的分面
- 10
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 11
如何从视图一次更新多行（ASP.NET - Core）
- 12
计算数据帧中每行的NA
- 13
蓝屏死机没有修复解决方案
- 14
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 15
离子动态工具栏背景色
- 16
VB.net将2条特定行导出到DataGridView
- 17
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
- 18
在Windows 7中无法删除文件（2）
- 19
python中的boto3文件上传
- 20
当我尝试下载 StanfordNLP en 模型时，出现错误
- 21
Node.js中未捕获的异常错误，发生调用
我来说两句