如何在ejs文件上显示node.js存储在mySQL中的数据 :: Javascript

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) => { if (err) { next (err); return; } //in here you need to render data in reder for EJS template to process it. res.render('page.ejs', {data: logo}); }); });

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

希望这会有所帮助。