详细说明Nuxt和Node在实际生产中的应用

上周甲方表示会在应用中做一个推广生活的活动(其实就是让用户拿到OFO的自行车代金券)。考虑到我之前已经在另一个应用程序中完成了客户端令牌验证，考虑一下，卷起袖子，直接在前一个Node上启动它。

Nuxt

这个东西类似于反应中的下一个。在Nuxt中渲染Vue服务器相当方便。整个目录结构类似于Vue-Cli，但我觉得更清晰，配置丰富，包括我最喜欢的top Loadding bar、Layer主题模板、有利于SEO的服务器渲染、自动生成Router等等。这里就不细说了。我选他主要是因为他习惯了，表现很好。

表达

它是一个服务器端工具，比如Koa和egg，封装了很多方便的方法。这里也不详细展开。

第一步是完成静态页面

在这里，我们不会详细解释如何构建HTML，如何使用Vue等。等等。首先，页面效果如下：

点击确认接收，然后向后端发送获取优惠券代码的请求：

一般的业务流程是这样的。

第二步是基于webview完成令牌验证

甲方公司的令牌是怎么给用户的？

用户登录到客户服务最终用户，访问webview中的相应地址。客户端将令牌等信息绑定到服务器接受的地址，并向服务器发送GET请求。服务器收到Token后，会根据Token信息验证用户的身份，并将页面返回给用户，所以是等价的。此时，我手中的节点需要完成令牌验证要求。

在这里，我们必须谈论会话。一开始我在完成Token验证的时候，却发现两个用户同时访问，后一个访问者会在对应的请求中重新执行方法，相当于初始化甚至重新分配了很多数据。我根本不知道怎么把用户分开。我问我的JAVA同学，他们说框架会分离，这让我很郁闷。其实他们也知道Session，只是一直习惯了，突然说不清楚，甚至想不到它的存在。

一开始想到用Cookie验证对应的浏览器，但总觉得这个方法有点老，不够高大上(个人主观意见，不要喷)，存储容量有限。因此，经过又一天的探索，我了解到有一个Session可以验证相应的浏览器(嗯，实际上，Cookie被用作数据索引)。在知道有这样的事情之后，它就会走到尽头。

//介绍一些工具const http=require(' http ')const express=require(' express ')；const session=require(' express-session ')；const nuxtapp=express()；//创建一个express application//设置SESSION配置nuxtapp . use(SESSION({ secret : ' key '//建议使用128个字符的随机字符串})；//处理OPTIONS请求(axios在发送POST请求时会发送一个OPTION请求来验证服务器的连接性)nuxtapp。使用(函数(req，RES，next) {if ('options'==req。方法){ RES . send status(200)；} else { next()；}});//写一个接口nuxtapp.get ('/getphone '，(req，RES)={if(！req.query.token) { //if else.res.sendStatus(200)返回；}//在这里创建请求只是一个例子。有些Token可以在本地解析，有些则需要服务器从另一台服务器请求解析。(参考微信)const request=http . request({ host : ' API . example.com '，header : { ' content-type ' : ' application/JSON '，Accept-encoding' :' UTF-8 '，//在此设置返回的编码方式。其他会乱码'接受-语言' : 'zh-CN，zh；q=0.8 '，' Connection': 'keep-alive '，}，path : '/gettokenorth '，port: 'port '，method: 'POST' }，response={ let data=//创建变量记录数据响应. on ('data '，函数(chunk) {data=chunk})响应. on ('end '，函数(){//set seesion try {if(！req.session.id) { //像： 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。监听(端口| | 80，' 0.0.0 ')控制台。日志('服务器已开机，请访问——localhost 3360 '端口| | 80)，第三步是服务器端代理(这里我不确定所谓的淘宝Node JAVA是不是这个模式)

毕竟我还是一个前端，功能的实现要交给高级JAVA(如果给我时间，我真的很想写SQL复习一下)

当用户访问时，他们仍然从节点请求。这里要提到的是，如果后端提供了很多接口，就不用写app了。为每一个获取(“/API”)什么的。快递文件中提到了类似的文字：

Nuxtapp。all (['/API 1/*，/API 2/*]，请求函数)类似于上面的令牌验证

第四步是用Express执行Nuxt

其实Nuxt官网上有一些代码教你如何用自己的Node运行，但是并不是一直都很完美。我想在这里补充一下我的理解。如果有问题，请随意喷。谢谢大家喷。

//nuxtconst { Nuxt，Builder}=require('nuxt') //引入核心构建属性//判断开发环境const是prod=(process。env . node _ env==' production ')const port=process。env.port | | 80//引入nuxt配置const config=require('。/nuxt . config . js’)config . dev=！isProdconst nuxt=new Nuxt(配置)；//判断生产模式dev(开发者模式)意味着重建；Pro(生产模式)意味着执行if (config.dev) {new builder (nuxt)。构建()。然后(听着)。catch((错误)={console。错误(错误)过程。直接从yanr build的文件中退出(1)})。上面的listen else { listen()}是我在第二步和第三步写的对应接口的express server。

那么代码中实际上还没有执行nuxt，在一个Nuxt实例之后，new 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)})演示：jasontan.cn

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。