javascript - 如何通过node.js在ejs file::Javascript上显示存储在mySQL中的数据

Question

所以..我一直在尝试让存储在mySQL服务器中的数据显示在使用ejs文件创建的网页上，但还没有成功..我在网上查了一下，到目前为止还没有任何运气。这是我到目前为止所拥有的..

page.ejs

...
            <div class="container" id="someID">
                <a class = "someName" href="">
                    <%# Trying to put data here-%>
                    <% data.forEach(function(dat) {%>
                        <img src=<%=JSON.stringify(dat) %> />
                    <% }); %>
                </a>
            </div>
...

Model.js

'use strict';
const db = require('db');
const {Type} = db;
const table = db.defineTable('aList', {
    columns: {
        id:Type.bigint().unsigned().notNull().primaryKey().autoIncrement(),
        name: Type.varchar(127).notNull().unique(),
        logo: Type.varchar(127).notNull().unique(),
    },
    indexes: [ 'name' ],
});

const ATable = {
    create(aData, cb) {
        table.insert({
            name: aData.name,
            logo: aData.logo,
        },(err, result) =>{
            if(err) {
                cb(err);
                return;
            }
            cb(null, result.insertId);
        });
    },
    getLogo(cb){
        table.query(
            'SELECT `logo` ' +
            'FROM `aList`',
            cb);
    },
};
module.exports = ATable;

Controller.js

'use strict';

const ATable = require('../ATable');
const jsonBodyParser = require('../jsonBodyParser');
const logger = require('logger');
const router = require('../router');

router.post('/aList/create', jsonBodyParser, (req, res) => {
    const aData = req.body;

    ATable.create(aData, err =>{
        if(err){
            logger.error(err);
            res.sendStatus(500);
            return;
        }

        res.sendStatus(201);
    });
});

router.get('/aList/logo', (req, res, next) => {
    ATable.getLogo((err, logo) => {
        if (err) {
            next (err);
            return;
        }
        res.json(logo);
        res.render('page',{data:logo});
    });
});

page.mount.js

var React = require('react');
var ReactDOM = require('ReactDOM');
var Container = require('page.react');

ReactDOM.render(<Container />, document.getElementById('someID'));

page.react.js

'use strict'

var Container = React.createClass({
    getInitialState: function(){
     return {
        title: 'SOME TEXT',
        sources:[]
      }
    },
    render: function(){
      return (
        <div>
          <h1> {this.state.title} </h1>
          <ShowList names={this.state.sources} />
        </div>
      )
    }
});

var ShowList = React.createClass({
  render: function(){
    var listItems = this.props.names.map(function(source){
      return <a class="list" href="http://www.google.ca"> <img class="logos" src={source} /> </a>;
});
    return (
        <div>
            {listItems}
        </div>
    )
  }
});

module.exports = Container;

当我访问 localhost:port_number/api/aList/logo 时，我可以很好地看到数据，但是当我尝试进入页面时，它给我一个错误，指出数据未定义。感谢任何帮助!预先感谢您!

Answer 1

可能有点错误。但是ejs从模板+数据返回HTML..你有模板。通过你不返回数据给它。您只需将 JSON 返回到页面...如果您使用 AJAX 或类似的东西，那就没问题了。在你的情况下，你需要这样的东西

router.get('/aList/logo', (req, res, next) => {
ATable.getLogo((err, Logo ) => {
如果(错误){
下一个(错误)；
返回;
}
//这里你需要在reder中渲染数据以便EJS模板来处理它。
res.render('page.ejs', {data: Logo });
});
});

这是文档 http://www.embeddedjs.com/getting_started.html

希望这有帮助。