Question

我想以html中的表格形式显示mongodb数据，包含node.js，express.js和angular.js。

我现在正在做的事情是这样的

route.js

app.get('/superhero', function(req, res) {
    superhero.superhero_list(req,res); 
    res.sendfile('./public/superhero.html');
});

superhero.js

var express = require ('express')
var rootRequire = require('root-require');
var bodyParser = require('body-parser');
var superheroSchema = rootRequire('Anguar/models/superhero');
module.exports = {
superhero_list: function(req, res) {
        superheroSchema.find({}, function(err, superhero) {
            if (err) {
                return res.status(400).send({ "message": "Server error!", "err": err });
            }
            else {
                return res.status(200).send({ "superheros": superhero });
            }
}
};

superhero.html

<h1> Super heros</h1>

<table>
        <thead>
        <tr>
            <th>S.no</th>
            <th>Super hero</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        // to implement the table 
        </tr>
</table>

我面临的问题是

的回应

return res.status(200).send({ "superheros": superhero });

直接给我回复

{ “超级英雄”：[{ “_ ID”： “582c5211c8a8e06c0849a238”， “名称”： “超人”}，{ “_ ID”： “583bf729a9de83840ca277dc”， “名称”： “蜘蛛侠”}，{ “_编码”： “583bf78ca9de83840ca277de”， “名称”： “蝙蝠侠”}，{ “_ ID”： “583bf793a9de83840ca277df”， “名称”： “Shaktiman”}，{ “_ ID”： “583bfc97a9de83840ca277e0”， “名称”： “我”}]}

并没有加载superhero.html

如何将数据导入html？

Answer 1

看起来你正试图渲染这个服务器端。现在在客户端渲染它可能会更容易一些。一旦工作，您可以评估服务器端渲染是否会使您受益。

您尚未提供代码的Angular部分，但您可以轻松地在Angular中添加一些内容来点击您的API并加载您的结果：

<强>服务

angular.module('app')
  .service('myService', function($http) {
    this.getSuperheroes = function() {
      return $http.get('<path_to_api>/superhero');
    }
  });

<强>控制器

angular.module('app')
  .controller('myController', function($scope, myService) {
    myService.getSuperheroes()
      .then(function(superheroes) {
        $scope.superheroes = superheroes;
      });
  });

<强>模板

<table>
  <thead>
    <tr>
      <th>S.no</th>
      <th>Super hero</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="superhero in superheroes">
      <td>{{superhero.number}}</td>
      <td>{{superhero.name}}</td>
      <td>{{superhero.status}}</td>
      <td>{{superhero.action}}</td>
    </tr>
</table>

如您所见，该服务提供了检索超级英雄的功能，然后您可以从控制器调用该服务功能，然后在表格中显示结果。

您可能还想将route.js更改为以下内容：

app.get('/superhero', function(req, res) {
    return superhero.superhero_list(req,res); 
});

这样它将从DB调用返回响应，而不是发送静态文件。请记住，在Angular应用程序的某个位置，您必须呈现模板（您可以在Angular站点上找到hello world示例），因为您不会将其呈现在服务器端。

希望有所帮助！很高兴回答有关此问题的任何进一步询问：）

具有表达和角度的mongodb数据库的表格表示

1 个答案: