Question

在我的路线文件中，我在当前会话中获取用户并呈现配置文件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

Answer 2

以单件模式编写应用程序，在vue组件中编写实例应用程序，获取数据。

将会话中的数据插入vue-component

2 个答案: