Famo.us 连接到 MySQL答案

【问题标题】：Famo.us connect to MySQLFamo.us 连接到 MySQL
【发布时间】：2017-01-16 17:04:50
【问题描述】：

我正在尝试通过 Famo.us 连接 MySQL 数据库。但我无法完成它。该应用的文件夹结构如下所示：

应用程序（实际上是 famo.us 应用程序）
- 内容（图片等）
- 库
- 源
  - main.js（实际上是应用程序）
  - requireConfig.js
- 样式
- 咕噜声
- node_modules

main.js

/*globals define*/
define(function(require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var StateModifier = require('famous/modifiers/StateModifier');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var logo = new ImageSurface({
        size: [200, 200],
        content: '/content/images/famous_logo.png'
    });

    var logoModifier = new StateModifier({
        origin: [0.5, 0.5]
    });

    mainContext.add(logoModifier).add(logo);
});

因为它在节点上运行我尝试在 node_modules 文件夹中安装 mysql node_module，成功。但我无法连接到它，因为如果我尝试在 main.js 中使用 require('mysql') 来要求 mysql，它认为我想尝试 src 文件夹中的 js 文件。我不能直接指向 node_modules 文件夹，因为它也给了我一个 404 错误，而且根据 famo.us 的文档，这不是这样做的方法。

所以我尝试以这种方式将 mysql 代码添加到 main.js，但它也不起作用： mysql节点：

require(['mysql'], function(mysql) {
    //foo and bar are loaded according to requirejs
    //config, but if not found, then node's require
    //is used to load the module.

    //Now export a value visible to Node.
    var connection = mysql.createConnection({
      host     : 'localhost',
      user     : 'root',
      password : 'test',
      database : 'app'
    });

    window.console.log(mysql);
});

requireConfig.js

/*globals require*/
require.config({
    nodeRequire: require,
    shim: {

    },
    paths: {
        famous: '../lib/famous',
        requirejs: '../lib/requirejs/require',
        almond: '../lib/almond/almond',
        'famous-polyfills': '../lib/famous-polyfills/index'
    }
});
require(['main']);

我之前没有将 requireJS 与 Node 结合使用，而且 Famo.us 是相当新的，所以他们还没有文档来连接 mysql 数据库。所以我很迷茫。有谁知道这个问题的解决方案吗？

【问题讨论】：

标签： mysql node.js requirejs famo.us

【解决方案1】：

您可能只是从错误的角度看待这个问题。 Famo.us 是一个客户端动画和物理引擎。它不打算在服务器上使用。 Famo.us 也完全与后端无关，因为它并不真正想知道服务器端发生了什么。

你在著名代码中看到的'require'函数与node.js中的'require'不同。 Node 使用 CommonJS 模块模式，而 RequireJS 则不同。这在here有更详细的解释。

简而言之，您的问题是您试图让客户端代码来执行服务器端的工作，这是不对的。您的节点服务器应该为所有需要的客户端文件提供服务，并且要向数据库之类的东西发出请求，客户端应该向服务器发出 API 请求以执行某些操作。理想情况下，您希望使用客户端 MVC（Backbone、Ember、Angular）来进一步防止您的数据污染处理您的演示文稿的代码。 famo.us 的例子现在还没有真正涉及到。

【讨论】：

【解决方案2】：

修复它。我启动了一个连接到的额外节点。

connect.js

// The actual grunt server settings
module.exports =  function (grunt) {
  'use strict';
  return {
    options: {
      port: grunt.option('port') || 1337,
      livereload: grunt.option('livereload') || 35729,
      // Change this to '0.0.0.0' to access the server from outside
      hostname: grunt.option('hostname') || '0.0.0.0'
    },
    livereload: {
      options: {
        open: true,
        base: [
          '.tmp',
          '<%= config.app %>'
        ]
      },
      middleware: function (connect) {
        return [
          require('./server.js') // your server packaged as a nodejs module
        ]
      }
    },
    dist: {
      options: {
        open: true,
        base: '<%= config.dist %>',
        livereload: false,
      }
    }
  };
};

server.js（Socket IO和MySQL的快速实现）：

var io = require('socket.io').listen(9001);

var mysql      = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '****',
  database : '****'
});

connection.connect();

connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
  if (err) throw err
  console.log("Connected to Database");
  io.sockets.on('connection', function (socket) {
    socket.emit('news', { hello: '22' });
    socket.on('my other event', function (data) {
      console.log(data);
      console.log(rows);
    });
  });
});
connection.end();

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Narrowcasting</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <link rel="stylesheet" type="text/css" href="lib/famous/core/famous.css" />

        <!-- build:css(app/) css/app.css -->
        <link rel="stylesheet" type="text/css" href="styles/app.css" />
        <!-- bower:css -->
        <!-- endbower -->
        <!-- endbuild -->

        <!-- build:js(app/) src/polyfills.js -->
        <script type="text/javascript" src="lib/famous-polyfills/functionPrototypeBind.js"></script>
        <script type="text/javascript" src="lib/famous-polyfills/classList.js"></script>
        <script type="text/javascript" src="lib/famous-polyfills/requestAnimationFrame.js"></script>
        <!-- endbuild -->

        <!-- process:remove:dev -->
        <script src="http://localhost:9001/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="src/main.js"></script>
        <!-- /process -->

        <!-- process:remove:dist -->
        <script type="text/javascript" src="lib/requirejs/require.js" data-main="src/requireConfig"></script>
        <!-- /process -->
    </head>
    <body></body>
</html>

main.js

define(function(require, exports, module) {
    var socket = io.connect('http://localhost:9001');
    socket.on('news', function(data) {
        console.log(data);
        socket.emit('my other event', { my: data });
    });
});

【讨论】：