Nuxt配合Node在实际生产中的应用详解


Posted in Javascript onAugust 07, 2018

上个星期,甲方说要在应用上做一个促活活动(其实就是让用户领OFO的骑车券),考虑到之前在我另一个应用上已经做过客户端token验证,想想,撸起袖子直接在之前的Node上开搞吧。

Nuxt

这个东西类似与React中的Next,做Vue服务端渲染在Nuxt确实挺方便的,整个目录结构与Vue-Cli也差不多,但我觉得更清晰明了,而且有很丰富的配置,包括我最喜欢的顶部Loadding条啊、Layer主题模板啊、服务端渲染有益于SEO啊、自动生成Router啊等等等等。这里我就不详细展开了,选择他主要是用习惯了,而且性能也很不错。

Express

它就是一个Koa、egg等的一个服务端的工具,封装很多便捷的方法。这里也不详细展开。

第一步 完成静态页面

在这里就不详细说明HTML怎么构建、Vue使用方法等等等不相关的问题,首先页面效果如下图:

Nuxt配合Node在实际生产中的应用详解 

点击确认领取后,向后端发送请求,获取券码:

Nuxt配合Node在实际生产中的应用详解 

大致业务流程就是这样子了。

第二步 基于webview完成token验证

甲方公司的token是怎么给到用户的呢?

  1.  用户登录客服端
  2. 户在webview访问相应的地址
  3. 客户端把token等信息绑定在地址上让服务端接受,并向服务端发送GET请求
  4. 服务端接受到Token后,根据Token信息验证用户身份并返回页面给用户

所以也就是相当于,此时我手上的Node需要完成一个Token验证的需求,开搞:

这里必须说一下Session这个东西,一开始当我完成了Token验证的时候,可是发现两个用户同时访问的时候,后访问者会重新执行一次对应请求里的方法,相当于很多数据都初始化甚至重新赋值。完全不知道怎么把用户分开,问了一下JAVA的同学,他们说框架自带会分开,这就让我很忧郁了。其实,他们也知道Session这个东西,只是一直这样用后习惯了也就突然说不清楚甚至想到它的存在了。

我一开始想到的是用Cookie验证对应浏览器,但总觉得这种方法有点古老,不够高大上(个人主观看法,勿喷),储存量也很有限。所以又探索了一天,得知有个Session这个东西可以验证对应浏览器(好吧,其实也就是把Cookie当成数据索引)。知道了有这么一回事之后也就茅塞顿开了。

// 引入一些工具
const http = require('http')
const express = require("express");
const session = require('express-session');

const nuxtapp = express(); // 创建一个express应用

// 设置SESSION配置
nuxtapp.use(session({
 secret: 'key' // 建议使用 128 个字符的随机字符串 
}));

// 处理OPTIONS请求(axios发送POST请求时会先发送一个OPTION请求验证服务器的连通情况)
nuxtapp.use(function (req, res, next) {
 if ('OPTIONS' === req.method) {
  res.sendStatus(200);
 } else {
  next();
 }
});

// 写一个验证Token的接口
nuxtapp.get('/getphone', (req, res) => {
  if (!req.query.token) {
   // if else ...
   res.sendStatus(200)
   return;
  }
  // 这里创建请求只是举一个例子,有的Token可以本地解析,有的需要服务端向另一个服务端请求解析。(参考微信)
  const request = http.request({
   host: "api.example.com",
   headers: {
    'Content-Type': ' application/json',
    'Accept-Encoding': 'utf-8', //这里设置返回的编码方式 设置其他的会是乱码
    'Accept-Language': 'zh-CN,zh;q=0.8',
    'Connection': 'keep-alive',
   },
   path: '/getTokenorSth',
   port: 'port',
   method: 'POST'
  }, response => {
   let data = ""; // 创建变量记录数据
   response.on("data", function (chunk) {
    data += chunk
   })
   response.on("end", function () { // 设置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(`错误信息: ${e.message}`);
   res.sendStatus(500)
  });
  // POST Data
  request.write(JSON.stringify({
    example:example,
    token: req.query.token
  })); // 用户传过来的数据 post
  request.end();
})

nuxtapp.listen(port || 80, '0.0.0.0')
console.log("已开启服务器,请访问 —— localhost:" + port || 80)

第三步 服务端代理(这里我也有个点不是很确定,所谓淘宝Node+JAVA是不是就是这种模式)

毕竟我还是个前端,功能方面的实现还是交给资深大JAVA吧(若是给我时间,我还真的想写一下SQL复习一下)

用户访问的时候还是向Node请求,这里需要提一点的就是,假如后端提供了很多接口,你不一定每个都要写一个app.get(‘/api')或者什么,express的文档上有提到类似这种写法:

nuxtapp.all(["/api1/*","/api2/*"], requestFunction)

其他就跟上面token验证差不多了

第四步 用Express执行Nuxt

在Nuxt官网上其实也有部分代码教你如何用自己写的Node去运行,但一直不是很完善,有点差强人意。我在这里就补充一下我的理解, 哪里写得不对,请尽管喷,谢谢喷我的每一个人

// nuxt
const {
 Nuxt,
 Builder
} = require('nuxt') // 引入核心构建属性

// 判断开发环境
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);

// 判断生产模式 dev(开发者模式)表示重新构建 ;pro(生产模式)表示直接从yanr build的文件直接执行
if (config.dev) {
 new Builder(nuxt).build()
  .then(listen)
  .catch((error) => {
   console.error(error)
   process.exit(1)
  })
} else {
 listen()
}

以上的listen就是我在第二、三步写的相应接口的express服务器啦。

那么nuxt其实还并没有在代码中执行,new Nuxt一个Nuxt实例后返回一个nuxt方法,它其实是根据request,response去执行相应的渲染,其中我们要考虑到express()的各种接口的执行顺序,假如一开始就匹配到了第二步的代码的get请求,那么写在第二步代码后的all方法中的各种接口是接收不到的。

我考虑到的是接口不是无缘无故执行的,但用户请求是必然发生的。那么也就是当用户除了故意发送请求,全部由Nuxt接手。所以Nuxt会是放在最后让其渲染页面并交给用户,为了方便验证Token,我把验证Token的请求放在首页让浏览器捕获Token以及相应信息后交给Node执行手动登陆。(其实也可以通过在nuxt渲染前判断是否存在Token来决定是否进行token验证,我就不在这里再进行大量代码的展示了)

结合以上思路,也就是在最后捕获所有GET请求并交手给Nuxt即可:

// 最后捕获nuxt渲染
nuxtapp.get('/*', (req, res) => {
 nuxt.render(req, res)
})

Demo:jasontan.cn

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
React-router4路由监听的实现
Aug 07 #Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 #Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 #Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 #Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 #Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 #Javascript
深入浅析var,let,const的异同点
Aug 07 #Javascript
You might like
人大复印资料处理程序_补充篇
2006/10/09 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
js实现登录验证码
2016/12/22 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
实习生个人的自我评价
2013/12/08 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
公司委托书范本
2014/04/04 职场文书
个人贷款收入证明
2014/10/26 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
高中教师个人总结
2015/02/10 职场文书
应届生简历自我评价
2015/03/11 职场文书
投标单位介绍信
2015/05/05 职场文书
教师见习总结范文
2015/06/23 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书