Question

在我学习nodejs和Vue的过程中，我正在编写一个从服务器上显示.md文件的应用程序。

当网页被点击时，我的网页会打开默认的.md文件。我打算创建网页/显示不同的页面。

NodeJS后端呈现内容并将其作为JSON发送。（res.json）。然后Vue代码处理json响应并在适当的<div>

中添加md内容

但是，如果我点击默认页面以外的任何其他页面，我会在页面上显示JSON。

如何让VueJS处理JSON。我应该每次都发送res.render（'index'）吗？

感谢您的帮助！

我的NodeJS代码

exports.index = (req, res) => {
  res.render('index');
}

exports.defaultPage = (req, res) => {
  console.log('inside default /');
  var response = {};

  fs.readdir('./', (err, files) => {
    var mdFiles = [];
    files.forEach( file => {
      if (path.extname(file) === '.md') {
        mdFiles.push(file);
      }
    });
    response['files'] = mdFiles;
    fs.readFile(mdFiles[0], 'utf8', function(err, contents) {
      if (!err) {
        html = converter.makeHtml(contents);
        response['html'] = html;
        res.json(JSON.stringify(response));
      } else {
        res.json(err);
     }
   });
 });

}

vue js（app.js）

// app.js

new Vue({
  el: "#mdEditor",

  data: {
          content: '',
          files: [],
        },
  mounted: function() {
    this.defaultPage();
  },

  methods: {
    defaultPage: function() {
      this.$http.get('/defaultPage')
        .then((result) => {
          data = JSON.parse(result.data);
          this.$set(this, 'content', data.html);
          this.$set(this, 'files', data.files);
          this.files.forEach( (data, index, arr) => {
            arr[index] = data.split('.md')[0];
          });
        }, (err) => {
          console.log('error=', err);
       });
    }
  }
});

的index.html

  <div class="container" id="mdEditor">

    <nav class="vertical-menu">
      <ul>
        <li><a v-bind:href="file" v-for="file in files">
{{file}}</a></li>
      </ul>
    </nav>

    <article>
      <span style="font-size: 150%" v-html="content"></span>
    </article>
  </div>

从nodejs

0 个答案: