通常情况下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 月 09 日 07 : 57 PM
如果觉得这篇文章不错,不妨赏我碎银几两。