在根上表达命名占位符路由

Question

我目前正在构建一个 MEAN 应用程序，并且按照您的预期进行了路由设置（/login、/profile、/logout 等）。 我现在已经在我的应用程序中构建用户配置文件页面，并且我希望用户配置文件可以从域的根目录访问，例如： www.domain.com/:username 。

我目前有以下路由，它在我的 routes.js 文件末尾和我的 catchall/wildcard 路由之前定义。

app.get('/:username', function (req, res) {
    var username = req.params.username;
        usersTable.findOne({ 'local.username': username }, function (err, user) {               
            if (err)
                return err;

            if (!user)
                res.redirect('/');

            res.render('public-profile.ejs', {
                user: user
            });
        });
});

app.all('/*', function (req, res, next) {
    if (req.user) {
        res.sendfile('views/dashboard.html'); // for angular routing
    } else {
        res.redirect('/login');
    }
});

目前的情况是 Express/Angular 之间存在一些干扰。 如果我访问 /matthew 这是一个用户名，然后尝试从 URL 栏加载 /profile，Angular 不会捕获这个（/* 路由）而是加载默认的（'/'）角度路由。

我担心的是我无法在 Angular 中创建 /:username 路由，因为该页面如何知道要显示哪些用户数据？ 我是否必须创建一个 API 调用来读取给定的 URL，然后在数据库中查找具有该名称的用户？ （看起来笨重？）

我对构建大型 web 应用程序还很陌生，所以对架构的建议会很棒。

Answer 1

您帖子中的代码仅配置了服务器端路由，实际上与Angular路由无关。

Angular 适用于单页应用程序 (SPA)。 如果您想在客户端使用 AngularJS，您可能不想从服务器提供页面，而是返回数据，即您的路由仅用于 API 调用。

所以，在客户端，你应该有类似的东西：

myApp
.constant('MY_BACKEND_URL', 'http://www.domain.com')
.config(['$stateProvider', function ($stateProvider) { // client-side route config

  $stateProvider
    .state('userProfile',{
    url: '/:username',
    templateUrl: 'views/user-profile.html',
    controller: 'UserProfileCtrl',
    resolve: { // lets you resolve asynchronously before page is loaded.
      userData: ['$http', 'MY_BACKEND_URL', '$stateParams', '$state', function ($http, MY_BACKEND_URL, $stateParams, $state) {
        return $http
          .get(MY_BACKEND_URL + '/' + $stateParams.username)// returns a promise of the user data fetch from the API.
          .catch(function (err) {
            $state.go('dashboard');
          });
      }]
    }
  });

  $stateProvider.state('dashboard',{
    url: '/',
    template: 'views/dashboard.html',
    controller: 'DashboardCtrl'
  });
}]);

在服务器端：

// config route for API call to user resource 
app.get('/user/:username', function (req, res) {
  var username = req.params.username;
  usersTable.findOne({ 'local.username': username }, function (err, user) {
    if (err) {
      res.json(500, err);
    } else if (!user) {
      res.json(404, {reason: "No such username", username: username});
    } else {
      res.json(200, user);
    }
  });
});

根据经验，客户端 (Angular) 上的路由配置页面，而服务器端的路由配置您的 API，即您调用以获取数据的端点。

顺便说一句，您应该删除return err; 从回调中声明，因为从仅用于副作用的回调函数返回值是没有意义的。 您可能想用以下内容替换它：

if(err){
  res.json(500, err); // return internal server error response.
}