Nodejs相关：有关前后端路由的问题，熟悉MEAN的同学进来看下

Nodejs相关：有关前后端路由的问题，熟悉MEAN的同学进来看下

对于AngularJS，UI-Router的路由功能已经很不错，那express的router还有什么其他作用呢？或者两者不能混为一谈。。。

3 回复

Node.js 相关：有关前后端路由的问题，熟悉 MEAN 的同学进来看下

对于使用 AngularJS 和 Express.js 的开发者来说，理解前后端路由的区别及其各自的作用是非常重要的。下面我们来详细探讨这个问题。

前端路由

前端路由主要处理客户端的 URL 路由，通常用于单页面应用（SPA）中，以实现页面之间的动态切换而无需重新加载整个页面。AngularJS 中常用的前端路由库是 UI-Router。

示例代码：AngularJS UI-Router 配置
// app.js (AngularJS)
var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'views/home.html',
            controller: 'HomeController'
        })
        .state('about', {
            url: '/about',
            templateUrl: 'views/about.html',
            controller: 'AboutController'
        });
});

在这个例子中，$stateProvider 定义了不同的状态（state），每个状态关联一个模板（templateUrl）和控制器（controller）。当用户导航到 /home 或 /about 时，AngularJS 会根据配置动态加载相应的视图，并且不会刷新整个页面。

后端路由

后端路由则负责处理服务器端的请求，它接收客户端发送的 HTTP 请求并返回相应的数据或视图。Express.js 是一个流行的 Node.js 框架，提供了强大的路由功能。

示例代码：Express.js 路由配置
// server.js (Express.js)
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Welcome to the Home Page');
});

app.get('/about', (req, res) => {
    res.send('Welcome to the About Page');
});

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

在这个例子中，app.get() 方法定义了两个路由处理器，分别处理根路径（/）和 /about 路径的 GET 请求。当客户端访问这些路径时，Express.js 会调用相应的回调函数来处理请求并返回响应。

总结

  • 前端路由 主要用于 SPA 中实现页面间的动态切换。
  • 后端路由 处理服务器端的请求，返回数据或视图。

两者虽然都涉及路由的概念，但应用场景和处理逻辑完全不同。在实际开发中，通常会在前端使用如 AngularJS + UI-Router 进行页面路由管理，同时在后端使用如 Express.js 处理 API 请求和静态资源服务。


AngularJS的路由是为了做One Page Application用的。 也就是主要负责view层的前端控制。

而实际上除了页面控制和资源文件控制以外，还有很多地方需要用到路由啊。

比如异步请求，验证请求，数据请求等等。 这些东西不可能也不能够给Angular前端去做。

那么这些内容就由express来负责了。 总体来说相当于把express模板那部分的路由给分离出去由angular进行控制了。

在使用MEAN（MongoDB, Express, AngularJS, Node.js）栈开发应用时，前后端路由各自有不同的作用和职责。AngularJS中的UI-Router主要用于前端路由，处理单页面应用（SPA）中不同视图之间的切换；而Express的路由器则主要负责后端路由，处理客户端发送的各种HTTP请求。

前端路由（AngularJS + UI-Router）

前端路由是单页面应用的核心组成部分，用于在不重新加载整个页面的情况下切换不同的视图或组件。以下是一个简单的UI-Router配置示例：

var app = angular.module('app', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
    // 默认路由
    $urlRouterProvider.otherwise('/home');
    
    // 定义状态
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'views/home.html',
            controller: 'HomeController'
        })
        .state('about', {
            url: '/about',
            templateUrl: 'views/about.html',
            controller: 'AboutController'
        });
});

在这个例子中，我们定义了两个状态：home 和 about。当用户访问 /home 或 /about 路径时，UI-Router将显示相应的视图模板，并根据需要实例化控制器。

后端路由（Express）

后端路由处理来自浏览器的HTTP请求，并返回适当的数据或HTML页面。这通常涉及到与数据库交互、执行业务逻辑等。以下是Express的一个基本路由示例：

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

// 处理GET请求到根路径
app.get('/', (req, res) => {
    res.send('Hello World!');
});

// 处理GET请求到 /data 路径
app.get('/data', (req, res) => {
    res.json({ message: 'Here is some data!' });
});

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

这里，我们定义了两个路由，分别处理对根路径（/）和 /data 路径的GET请求。根据不同的URL路径，服务器会返回不同的响应内容。

结论

虽然前端路由和后端路由都涉及到路由的概念，但它们服务于不同的目的。前端路由主要用于在不刷新页面的情况下管理SPA中的视图切换，而后端路由则处理来自客户端的实际数据请求。在MEAN栈中，这两者结合使用可以构建出高效且响应迅速的应用程序。

回到顶部