React框架-第一个React+Node.js组合实例

Baige

发布于 2022-03-22 15:08:50

1.1K0

发布于 2022-03-22 15:08:50

文章被收录于专栏：世荣的博客世荣的博客

通常情况下Web应用的数据都是由存储在服务端的数据库中。前端往往通过基于HTTP的接口来完成数据的增、删、改、查等操作。

1.服务端(Node端)

下面基于前面学习的Node开发知识来构建TodoList App的服务端程序。 (1) 新建一个Node项目，命令如下：

mkdir todo-list-server
cd todo-list-server

(2) 使用npm init命令初始化Node项目生成packag.json文件。项目初始化时会提示若干项，可以按Enter键接受默认值，如果想跳过提示直接生成package.json文件，还可以使用如下命令：

npm init.y

(3) 为了简化服务端的实现代码，还需要安装Express依赖包，命令如下：

npm install --save express

提示：Expres是一个保持最简化规模且灵活的Node Web应用程序框架，它为Web和移动应用程序提供了强大的功能。关于Express框架的使用，后续在说。 (4) 新建Node项目主文件app.js，并添加代码如下：

var express = require('express');
var app = express();

app.get('/', function (req, res)  {
    res.send('Hello World!');
});

app.listen(8000, function () {
    console.log('Server running at https://127.0.0.1:8000')
    // console.log('Server running at https://localhost:8000')
});

(5) 启动Node服务，命令如下：

node app.js
Server running at http://127.0.0.1:8000/

此时打开浏览器访问:

http://localhost:8000

页面上出现“Hello World!”，项目初始化完成。

2.服务器端接口

下面在服务端程序的基础上开发待办事项的增、删、改、查接口。为了简化接口和实现步骤，这里将服务端的数据直接编写在代码中，而不是使用数据库。修改todo-list-server中的app.js代码如下：

var express = require('express');
var app = express();

var todoItems = [
    { id: 0, value: 'React', done: false, delete: false}
]

app.get('/items', function (req, res)  {
    res.send(todoItems);
});

app.listen(8000, function () {
    console.log('Server running at https://127.0.0.1:8000')
    // console.log('Server running at https://localhost:8000')
});

在日常的开发中，熟练掌握常用的开发工具，也是开发效率和开发能力的体现，这里具体介绍React+Node所需的开发工具：

Visual Studio Code 一款免费，强大的IDE工具，关键是很轻量级，适用于多种语言和多个平台的工具
Chrome浏览器：前端和Node调试工具 + React Developer Tools工具
Postman：一款接口开发和调试工具

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021 年 11 月，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度