Question

如何使用express呈现HTML页面，同时将json数据传递给该HTML？我从mongoDB数据库的集合中获取json数据。 / solutions的路由器文件如下所示：

router.get('/', function (req, res, next) {
  db.solutions.find(function (err, docs) {
    res.send(docs);
  });
});

在AngularJS控制器中：

$http.get('/solutions').then(function(res) {
  console.log(res);
});

我没有在解决方案文件中指定/solutions，因为我在主server.js文件中执行此操作。

我知道这只会以json格式发送数据。如何将json传递给HTML并同时显示它？

我从mongoDB获得的集合只有一个字段（不包括id）。

Answer 1

以下是实现此目的的示例项目

考虑以下项目结构

www/          
  questions.html  // questions angular template
  solutions.html  // solutions angular template
  script.js       // angular code
app.js            // main entry point
api.js            // the api endpoint
db-mock.js        // a mongo db mock for demo purpose
package.json      // app dependencies

的package.json

使用以下命令初始化项目依赖项

$ npm init
$ npm install --save express serve-static

api.js

var express = require('express');
var router = express.Router();
var db = require('./db-mock');

router.get('/questions', function(req, res) {
    var questions = db.questions.find();
    res.setHeader('Content-Type', 'application/json');
    res.send(JSON.stringify(questions));
});

router.get('/solutions', function(req, res) {
    var solutions = db.solutions.find();
    res.setHeader('Content-Type', 'application/json');
    res.send(JSON.stringify(solutions));
});

module.exports = router;

app.js

这是我们的主要切入点。 Express服务器和路由在这里声明。

var express = require('express');
var serveStatic = require('serve-static');
var api = require('./api');
var app = express();
var port = process.env.PORT || 8080;

// Serve API
app.use('/api', api);

// Serve static files (our client-side code)
app.use(serveStatic('www'));

// Start server
app.listen(port, function() {
    console.log('Server listening on port %d', port);
});

DB-mock.js

由于我们不需要真正的Mongo服务器来举例，我们只是模仿它。

// Mock Mongo db
var db = {
    questions: {
        find: function() {
            return [
                {id: 1, name: "Why ?"},
                {id: 2, name: "How do I do this ?"},
                {id: 3, name: "What's up ?"},
                {id: 4, name: "Siri, tell me a joke"},
                {id: 5, name: "Are we alone ?"}
            ]
        }
    },
    solutions: {
        find: function() {
            return [
                {id: 1, name: "Triswarm"},
                {id: 2, name: "U-bam"},
                {id: 3, name: "Betacore"},
                {id: 4, name: "Qvotrax"},
                {id: 5, name: "Homezuning"}
            ]
        }
    }
}

module.exports = db;

的script.js

AngularJS模块和控制器声明

angular.module('app', []);

angular
    .module('app')
    .controller('SolutionsController', ['$scope', '$http', function ($scope, $http) {
        $http.get('/api/solutions')
             .then(function(res) {
                 $scope.solutions = res.data;
             });
    }])
    .controller('QuestionsController', ['$scope', '$http', function ($scope, $http) {
        $http.get('/api/questions')
             .then(function(res) {
                 $scope.questions = res.data;
             });
    }]);

questions.html

问题客户端模板

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="QuestionsController">
  <h1>Questions</h1>
  <ul>
    <li ng-repeat="question in questions">{{question.name}}</li>
  </ul>
</body>
</html>

solutions.html

解决方案客户端模板

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="SolutionsController">
  <h1>Solutions</h1>
  <ul>
    <li ng-repeat="solution in solutions">{{solution.name}}</li>
  </ul>
</body>
</html>

启动

$ node app

在http://localhost:8080/questions.html打开浏览器，您应该看到5个问题

在http://localhost:8080/solutions.html打开浏览器，您应该看到5个解决方案

替代解决方案

您可以使用模板引擎在服务器端呈现HTML，例如ejs。你可能甚至不再需要角度了。

$npm install ejs --save

在项目根目录下添加views目录，您将放置服务器端模板

views/
  solutions.ejs

solutions.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1><%= pageTitle %></h1>
    <ul><% for(var i=0; i<solutions.length; i++) { %>
        <li><%= solutions[i].name %></li>
    <% } %></ul>
</body>
</html>

以这种方式更改app.js：

// Declare /solutions route
app.get('/solutions', function(req, res) {
    var solutions = db.solutions.find();
    // Use `solutions.ejs` template to render
    res.render('solutions.ejs', {pageTitle: "Solutions", solutions: solutions});
});

现在使用node app启动您的服务器并浏览到http://localhost:8080/solutions

对/questions

等其他路线执行相同操作

这是一个非常简单的示例，请阅读ejs doc以满足您的需求： https://github.com/mde/ejs

如何使用express呈现HTML页面，同时将json数据传递给该HTML？

1 个答案: