Question

好的，所以我刚刚开始学习Vue.js，而男人，在使用EJS时很难做到非常简单的事情。我接近放弃Vue用于我当前的项目，因为我不知道如何将res.locals.something从Express服务器传递到Vue前端。顺便说一句，它是Passport.js的东西 - 经过身份验证后，用户应该被重定向，但是我必须传递信息，无论用户是否已经登录到Vue（res.locals.isLogged = req.isAuthenticated();），而且这对我来说似乎是不可能的（接近0）Vue.js技能......我找到的唯一解决方案是在客户端使用ajax（axios是我的选择）请求，在服务器上定位/login/facebook路由，然后我可以传递来自Express to Vue，但由于该死的CORS问题，它无法工作。因此，我不能使用ajax从Express中检索数据，而Express和Vue本身并不像Express和EJS或Pug那样连接。

简而言之 - 有没有人知道将Express变量传递给Vue的简单方法，不包括Vue SSR，Express-vue模块等？

P.S。我没有使用Webpack或类似的东西（所以，没有.vue文件等） - 只是一个简单的index.html文件，其中Vue是从CDN加载的。

Answer 1

好吧，有一件事让我觉得肮脏的解决方法是使用.ejs而不是.html扩展名，所以我可以将变量传递给ejs，但我认为它不起作用。我所做的只是将我的index.html重命名为index.ejs，将res.locals.isLogged传递给ejs模板，并且Vue和ejs呈现的应用程序部分都在一起工作，不知怎的......

所以，这是一种肮脏的（某种）解决方案......

Answer 2

该问题已经回答，但我对.ejs不熟悉，无法遵循解决方案。对于像我这样的人，我所做的是：

使用data或res.locals发送res.render('file.pug', data)
将作为html数据属性接收的数据设置为标签（例如：p(id="myParagraph" data-myData= data)
使用

mounted : function () {
  this.$store.state.myData = document.getElementById("myParagraph").getAttribute("data-myData");
}

同样可以用来设置vue根实例的data属性。

从这里开始，您可以在需要时使用数据，并且仍然保留反应性。

Answer 3

您使用res.locals走在正确的轨道上。要访问视图中JS的变量，必须将值包装在字符串中：console.log('#{isLogged}')。见下面的例子

app.js

const express = require('express')
const app = express()

app.set('view engine', 'pug')

app.use((req, res, next) => {
  res.locals.isLogged = false
  next()
})

app.get('/', (req, res) => {
  res.render('index')
})

app.listen(3000, () => {
  console.log('listening on 3000')
})

views/index.pug

doctype html
html
  head
    title= title
  body
    h1= text
  script.
    console.log('#{isLogged}') // false

有没有（简单）方法将变量从Express传递给Vue.js？

3 个答案: