如何使用带有 Express 的 Nodejs 从现有代码创建 MVC答案

【问题标题】：How to create an MVC from an existing code by using Nodejs with Express如何使用带有 Express 的 Nodejs 从现有代码创建 MVC
【发布时间】：2017-07-21 05:21:23
【问题描述】：

我有两个文件：一个 index.html 和一个 server.js（代码如下）。就目前而言，它们完美地工作。但是，我知道我需要在 MVC 中组织事物。我在 Nodejs 上使用 Express 从头开始创建了一个项目，并据我所知进行了调整，但我把这部分搞砸了。

问题：如何将这些代码从 server.js 文件中分离出来？

//Loading modules
var http = require('http');
var fs = require('fs');
var path = require('path');
var b = require('bonescript');

// Create a variable called led, which refers to P9_14
var led = "P9_14";
// Initialize the led as an OUTPUT
b.pinMode(led, b.OUTPUT);

// Initialize the server on port 8888
var server = http.createServer(function (req, res) {
    // requesting files
    var file = '.'+((req.url=='/')?'/index.html':req.url);
    var fileExtension = path.extname(file);
    var contentType = 'text/html';
    if(fileExtension == '.css'){
        contentType = 'text/css';
    }
    fs.exists(file, function(exists){
        if(exists){
            fs.readFile(file, function(error, content){
                if(!error){
                    // Page found, write content
                    res.writeHead(200,{'content-type':contentType});
                    res.end(content);
                }
            })
        }
        else{
            // Page not found
            res.writeHead(404);
            res.end('Page not found');
        }
    })
}).listen(8888);

// Loading socket io module
var io = require('socket.io').listen(server);

// When communication is established
io.on('connection', function (socket) {
    socket.on('changeState', handleChangeState);
});

// Change led state when a button is pressed
function handleChangeState(data) {
    var newData = JSON.parse(data);
    console.log("LED = " + newData.state);
    b.digitalWrite(led, newData.state);
}

// Displaying a console message for user feedback
server.listen(console.log("Server Running ..."));

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>Home Automation Web Server with BeagleBone</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    <script src = "/socket.io/socket.io.js" ></script>
    <script>
    // Your JavaScript code goes here
        // Establishing connection with server
        var socket = io.connect();
        // Changes the led state
        function changeState(state){
            if (state==1){
                // Emit message changing the state to 1
                socket.emit('changeState', '{"state":1}');
                // Change led status on web page to ON
                document.getElementById("outputStatus").innerHTML = "Status: ON";
            }
            else if (state==0){
                // Emit message changing the state to 0
                socket.emit('changeState', '{"state":0}');
                // Change led status on web page to OFF
                document.getElementById("outputStatus").innerHTML = "Status: OFF";
            }
        }
    </script>
</head>
<body>
<div id="wrapper">
    <div id="logo"><h1>Home Automation Web Server</h1></div>
    <div id="container" align="center">
        <h2>LED</h2>
        <p id="outputStatus">Status</p>
        <div id="buttons">
            <ul>
                <li><a onclick="changeState(1);">ON</a></li>
                <li><a onclick="changeState(0);">OFF</a></li>
            </ul>
        </div>
    </div>
    <div id="footer"><p>Powered by BeagleBone</p></div>
</div>
</body>
</html>

我做了什么：======================================== =============

文件 app.js：包括这些行，创建一个路由：

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

文件 /routes/led.js：包括视图渲染

var express     = require('express');
var router      = express.Router();
router.get('/', function(req, res, next) {
    res.render('led', { title: 'Liga led' });
});
module.exports = router;

接口文件 led.pug：仅包含测试信息

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
block content
    h1= title
    p Welcome to #{title}    
    p Data = #{data}

【问题讨论】：

标签： node.js express model-view-controller

【解决方案1】：

我已经解决了：

/bin/www

在“var server = http.createServer(app);”下我添加了这个： var io = require('socket.io').listen(server);

io.on('connection', function (socket) {
    socket.on('changeState', handleChangeState);
});

function handleChangeState(data) {
    var newData = JSON.parse(data);
    b.digitalWrite(bbbio.controleCancela, newData.state);
}

/router/led.js

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

router.get('/', function(req, res, next) {
    res.render('led', { title: 'Controle Cancela' });
});
module.exports = router;

/javascripts/status.js

<script>
    var socket = io.connect();
    function changeState(state) {
        if (state==1){
            socket.emit('changeState', '{"state":1}');
            document.getElementById("outputStatus").innerHTML = "Status: ON";
        }
        else if (state==0){
            socket.emit('changeState', '{"state":0}');
            document.getElementById("outputStatus").innerHTML = "Status: OFF";
        }
    }
</script>

/views/led.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='/socket.io/socket.io.js') 
    include ../public/javascripts/status.js
  body
    block content

block content
    h1= title
    p Welcome to #{title}

    p Data = #{data}

    div
        h2 LED
        p(id="outputStatus") Status
        div(id="buttons")
            ul
                li
                    a(onclick="changeState(1);") ON
                li
                    a(onclick="changeState(0);") OFF

/app.js

在“var index = require('./routes/index');”下我添加了这个：

var led = require('./routes/led');

在“app.use('/', index);”下我添加了这个：

app.use('/led', led);

【讨论】：