在根上快速命名占位符路由

Express named placeholder routes on root

本文关键字：占位符 路由      更新时间：2023-09-26

我目前正在构建一个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路由。

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

我对构建大型web应用程序非常陌生，所以关于架构的建议将是伟大的。

你文章中的代码只配置了服务器端路由，实际上与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.
}
相关文章：