Nodejs 如何前后端分离

Nodejs 如何前后端分离

app.set(“views”, __dirname + “/views”);

可不可以改成

app.set("views", "远端ip/views");
9 回复

Node.js 如何实现前后端分离

前后端分离是一种流行的架构模式，它将前端和后端的开发工作分离，使得前后端可以独立地进行开发、测试和部署。在 Node.js 中，我们可以使用 Express 框架来轻松实现这种分离。

1. 前后端分离的基本概念

  • 前端：负责用户界面和交互逻辑，通常由 HTML、CSS 和 JavaScript 组成。
  • 后端：负责处理业务逻辑、数据存储和 API 接口，通常由 Node.js、Express 等技术栈组成。

2. 示例代码

假设我们有一个简单的 Express 应用，并且我们希望将前端静态文件（如 HTML、CSS 和 JavaScript）与后端 API 分离。

2.1 配置视图引擎

首先，我们需要设置 Express 的视图引擎。通常情况下，我们会将视图文件放在本地目录中。

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

// 设置视图文件夹
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs'); // 使用 EJS 作为模板引擎

// 静态文件服务
app.use(express.static(__dirname + '/public'));

// 路由
app.get('/', (req, res) => {
    res.render('index'); // 渲染 views/index.ejs 文件
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});
2.2 修改视图文件夹路径

关于你提到的修改视图文件夹路径的问题：

app.set("views", "远端ip/views");

这种方式通常是不可行的。因为 app.set("views", ...) 需要一个本地文件系统的路径，而不是远程 IP 地址。Node.js 无法直接访问远程文件系统，除非通过网络请求（例如 HTTP 请求）获取文件内容。

如果你确实需要从远程服务器加载视图文件，你可以使用 HTTP 客户端库（如 Axios 或 Fetch API）来获取这些文件，并将其存储在内存或临时文件中，然后传递给视图引擎。但这样做会增加复杂性和性能开销。

3. 总结

在实际开发中，前后端分离可以通过以下方式实现：

  • 将静态资源（HTML、CSS、JavaScript）放在一个单独的目录（如 /public），并通过 express.static 提供服务。
  • 将 API 接口定义在一个单独的路由文件中，便于管理和维护。
  • 使用模板引擎（如 EJS、Pug）来渲染动态视图。

这样可以有效地分离前后端代码，提高开发效率和可维护性。


这个貌似不行吧, 你可以自己修改

你这个叫前后分离???

本质还是 后端啊…

前后分离的一个例子就是 就是后端只发json…

前端根据这个json 渲染页面…

我个人觉得,前后分离…

后端只管数据输出…包括其中里面的逻辑什么的.都封装好一个结果…后端只做 M-C , view 层交给前端.

前端只要拿到数据之间显示就好了…

说得不好, 我没说这个是前后端分离!! 只是顺带问下

如果只是这类分离，你直接把远端的路径mount过来就行了吧… NFS之类的就好啊

根据你这一行代码， 可以说肯定是可以实现的。不过需要你自己写一些代码去实现。Express 渲染页面的逻辑（假设用 Jade 引擎）是：

  1. res.render 传送 Jade 模板名称和数据
  2. fs调用 Jade 文件
  3. 用 Jade 和 res.render 传递的数据对调用文件编译
  4. 生成 HTML，发送回客户端。 你所说的，就是想远程调用 Jade，那么很简单，把第二步替换成远程调用就行了

但是，这么做有没有必要，这是你要考虑的。根据你这一行代码，我很难告诉你有没有必要。所以你要提供更多的背景信息，或者自己要判断是否有必要。因为你这样做必然会大幅度增加服务器相应的时间。

这哪是前后分离啊，网站分离可以分为三部分，

  1. 前端使用前端渲染，从后台异步获取 Model，
  2. 后端从后台或数据库读取数据，组合 Model 返给前端，
  3. 后台就是如果业务逻辑复杂，和第三方有大量交互，网站后端维护起来过于复杂，网站后端部分数据可以从后台读取。

前后端分离是一种常见的开发模式，它将前端逻辑和后端逻辑完全独立开来，使得前端可以独立于后端进行开发、测试和部署。对于Node.js来说，通过使用Express等框架可以很方便地实现前后端分离。

实现前后端分离的基本思路

  1. 后端：负责处理业务逻辑、数据库交互等。
  2. 前端：负责展示数据、用户交互等。
  3. API接口：作为前后端沟通的桥梁。

示例代码

后端（Node.js + Express）

首先，我们需要配置Express来提供静态文件服务，并设置视图引擎。

const express = require('express');
const path = require('path');
const app = express();

// 设置静态资源目录，这里通常放前端的静态文件
app.use(express.static(path.join(__dirname, 'public')));

// 设置模板引擎，例如EJS
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 示例路由
app.get('/', (req, res) => {
    res.render('index'); // 渲染views目录下的index.ejs
});

// API接口
app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello from backend!' });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

前端（HTML/JS/CSS）

前端通常放置在public目录下。例如，你的public/index.html可能包含以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frontend</title>
</head>
<body>
    <h1>Welcome to the frontend!</h1>
    <script src="/scripts/app.js"></script>
</body>
</html>

前端JS（调用API）

假设你有一个简单的JS脚本来从后端获取数据并显示到页面上：

fetch('/api/data')
    .then(response => response.json())
    .then(data => {
        document.body.innerHTML += `<p>${data.message}</p>`;
    })
    .catch(error => console.error('Error:', error));

关于你的问题

关于你提到的app.set("views", "远端ip/views");，这是不可行的。views属性是用来指定模板文件所在的本地路径，而不是远程服务器的IP地址。因此，你应该使用本地路径，例如：

app.set('views', path.join(__dirname, 'views'));

这样，Express才能正确找到并渲染你的模板文件。

回到顶部