节点应用程序连接到pugjs

时间:2017-07-18 03:08:04

标签: node.js express pug

我使用Node.js相对较新。我已经成功创建了一个应用程序来获取用户数据(特别是创建用户的日期)并吐出每日,每周,每月和每年用户的数量。这是通过Postman成功测试的。

我已经成功安装了pugjs并尝试将计算出的数据传输到pug文件中。我有一个控制器,模型和路径文件,如下所示:

userAPIController.js

'use strict';

const mongoose = require('mongoose'),
  express = require('express'),
  app = express(),
  moment = require('moment'),
  pug = require('pug'),
  User = mongoose.model('Users'),
  compiledFunction = pug.compile('results.pug');

exports.list_all_users = function(req, res) {
  User.find({}, function(err, user) {
    if (err)
      res.send(err);
    res.json(user);
  });
};

exports.create_a_user = function(req, res) {
  var new_task = new User(req.body);
  new_task.save(function(err, user) {
    if (err)
      res.send(err);
    res.json(user);
  });
};

exports.calculate = function(req, res) {
  User.find({}, function(err, userArray) { //the second parameter, userArray, is an array that is returned to you.
    if (err)
      res.send(err);

var daily_count = 0;
var weekly_count = 0;
var monthly_count = 0;
var yearly_count = 0;
var total_count = 0;

for (var i = 0; i < userArray.length; i++) {
  total_count++;

  var timeString = userArray[i].Created_date;
  var dayString = timeString.getUTCDate();
  var monthString = timeString.getUTCMonth()+1;
  var yearString = timeString.getUTCFullYear();

  var todaysDate = new Date();
  var todaysDay = todaysDate.getUTCDate();
  var todaysMonth = todaysDate.getUTCMonth()+1;
  var todaysYear = todaysDate.getUTCFullYear();

  // Calculating Daily Users

  if (dayString === todaysDay && monthString === todaysMonth && yearString === todaysYear) {
    daily_count += 1;
  } 

  // Calculating Weekly Users 

  var weekDifference = todaysDay - dayString;

  if (monthString === todaysMonth && yearString === todaysYear && (weekDifference >= 0 && weekDifference <= 7)) {
    weekly_count += 1;
  } 

  // Calculating Monthly Users

  if (monthString === todaysMonth && yearString === todaysYear) {
    monthly_count += 1;
  } 

  // Calculating Yearly Users

  if (yearString === todaysYear) {
    yearly_count += 1;
  } 
}

res.json({
  "daily_count":daily_count,
  "weekly_count":weekly_count,
  "monthly_count":monthly_count,
  "yearly_count":yearly_count,
  "total_count":total_count
});

  });
};

exports.delete_a_user = function(req, res) {
  User.remove({
    _id: req.params.userId  
  }, function(err, user) {
    if (err)
      res.send(err);
    res.json({ message: 'User successfully deleted' });
  });
};

使用userAPIModel.js,userAPIRoutes.js和server.js文件,所有这些都是在本教程之后建模的:https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd

我还有一个带有pug文件的views文件夹,我不确定如何使用我的每日,每周,每月和每年用户(如控制器中所示)并将其转移到哈巴狗。我理解#{} pug语法;但是我不确定如何获取信息。我已经尝试进入数据所在的控制器文件并使用res.send函数,例如:

app.get('/', function (req, res) {
    res.send(compiledFunction({
        dCount: daily_count,
        wCount: weekly_count,
        mCount: monthly_count,
        yCount: yearly_count,
        tCount: total_count
    }));
})

然后从那里将它导入帕格。唯一的问题是,我不相信这是将控制器链接到pug文件的正确方法,或者我使用正确的功能。

我究竟做错了什么?我想我将上面的内容放在控制器中,因为那是输出JSON的地方,但我以前把它放在服务器文件中。

1 个答案:

答案 0 :(得分:1)

我喜欢哈巴狗。你可能也会。

步骤1)在您需要哈巴狗之后的某个时刻,在开始路由之前,请将帕格设置为视图引擎。

var app = express();
app.set('view engine', 'pug');

步骤2)在项目根目录中创建一个views文件夹,然后在其中编写一个pug模板。 I.E. /project_root/views/home.pug

步骤3)将请求路由到您的模板。这是通过使用express方法“render”来完成的。您可以将变量或函数结果附加到数据对象。在我的例子中,我实际上称它为“数据”,但你可以引用它,只要它是一个javascript对象。 关键名称很重要,因为它们用于在pug模板中引用您的数据。

app.route('/', function(req, res){

    res.render('home.pug', {data: someVar});

});

步骤4)在模板中引用您的数据。 Pug允许您不仅仅是引用,而是可以迭代它或在其上执行JavaScript。 “home.pug”可能是一个简单的例子:

doctype
html
  head
    title Test Template
  body
    // Here it's interpolated in a string
    h1 Take a look at my #{data}
    // Here the inner html is being set as your variable
    h2= data
    // Here's an example of your data being set to a tag attribute value using ES6 template strings
    a(href=`${data}`) Click Here

将此添加到书签中以供将来参考: https://expressjs.com/en/guide/using-template-engines.html

请务必在此处阅读有关帕格的更多信息: https://pugjs.org/api/getting-started.html