Javascript 带ExpressJS路由器的CRUD

我是MEAN stack的新手，我正在尝试找出处理路由的最佳方法，要么是

express.Router（）

，要么是AngularJS的控制器（）

我使用的是Express v4.12.0、Angular v1.3.13和EJS v1（用于模板）

我真的很喜欢Express的路由（

/items/itemId

）中URL的干净程度，我也不太喜欢Angular，因为它在URL中使用哈希（

/items\items/itemId

）

现在我有一个单独的页面列出我的项目（

players.ejs

）：

我在

players

路线（

routes/players.js

）中有以下路线：

有没有一种方法，使用Express的路由，让一个EJS模板根据http操作提供不同的部分？ 注意：我已经参考了以下指南：

---

您可以将布尔值传递给模板：

router.get('/', function(req, res, next) {
    res.render('players', { title: 'Players', foo: true});
});

router.get('/:id', function(req, res, next) {
    res.render('players', { title: 'Fantasy Players', foo: false});
});

并根据布尔值渲染不同的部分：

<%if (foo) { %>
 <% include partials/foo %>
<% } else { %>
  <% include partials/bar %>
<% } %>

---

我相信有很多方法可以做到这一点。我可以告诉你什么对我有效，这是我从pluralsight采用的方法

让您的express routes都提供相同的index.ejs文件：

app.get('/', function(req, res, next) {  
 res.render('index.ejs',{
   page: 'home'
 });
}); 

app.get('/about', function(req, res, next) {  
 res.render('index.ejs',{
       page: 'about'
     });
    }); 

app.get('/about/:id', function(req, res, next) {
 res.render('index.ejs',{
       page: 'about'
     });
    }); 

My index.ejs在导航视图和页脚中大部分被剥离

My express routes处理http请求上的所有服务器逻辑：

router.get('/abo', aboutController.list);
router.post('/abo', aboutController.create);
router.route('/abo/:_id')
    .get(function(req, res) {
        About.findById(req.params._id, function(err, result) {
            if (err)
                res.send(err);
            res.json(result);
        });
    })
.put(function(req, res) {
        About.findById(req.params._id, function(err, abo) {
            if (err)
                res.send(err);
            abo.title = req.body.title;     // update the items info
            abo.shortname = req.body.shortname;
            abo.contents = req.body.contents;
            // save the items
            abo.save(function(err) {
                if (err)
                    res.send(err);
                res.json({ message: 'About content updated!' });
            });
        });
    })
.delete(function(req, res) {
        About.remove({
            _id: req.params._id
        }, function(err, service) {
            if (err)
                res.send(err);

            res.json({ message: 'Successfully deleted' });
        });
    });

角度匹配express url路由：

.when('/', {
        templateUrl: 'templates/home.html',
        controller:'homeController'

    })
.when('/about/:id', {
        templateUrl: 'templates/template.html',
        controller: 'refactoredController'
    })

我还使用：

$locationProvider.html5Mode(true);

它允许在没有#

我的angular控制器与我为http调用设置的angular服务进行通信，http调用将数据传递到后端（express），路由在后端接管

function getByID(shortname, api) { 
return $http({
  method: 'GET',
  url: '/api/' + api,
  shortname: shortname
})
.then(getVolunteerByIDSuccess)
.catch(sendGetVolunteerError);

} 

function updateItem(data, api) {
  console.log(data);
  return $http({
    method: 'PUT',
    url: 'api/'+ api + "/" + data._id,
    data: data  
  })
  .then(updateItemSuccess, data)
  .catch(updateItemError);
}


function addItem(newItem, api){
  return $http({
    method: 'POST',
    url: 'api/' + api,
    data: newItem  
  })
  .then(updateItemSuccess, newItem)
  .catch(updateItemError);
}

function deleteItem(data, api){
  var titleDeleted = data.title;
  return $http({
    method: 'DELETE',
    url: 'api/'+ api + "/" + data._id,
    titleDeleted: titleDeleted
  })
  .then(updateItemSuccess, titleDeleted)
  .catch(updateItemError);
}  

---

有很多东西要看，但希望这能给你一个想法。这些都只是代码的一小部分。我从mean stack的所有不同来源获得了这些信息，但大部分都是基于pluralsight的课程进行重构的。

很有意义。我可以更进一步，传递一个“action”参数并执行一个switch语句。@FillipPeyton是的，您也可以这样做。如果您有时间看一下，我遇到了另一个问题：

.when('/', {
        templateUrl: 'templates/home.html',
        controller:'homeController'

    })
.when('/about/:id', {
        templateUrl: 'templates/template.html',
        controller: 'refactoredController'
    })

$locationProvider.html5Mode(true);

function getByID(shortname, api) { 
return $http({
  method: 'GET',
  url: '/api/' + api,
  shortname: shortname
})
.then(getVolunteerByIDSuccess)
.catch(sendGetVolunteerError);

} 

function updateItem(data, api) {
  console.log(data);
  return $http({
    method: 'PUT',
    url: 'api/'+ api + "/" + data._id,
    data: data  
  })
  .then(updateItemSuccess, data)
  .catch(updateItemError);
}


function addItem(newItem, api){
  return $http({
    method: 'POST',
    url: 'api/' + api,
    data: newItem  
  })
  .then(updateItemSuccess, newItem)
  .catch(updateItemError);
}

function deleteItem(data, api){
  var titleDeleted = data.title;
  return $http({
    method: 'DELETE',
    url: 'api/'+ api + "/" + data._id,
    titleDeleted: titleDeleted
  })
  .then(updateItemSuccess, titleDeleted)
  .catch(updateItemError);
}