node后端react前端简单实例

news/2024/9/29 14:02:19/

安装node

mkdir my-node-server

cd my-node-server

npm init -y

npm install express cors

创建 server.js文件

const express = require('express');

const cors = require('cors');

const app = express();

const PORT = 4000;

app.use(cors()); // 允许跨域请求

app.get('/api/data', (req, res) => {

  res.json({ message: 'Hello from Node.js server!' });

});

app.listen(PORT, () => {

  console.log(`Server is running on http://localhost:${PORT}`);

});

node server.js

访问地址:

http://localhost:5000/api/data

创建react 

npx create-react-app my-react-app

cd my-react-app

src下创建App.js

import React, { useState, useEffect } from 'react';

function App() {

  const [data, setData] = useState(null);

  useEffect(() => {

    fetch('http://localhost:4000/api/data') // 发送网络请求

      .then(response => response.json())

      .then(data => setData(data));

  }, []);

  return (

    <div>

      <h1>React Demo Application</h1>

      <pre>{JSON.stringify(data, null, 2)}</pre>

    </div>

  );

}

export default App;

npm start

http://localhost:3000


http://www.ppmy.cn/news/1531944.html

相关文章

[java][git]git学习

Git 什么是Git? Git是一款源代码管理工具(版本控制工具) 我们写的代码需要使用Git进行管理。 源代码有必要管理起吗&#xff1f;1.02.0 //svn,vss,vcs… git有必要&#xff0c;因为人工的去处理不同的版本&#xff0c;做相应备份会很麻烦。Git是linux之父当年为了维护linux—…

浅谈C++之线程管理

一、基本介绍 C11 提供了强大的多线程支持&#xff0c;涵盖了线程的创建、同步、共享数据管理等&#xff0c;极大简化了多线程编程的复杂性。 线程&#xff1a;一个程序执行流的最小单位。每个线程都有自己的程序计数器、栈、寄存器等。多线程&#xff1a;程序可以同时执行多个…

JIT(Just-In-Time)

JIT&#xff08;Just-In-Time&#xff09;即时编译是一种在程序运行时动态编译字节码为机器码的技术&#xff0c;常用于提高代码执行效率。它结合了解释型语言的灵活性与编译型语言的高效性。 JIT 的工作原理 字节码执行&#xff1a;JIT 编译器首先会以字节码的形式执行代码&…

BERT训练环节(代码实现)

1.代码实现 #导包 import torch from torch import nn import dltools #加载数据需要用到的声明变量 batch_size, max_len 1, 64 #获取训练数据迭代器、词汇表 train_iter, vocab dltools.load_data_wiki(batch_size, max_len) #其余都是二维数组 #tokens, segments, vali…

WPF DataGridTextColumn 时间列格式设置

WPF DataGridTextColumn 时间列格式设置 可以使用 Binding.StringFormat 来进行设置&#xff1a; <DataGridTextColumn Header"记录时间" Binding"{Binding ErrTime,StringFormatyyyy年MM月dd日 HH:mm:ss}"></DataGridTextColumn>

CentOS 替换 yum源 经验分享

视频教程在bilibili:CentOS 替换 yum源 经验分享_哔哩哔哩_bilibili问题原因 解决方法 1. 进入镜像目录 [rootlocalhost ~]# cd /etc/yum.repos.d/ 2.备份文件 [rootlocalhost yum.repos.d]# rename repo bak * 3.寻找阿里镜像源复制 https://developer.aliyun.com/mirror/ …

【数据结构】剖析二叉树(Binary Tree)

目录 &#x1f4af;引言 &#x1f4af;二叉树的定义与基本概念 &#xff08;一&#xff09;定义 &#xff08;二&#xff09;节点结构 &#xff08;三&#xff09;二叉树的形态 &#x1f4af;二叉树的遍历 &#xff08;一&#xff09;前序遍历&#xff08;Preorder Trav…

ThinkPHP一对多的关联模型运用

一、序言 最近在写ThinkPHP关联模型的时候一些用法总忘&#xff0c;我就想通过写博客的方式复习和整理下一些用法。 具体版本&#xff1a; topthink/framework&#xff1a;6.1.4topthink/think-orm&#xff1a;2.0.61 二、实例应用 1、一对多的关联 本文案例&#xff1a;一个用…