如何通过将数据从node.js的到VUE,在nuxt.js SSR?
我想从Node.js的(快递)通过公司的FireStore数据VUE文件。因为我必须用公司的FireStore的getCollections()
方法。它不能在客户端上运行。
我建立nuxt-SSR部署谷歌云,功能和云托管。我指的是这篇文章。()该目录结构如下图所示。
---大众(部署到云主机)
|
| -src(nuxt build
到功能目录)
|
| -functions(具有的Node.js和部署到云的功能)
|
| -firebase.json
:
我想我的目的,可以通过功能DIR index.js实现。它看起来像下面。
const functions = require('firebase-functions')
const express = require('express')
const { Nuxt } = require('nuxt')
const app = express()
const config = {
dev: false,
buildDir: 'nuxt',
build: {
publicPath: '/'
}
}
const nuxt = new Nuxt(config)
function handleRequest(req, res) {
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
nuxt.renderRoute('/').then(result => {
res.send(result.html)
}).catch(e => {
res.send(e)
})
}
app.get('*', handleRequest)
exports.nuxtApp = functions.https.onRequest(app)
我应该如何改变这种代码?请给我你的智慧。
回答如下:我有答案。
nuxt.renderRoute()
can在参数作为可选传递数据。 (https://nuxtjs/api/nuxt-render-route)
所以在功能目录,我应该改变的代码如下图所示。
:
function handleRequest(req, res) {
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
**req.data = "some data from firestore"**
nuxt.renderRoute('/', **{ req }** ).then(result => {
res.send(result.html)
}).catch(e => {
res.send(e)
})
}
:
而在SRC目录,vue.js文件看起来像下面。
<template>
<p>{{ apiResult }}</p>
</template>
<script>
export default {
asyncData(context) {
return { apiResult: context.req.data };
}
}
</script>
<template>
</template>
它会查看像req.data
的some data from firestore
。
我能达到我的目的。感谢大伙们!
如何通过将数据从node.js的到VUE,在nuxt.js SSR?
我想从Node.js的(快递)通过公司的FireStore数据VUE文件。因为我必须用公司的FireStore的getCollections()
方法。它不能在客户端上运行。
我建立nuxt-SSR部署谷歌云,功能和云托管。我指的是这篇文章。()该目录结构如下图所示。
---大众(部署到云主机)
|
| -src(nuxt build
到功能目录)
|
| -functions(具有的Node.js和部署到云的功能)
|
| -firebase.json
:
我想我的目的,可以通过功能DIR index.js实现。它看起来像下面。
const functions = require('firebase-functions')
const express = require('express')
const { Nuxt } = require('nuxt')
const app = express()
const config = {
dev: false,
buildDir: 'nuxt',
build: {
publicPath: '/'
}
}
const nuxt = new Nuxt(config)
function handleRequest(req, res) {
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
nuxt.renderRoute('/').then(result => {
res.send(result.html)
}).catch(e => {
res.send(e)
})
}
app.get('*', handleRequest)
exports.nuxtApp = functions.https.onRequest(app)
我应该如何改变这种代码?请给我你的智慧。
回答如下:我有答案。
nuxt.renderRoute()
can在参数作为可选传递数据。 (https://nuxtjs/api/nuxt-render-route)
所以在功能目录,我应该改变的代码如下图所示。
:
function handleRequest(req, res) {
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
**req.data = "some data from firestore"**
nuxt.renderRoute('/', **{ req }** ).then(result => {
res.send(result.html)
}).catch(e => {
res.send(e)
})
}
:
而在SRC目录,vue.js文件看起来像下面。
<template>
<p>{{ apiResult }}</p>
</template>
<script>
export default {
asyncData(context) {
return { apiResult: context.req.data };
}
}
</script>
<template>
</template>
它会查看像req.data
的some data from firestore
。
我能达到我的目的。感谢大伙们!