微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 使用ExpressJS路由器的CRUD

我是MEAN堆栈的新手,我正在试图找出处理我的路由的最佳方法,express.Router()或AngularJS的控制器(https://docs.angularjs.org/tutorial/step_07).

我正在使用Express v4.12.0,Angular v1.3.13,EJS v1(用于模板).

我真的很喜欢Express的路由(/ items / itemId)中的URL是多么干净,而且我不太喜欢Angular,因为它在URL中使用了哈希(/ items#/ items / itemId).

现在我有一个页面列出我的项目(players.ejs):

<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
    <title>Fantasy Football Helper | <%- title %></title>
    <% include partials/head %>
    <script type="text/javascript" src="/javascript/app/playersApp.js"></script>
</head>
<body class="container">

    <% include partials/header %>

    <main>
        <div class="row">
            <div class="col-sm-8">

                <h2>Fantasy Players</h2>

                <div ng-controller="PlayerController">
                    <div class="player" ng-repeat="player in players">
                        <p>
                            <a href="/players/{{ player._id }}"><strong>{{ player.name }} - {{ player.position }} - {{ player.team }}</strong></a>
                        </p>
                    </div>
                </div>
                <!-- Ideally, other CRUD UI goes here -->

            </div>

            <% include partials/sidebar %>
        </div>
    </main>

    <footer>
        <% include partials/footer %>
    </footer>

</body>
</html>

我想为这些玩家的每个CRUD操作重用这个players.ejs模板.目前我正在使用Express的路由.我在我的主app.js中有以下路线:

var players = require('./routes/players');
app.use('/players', players);

我在玩家路线(routes / players.js)内有以下路线:

var express = require('express');
var router = express.Router();

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

/* GET /player details. */
router.get('/:id', function(req, res, next) {
    res.render('players', { title: 'Fantasy Players'});
});

module.exports = router;

有没有办法,使用Express的路由,有一个单独的EJS模板,根据http操作提供不同的部分?

注意:我一直在参考以下指南:

> http://adrianmejia.com/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/#wiring-it-together
> https://docs.angularjs.org/tutorial/step_07

解决方法:

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

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 %>
<% } %>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐