Nodejs相关：Ember.js + Express.js 的疑问

Nodejs相关：Ember.js + Express.js 的疑问

新人，刚刚学习了一下Node.js。做完一个小Demo(express + ejs + mongoose)，然后我无意间查资料找到了Ember.js。现在有点迷茫，希望给位大大解惑一下。

首先谈谈认识： express 是 sever-side MVC。 ember 是 client-side MVC，并只带模板引擎 HandlebarsJS。 在网上偶尔查到有外国人说有这种组合 ember + express ember负责前端的UI express负责后端 呈现这种层次：

ember – 前台UI | express – 后台 数据请求处理 | mongoose/其他数据接口

这样做的场合比较适合 web app(UI + 数据服务 类似WebQQ的rich-client 或者 仅仅ember 已经能完全应付)? 如果只是做RESTful API 服务express已经足够了 自己做的demo已经实现, 简单轻量级的web也能应付。

请问这两种都是framework 能整合到一起么？都有路由功能如何整合？在社区里搜索貌似没有结果。。。


3 回复

当然可以！让我们详细探讨一下 Ember.js 和 Express.js 的结合使用，以及它们如何协同工作。

Ember.js 和 Express.js 结合的背景

Express.js 是一个简洁而灵活的 Node.js Web 应用框架，提供了一系列强大的特性来开发 Web 应用。它主要用于后端逻辑处理、数据存储和API构建。

Ember.js 是一个用于创建可扩展的单页应用（SPA）的JavaScript框架。它自带路由、模板引擎和其他高级功能，使得前端开发更为高效。

如何整合 Ember.js 和 Express.js

1. 项目结构

你可以将项目分为前后端两部分：

  • 前端: 使用 Ember.js 构建用户界面。
  • 后端: 使用 Express.js 提供 RESTful API 和数据处理。

2. 项目文件结构

my-app/
├── frontend/               # Ember.js 项目
│   ├── app/                # Ember.js 应用源码
│   └── ember-cli-build.js  # Ember.js 配置文件
└── backend/                # Express.js 项目
    ├── routes/             # API 路由
    ├── models/             # 数据模型
    ├── controllers/        # 控制器
    └── server.js           # 主入口文件

3. Express.js 配置

在 server.js 中配置基本的 Express.js 服务器，并设置静态文件服务，以便 Ember.js 的构建输出可以被正确访问。

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

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, '../frontend/dist')));

// 定义API路由
app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello from Express!' });
});

// 捕获所有未匹配的路由，返回前端的index.html
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../frontend/dist/index.html'));
});

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

4. Ember.js 配置

确保 Ember.js 生成的文件位于 frontend/dist 目录中。你可以在 ember-cli-build.js 中配置输出路径。

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // 其他配置...
  });

  return app.toTree();
};

总结

通过这种方式，你可以利用 Express.js 处理数据请求和API，同时使用 Ember.js 来处理复杂的前端逻辑和视图。这样的架构非常适合需要高度交互性和复杂前端逻辑的Web应用，例如Web QQ这样的富客户端应用。而对于简单的RESTful API服务，单独使用 Express.js 就已经足够了。

希望这些信息对你有所帮助！如果你有更多的问题或需要进一步的解释，请随时提问。


路由处理针对的情况不同，express根据这个路由规则，解析出controll和action，然后事件循环调用回调函数处理请求，我用的angular.js没有用过route，

Ember.js 和 Express.js 可以很好地结合使用，分别负责前端和后端的开发工作。以下是一些关键点来帮助你理解这种组合方式：

Ember.js 的角色

  • 客户端 MVC 框架：Ember.js 主要用于构建复杂的单页应用（SPA），负责前端的用户界面和用户体验。
  • 模板引擎：Ember 使用 Handlebars 作为其模板引擎。

Express.js 的角色

  • 服务器端框架：Express.js 用于处理后端逻辑、数据处理以及 RESTful API 的创建。
  • 路由功能：Express 提供强大的路由功能来处理各种 HTTP 请求。

整合思路

1. 分离前后端

  • 前端：Ember.js 负责处理所有前端的 UI 渲染和用户交互。
  • 后端：Express.js 负责处理 API 请求，返回 JSON 数据。

2. API 接口设计

假设你的 Express 应用提供一个 /api/users 的 API 来获取用户列表：

// expressApp.js (后端)
const express = require('express');
const app = express();

app.get('/api/users', (req, res) => {
    // 假设这是从数据库获取的数据
    const users = [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
    ];
    res.json(users);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

3. 前端请求

Ember.js 可以通过 AJAX 请求与 Express 后端进行通信：

// emberApp/app/routes/users.js (前端)
import Route from '@ember/routing/route';
import fetch from 'fetch';

export default class UsersRoute extends Route {
  async model() {
    const response = await fetch('/api/users');
    const users = await response.json();
    return users;
  }
}

前后端的路由配置

  • Express.js 配置 HTTP 路由，处理来自浏览器的 API 请求。
  • Ember.js 配置前端路由，管理 SPA 中的不同页面。

示例：Ember.js 路由配置

// emberApp/app/router.js (前端)
import Router from '@ember/routing/router';

Router.map(function() {
  this.route('users');
});

总结

Ember.js 和 Express.js 的组合非常适合需要复杂前端交互和高性能后端支持的应用场景。通过明确分工，可以有效地利用各自的优势来构建现代 Web 应用。

这种方式适合于需要复杂用户界面和大量前端交互的项目，例如富客户端应用（如 WebQQ）。如果只是为了简单的 RESTful API 服务，那么仅使用 Express.js 就足够了。

回到顶部