html - 将 session 中的数据插入到 vue-component

Question

在我的路由文件中，我让用户进入当前 session 并渲染配置文件 html:

  app.get('/profile', isLoggedIn, function(req, res) {
        res.render('profile.html', {
            user : req.user // get the user out of session and pass to template
        });
    });

profile.html 需要显示用户数据，例如用户名。 html中显示的数据是在vue组件中指定的:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },  
  ready: function() {},
  methods: {}
});

相应的 html 元素如下所示:

  <div id="app"> 
    {{ message }}
  </div>

我的问题是我不明白如何将用户数据放入 vue 组件中？从 vue 组件中，我如何检索用户？

Answer 1

您可以发出 ajax 请求来检索 Vue 组件中的用户信息。

端点:

app.get('/user', isLoggedIn, function(req, res) {
  res.json(req.user)
});

组件:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    user: {}
  },  
  created: function() {
    // make an ajax request
    var xhr = new XMLHttpRequest()
    xhr.open('GET', '/user')
    xhr.onload = () => {
      this.user = JSON.parse(xhr.responseText)
    }
    xhr.send()
  },
  methods: {}
});

或者，您可以使用模板引擎: http://expressjs.com/en/guide/using-template-engines.html