Nuxt配合Node在實(shí)際生產(chǎn)中的應(yīng)用詳解
上個(gè)星期,甲方說要在應(yīng)用上做一個(gè)促活活動(dòng)(其實(shí)就是讓用戶領(lǐng)OFO的騎車券),考慮到之前在我另一個(gè)應(yīng)用上已經(jīng)做過客戶端token驗(yàn)證,想想,擼起袖子直接在之前的Node上開搞吧。
Nuxt
這個(gè)東西類似與React中的Next,做Vue服務(wù)端渲染在Nuxt確實(shí)挺方便的,整個(gè)目錄結(jié)構(gòu)與Vue-Cli也差不多,但我覺得更清晰明了,而且有很豐富的配置,包括我最喜歡的頂部Loadding條啊、Layer主題模板啊、服務(wù)端渲染有益于SEO啊、自動(dòng)生成Router啊等等等等。這里我就不詳細(xì)展開了,選擇他主要是用習(xí)慣了,而且性能也很不錯(cuò)。
Express
它就是一個(gè)Koa、egg等的一個(gè)服務(wù)端的工具,封裝很多便捷的方法。這里也不詳細(xì)展開。
第一步 完成靜態(tài)頁面
在這里就不詳細(xì)說明HTML怎么構(gòu)建、Vue使用方法等等等不相關(guān)的問題,首先頁面效果如下圖:
點(diǎn)擊確認(rèn)領(lǐng)取后,向后端發(fā)送請(qǐng)求,獲取券碼:
大致業(yè)務(wù)流程就是這樣子了。
第二步 基于webview完成token驗(yàn)證
甲方公司的token是怎么給到用戶的呢?
- 用戶登錄客服端
- 戶在webview訪問相應(yīng)的地址
- 客戶端把token等信息綁定在地址上讓服務(wù)端接受,并向服務(wù)端發(fā)送GET請(qǐng)求
- 服務(wù)端接受到Token后,根據(jù)Token信息驗(yàn)證用戶身份并返回頁面給用戶
所以也就是相當(dāng)于,此時(shí)我手上的Node需要完成一個(gè)Token驗(yàn)證的需求,開搞:
這里必須說一下Session這個(gè)東西,一開始當(dāng)我完成了Token驗(yàn)證的時(shí)候,可是發(fā)現(xiàn)兩個(gè)用戶同時(shí)訪問的時(shí)候,后訪問者會(huì)重新執(zhí)行一次對(duì)應(yīng)請(qǐng)求里的方法,相當(dāng)于很多數(shù)據(jù)都初始化甚至重新賦值。完全不知道怎么把用戶分開,問了一下JAVA的同學(xué),他們說框架自帶會(huì)分開,這就讓我很憂郁了。其實(shí),他們也知道Session這個(gè)東西,只是一直這樣用后習(xí)慣了也就突然說不清楚甚至想到它的存在了。
我一開始想到的是用Cookie驗(yàn)證對(duì)應(yīng)瀏覽器,但總覺得這種方法有點(diǎn)古老,不夠高大上(個(gè)人主觀看法,勿噴),儲(chǔ)存量也很有限。所以又探索了一天,得知有個(gè)Session這個(gè)東西可以驗(yàn)證對(duì)應(yīng)瀏覽器(好吧,其實(shí)也就是把Cookie當(dāng)成數(shù)據(jù)索引)。知道了有這么一回事之后也就茅塞頓開了。
// 引入一些工具
const http = require('http')
const express = require("express");
const session = require('express-session');
const nuxtapp = express(); // 創(chuàng)建一個(gè)express應(yīng)用
// 設(shè)置SESSION配置
nuxtapp.use(session({
secret: 'key' // 建議使用 128 個(gè)字符的隨機(jī)字符串
}));
// 處理OPTIONS請(qǐng)求(axios發(fā)送POST請(qǐng)求時(shí)會(huì)先發(fā)送一個(gè)OPTION請(qǐng)求驗(yàn)證服務(wù)器的連通情況)
nuxtapp.use(function (req, res, next) {
if ('OPTIONS' === req.method) {
res.sendStatus(200);
} else {
next();
}
});
// 寫一個(gè)驗(yàn)證Token的接口
nuxtapp.get('/getphone', (req, res) => {
if (!req.query.token) {
// if else ...
res.sendStatus(200)
return;
}
// 這里創(chuàng)建請(qǐng)求只是舉一個(gè)例子,有的Token可以本地解析,有的需要服務(wù)端向另一個(gè)服務(wù)端請(qǐng)求解析。(參考微信)
const request = http.request({
host: "api.example.com",
headers: {
'Content-Type': ' application/json',
'Accept-Encoding': 'utf-8', //這里設(shè)置返回的編碼方式 設(shè)置其他的會(huì)是亂碼
'Accept-Language': 'zh-CN,zh;q=0.8',
'Connection': 'keep-alive',
},
path: '/getTokenorSth',
port: 'port',
method: 'POST'
}, response => {
let data = ""; // 創(chuàng)建變量記錄數(shù)據(jù)
response.on("data", function (chunk) {
data += chunk
})
response.on("end", function () { // 設(shè)置seesion
try {
if (!req.session.id) {
// set session like : req.session.id= JSON.parse(data)
}
res.sendStatus(200)
} catch (err) {
console.log(err);
res.sendStatus(500)
}
})
}).on('error', (e) => {
console.log(`錯(cuò)誤信息: ${e.message}`);
res.sendStatus(500)
});
// POST Data
request.write(JSON.stringify({
example:example,
token: req.query.token
})); // 用戶傳過來的數(shù)據(jù) post
request.end();
})
nuxtapp.listen(port || 80, '0.0.0.0')
console.log("已開啟服務(wù)器,請(qǐng)?jiān)L問 —— localhost:" + port || 80)
第三步 服務(wù)端代理(這里我也有個(gè)點(diǎn)不是很確定,所謂淘寶Node+JAVA是不是就是這種模式)
畢竟我還是個(gè)前端,功能方面的實(shí)現(xiàn)還是交給資深大JAVA吧(若是給我時(shí)間,我還真的想寫一下SQL復(fù)習(xí)一下)
用戶訪問的時(shí)候還是向Node請(qǐng)求,這里需要提一點(diǎn)的就是,假如后端提供了很多接口,你不一定每個(gè)都要寫一個(gè)app.get(‘/api')或者什么,express的文檔上有提到類似這種寫法:
nuxtapp.all(["/api1/*","/api2/*"], requestFunction)
其他就跟上面token驗(yàn)證差不多了
第四步 用Express執(zhí)行Nuxt
在Nuxt官網(wǎng)上其實(shí)也有部分代碼教你如何用自己寫的Node去運(yùn)行,但一直不是很完善,有點(diǎn)差強(qiáng)人意。我在這里就補(bǔ)充一下我的理解, 哪里寫得不對(duì),請(qǐng)盡管噴,謝謝噴我的每一個(gè)人 。
// nuxt
const {
Nuxt,
Builder
} = require('nuxt') // 引入核心構(gòu)建屬性
// 判斷開發(fā)環(huán)境
const isProd = (process.env.NODE_ENV === 'production')
const port = process.env.PORT || 80
// 引入nuxt配置
const config = require('./nuxt.config.js')
config.dev = !isProd;
const nuxt = new Nuxt(config);
// 判斷生產(chǎn)模式 dev(開發(fā)者模式)表示重新構(gòu)建 ;pro(生產(chǎn)模式)表示直接從yanr build的文件直接執(zhí)行
if (config.dev) {
new Builder(nuxt).build()
.then(listen)
.catch((error) => {
console.error(error)
process.exit(1)
})
} else {
listen()
}
以上的listen就是我在第二、三步寫的相應(yīng)接口的express服務(wù)器啦。
那么nuxt其實(shí)還并沒有在代碼中執(zhí)行,new Nuxt一個(gè)Nuxt實(shí)例后返回一個(gè)nuxt方法,它其實(shí)是根據(jù)request,response去執(zhí)行相應(yīng)的渲染,其中我們要考慮到express()的各種接口的執(zhí)行順序,假如一開始就匹配到了第二步的代碼的get請(qǐng)求,那么寫在第二步代碼后的all方法中的各種接口是接收不到的。
我考慮到的是接口不是無緣無故執(zhí)行的,但用戶請(qǐng)求是必然發(fā)生的。那么也就是當(dāng)用戶除了故意發(fā)送請(qǐng)求,全部由Nuxt接手。所以Nuxt會(huì)是放在最后讓其渲染頁面并交給用戶,為了方便驗(yàn)證Token,我把驗(yàn)證Token的請(qǐng)求放在首頁讓瀏覽器捕獲Token以及相應(yīng)信息后交給Node執(zhí)行手動(dòng)登陸。(其實(shí)也可以通過在nuxt渲染前判斷是否存在Token來決定是否進(jìn)行token驗(yàn)證,我就不在這里再進(jìn)行大量代碼的展示了)
結(jié)合以上思路,也就是在最后捕獲所有GET請(qǐng)求并交手給Nuxt即可:
// 最后捕獲nuxt渲染
nuxtapp.get('/*', (req, res) => {
nuxt.render(req, res)
})
Demo:jasontan.cn
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
NodeJs+MySQL實(shí)現(xiàn)注冊登錄功能
這篇文章主要為大家詳細(xì)介紹了NodeJs+MySQL實(shí)現(xiàn)注冊登錄功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
在Node.js中實(shí)現(xiàn)視頻列表的分頁展示功能
在Web應(yīng)用開發(fā)中,展示大量數(shù)據(jù)時(shí)經(jīng)常會(huì)用到分頁功能,以提升用戶體驗(yàn)和頁面加載性能,本篇博客將介紹如何在使用Node.js和MongoDB的項(xiàng)目中實(shí)現(xiàn)視頻列表的分頁展示,文中有相關(guān)的代碼示例,需要的朋友可以參考下2024-04-04
Node.js調(diào)用DeepSeek?API的完整指南
本文將介紹如何使用?Node.js?調(diào)用?DeepSeek?API,實(shí)現(xiàn)流式對(duì)話并保存對(duì)話記錄,Node.js?版本使用現(xiàn)代異步編程方式實(shí)現(xiàn),支持流式處理和錯(cuò)誤處理,文章通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-02-02
Nodejs實(shí)現(xiàn)的操作MongoDB數(shù)據(jù)庫功能完整示例
這篇文章主要介紹了Nodejs實(shí)現(xiàn)的操作MongoDB數(shù)據(jù)庫功能,結(jié)合完整實(shí)例形式分析了nodejs針對(duì)MongoDB數(shù)據(jù)庫的連接及增刪改查基本操作技巧,需要的朋友可以參考下2019-02-02
Node.js 多進(jìn)程處理CPU密集任務(wù)的實(shí)現(xiàn)
這篇文章主要介紹了Node.js 多進(jìn)程處理CPU密集任務(wù)的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
Node.js 使用request模塊下載文件的實(shí)例
今天小編就為大家分享一篇Node.js 使用request模塊下載文件的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
linux 后臺(tái)運(yùn)行node服務(wù)指令方法
今天小編就為大家分享一篇linux 后臺(tái)運(yùn)行node服務(wù)指令方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-05-05
使用PM2實(shí)現(xiàn)高效的應(yīng)用監(jiān)控與管理功能
PM2?是一個(gè)流行的進(jìn)程管理器,用于?Node.js?應(yīng)用程序,它支持應(yīng)用程序的負(fù)載均衡、自動(dòng)重啟、日志管理、監(jiān)控以及多環(huán)境管理等功能,本文給大家介紹了如何使用PM2實(shí)現(xiàn)高效的應(yīng)用監(jiān)控與管理功能,需要的朋友可以參考下2024-02-02
node.js部署之啟動(dòng)后臺(tái)運(yùn)行forever的方法
今天小編就為大家分享一篇node.js部署之啟動(dòng)后臺(tái)運(yùn)行forever的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-05-05

