Node之简单的前后端交互(实例讲解)

首先回顾一下这篇文章的主要内容。它主要是讲解如何使用Node.js实现前后端交互的过程，具体内容包括：

1. 开启本地服务器，使用Node.js实现对于前端页面的请求响应
2. 在前端页面中使用ajax发送请求，获取后端服务器响应数据
3. 使用ejs模板引擎渲染动态页面

下面我们分别来详细介绍这三部分内容。

开启本地服务器

我们在Node.js中使用http模块创建一个本地服务器，然后通过监听指定端口号，等待前端发送请求，然后对请求进行处理并发送响应数据。

const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World!');
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

在前端页面中使用ajax发送请求

在前端页面中使用ajax发送请求，需要先调用ajax的send函数，指定请求方式、路径、数据等参数，然后等待服务器响应数据，在响应完成后对其进行处理。

let xhr = new XMLHttpRequest();
xhr.open('GET', './request/data.json');
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        let res = JSON.parse(xhr.responseText);
        console.log(res);
    }
}

使用ejs模板引擎渲染动态页面

为了方便将后端数据渲染到前端页面，我们可以使用ejs模板引擎，在后端代码中调用ejs模板引擎渲染动态页面，然后将生成的HTML页面代码作为响应数据发送到前端。

const ejs = require('ejs');
ejs.renderFile('./views/index.ejs',{title:'首页',message:'这是首页'},function(err,data){
    if(err){
        console.log(err);
    }else{
        response.end(data);
    }
})

除此之外，在文章中还介绍了两个示例，分别是：

1. 在前端页面中实现全页面实时刷新的例子，具体实现方式是在前端页面中向后端服务器发送定时轮询请求
2. 在前端页面中实现动态添加HTML元素的例子，具体实现方式是在前端页面中使用ajax请求获取后端数据，并使用得到的数据动态生成HTML页面元素。

以上就是本文的完整攻略，希望能对读者有所帮助。