node+mongo渲染页面

Question

问题描述

不知道该怎么把数据表中的数据渲染到页面去

问题出现的环境背景及自己尝试过哪些方法

下边是自己的页面

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

{{extend '../_layouts/home.html'}}

{{block 'title'}}{{'多人博客 - 首页'}}{{/block}}

{{block 'head'}}
<link rel="stylesheet" href="/public/css/markdown-github.css">
<script herf="/node_modules/showdown/dist/showdown.js"></script>
<style>
  .panel .panel-heading .action i {
    margin-right: 10px;
  }
</style>
{{/block}}

{{block 'body'}}
<section class="container">
  <div class="row">
    <div class="col-md-9">
      <article class="markdown-body" id="art">
      <h1 id="_1"><a name="user-content-_1" href="#_1" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>测试</h1>
      <blockquote>
        <p>杨柳青青江水平</p>
      </blockquote>
      <h2 id="_2"><a name="user-content-_2" href="#_2" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>起步</h2>
      <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
      </ul>
      <h3 id="_3"><a name="user-content-_3" href="#_3" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>哈哈哈</h3>
      <p>然后这里就开始 <code>hello world</code> ，就用可以了。</p>
      <p>下面是一段代码：</p>
      <pre><code class="javascript">var foo = 'bar'
  console.log(foo)
  </code></pre>
      <h3 id="_4"><a name="user-content-_4" href="#_4" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>嘿嘿</h3>
      <h3 id="_5"><a name="user-content-_5" href="#_5" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>呼呼</h3>
      <h2 id="_6"><a name="user-content-_6" href="#_6" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>是什么</h2>
      <h2 id="_7"><a name="user-content-_7" href="#_7" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>为什么</h2>
      <h2 id="_8"><a name="user-content-_8" href="#_8" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>怎么做</h2>
      <h2 id="_9"><a name="user-content-_9" href="#_9" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>哈哈哈</h2>
    </article>
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>lipengzhou</span> commented 
          <span>24 minutes ago</span>
          <span class="action">
            <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
          </span>
        </div>
        <div class="panel-body">
          评论测试
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>lipengzhou</span> commented 
          <span>24 minutes ago</span>
          <span class="action">
            <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
          </span>
        </div>
        <div class="panel-body">
          评论测试
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>lipengzhou</span> commented 
          <span>24 minutes ago</span>
          <span class="action">
            <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
          </span>
        </div>
        <div class="panel-body">
          评论测试
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>lipengzhou</span> commented 
          <span>24 minutes ago</span>
          <span class="action">
            <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
          </span>
        </div>
        <div class="panel-body">
          评论测试
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>lipengzhou</span> commented 
          <span>24 minutes ago</span>
          <span class="action">
            <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
          </span>
        </div>
        <div class="panel-body">
          评论测试
        </div>
      </div>
      <hr>
      <form>
        <div class="form-group">
          <label for="exampleInputPassword1">添加回复</label>
          <textarea class="form-control" name="" id="" cols="10" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-success">回复</button>
      </form>
    </div>
  </div>
</section>
{{/block}}
{{block 'script'}}
<script>
  console.log('333333333333333')
  $.ajax({
    url: '/topic/show',
    type: "checkout",
    data:  {email: "{{ user.email }}"},
    success: function (data) {
      console.log(data)
      if(data.result==1){
        console.log(data.content[0].content)
        //var text = data.content[0].content
       // var converter = new showdown.Converter()
        //html      = converter.makeHtml(text);
        //console.log(html)
        $("#art").html(data.content[0].content)
       // console.log(data.content)
      }
    }
  })
</script>
{{/block}}

你期待的结果是什么？实际看到的错误信息又是什么？

希望能像这个页面上写死的数据一样渲染上去，我的jq可能不太好，希望各位能够帮帮忙，很急，谢谢大家

Answer 1

demo :

<script>
  console.log('333333333333333')
  $.ajax({
    url: '/topic/show',
    type: "checkout",
    data:  {email: "{{ user.email }}"},
    success: function (data) {
      console.log(data)
      if(data.result==1){
        var html = '';
        data.content[0].content.forEach(function(elem, ind){
          html +=
          `
          <div class="panel panel-default">
            <div class="panel-heading">
              <span>${elem.name}</span>${elem.sex} 
              <span>${elem.time} minutes ago</span>
              <span class="action">
                <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
                <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
                <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
              </span>
            </div>
            <div class="panel-body">
              ${elem.panel_body}
            </div>
          </div>
          `
        })
        document.getElementId('content').innerHTML = html;
      }
    }
  })
</script>

以上, 类似这样