Nuxt 배합 Node 의 실제 생산 에서 의 응용 상세 설명

지난주 에 갑 은 응용 프로그램 에서 촉진 활동(사실은 사용자 에 게 OFO 의 자전거 권 을 받 게 하 는 것)을 하 겠 다 고 말 했다.예전 에 제 다른 응용 프로그램 에서 클 라 이언 트 token 검증 을 한 것 을 감안 하여 소 매 를 걷 고 예전 의 Node 에서 직접 하 겠 습 니 다.
Nuxt
이 물건 은 React 의 Next 와 유사 합 니 다.Vue 서버 에서 Nuxt 에 렌 더 링 하 는 것 이 정말 편리 합 니 다.전체 디 렉 터 리 구조 와 Vue-cli 도 차이 가 많 지 않 지만 저 는 더욱 뚜렷 하고 명료 하 다 고 생각 합 니 다.그리고 제 가 가장 좋아 하 는 상단 Loading 바,Layer 테마 템 플 릿,서버 렌 더 링 은 SEO 에 유익 하고 자동 으로 Router 를 생 성 하 는 등 다양한 설정 이 있 습 니 다.여기 서 나 는 상세 하 게 전개 하지 않 았 다.그 를 선택 한 것 은 주로 습관 을 썼 고 성능 도 좋 았 다.
Express
그것 은 바로 Koa,egg 등의 서버 도구 로 매우 편리 하 게 포장 하 는 방법 이다.여기 도 자세히 펼 쳐 지지 않 는 다.
첫 번 째 정적 페이지 완성
여기 서 HTML 을 어떻게 구축 하 는 지,Vue 사용 방법 등 과 관련 이 없 는 문 제 를 상세 하 게 설명 하지 않 습 니 다.먼저 페이지 효 과 는 다음 그림 과 같 습 니 다.
 
클릭 하여 수령 확인 후 백 엔 드 에 요청 을 발송 하고 쿠폰 번호 획득:
 
대체로 업무 절차 가 이렇다.
두 번 째 단 계 는 웹 뷰 를 기반 으로 token 인증 을 완료 합 니 다.
갑 회사 의 token 은 어떻게 사용자 에 게 주 었 습 니까?

 사용자 로그 인 고객 센터

웹 뷰 에서 해당 주 소 를 방문 하 는 가구클 라 이언 트 는 token 등 정 보 를 주소 에 연결 하여 서버 에 받 아들 이 고 서버 에 GET 요청 을 보 냅 니 다

서버 에서 Token 을 받 은 후 Token 정보 에 따라 사용자 의 신분 을 검증 하고 사용자 에 게 페이지 로 돌아 갑 니 다

그 렇 기 때문에 이때 제 가 가지 고 있 는 Node 는 Token 검증 의 수 요 를 완성 하고 다음 과 같이 해 야 합 니 다.
여기 서 Session 이라는 것 을 말 해 야 합 니 다.처음에 Token 인증 을 완 료 했 을 때 두 사용자 가 동시에 방문 한 것 을 발 견 했 을 때 방문 자 는 요청 에 대응 하 는 방법 을 다시 실행 합 니 다.많은 데 이 터 를 초기 화하 거나 다시 할당 하 는 것 과 같 습 니 다.사용 자 를 어떻게 분리 해 야 할 지 전혀 모 르 고 JAVA 친구 들 에 게 물 어 봤 더 니 프레임 자체 가 분리 된다 고 해서 우울 했다.사실 그들 도 세 션 이라는 것 을 알 고 있 습 니 다.그냥 계속 이렇게 사용 하 다가 익숙해 지면 갑자기 잘 모 르 겠 고 심지어 그 존재 가 생각 납 니 다.
제 가 처음에 생각 한 것 은 쿠키 로 대응 하 는 브 라 우 저 를 검증 하 는 것 이 었 습 니 다.그러나 이런 방법 은 좀 오래 되 고 크 지 않다 고 생각 했 습 니 다.(개인 적 인 주관적 인 견해,뿌리 지 마 세 요)저장량 도 한계 가 있 습 니 다.그래서 하루 더 탐색 해 보 니 세 션 이라는 것 이 대응 하 는 브 라 우 저 를 검증 할 수 있다 는 것 을 알 게 되 었 습 니 다(알 겠 습 니 다.사실은 쿠키 를 데이터 색인 으로 하 는 것 입 니 다).알 게 되 었 습 니 다.

//       
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)

세 번 째 서버 에이전트(여기 저도 확실 하지 않 은 점 이 있 습 니 다.타 오 바 오 노드+자바 가 이런 모델 인지 아 닌 지)
저 는 아직 전단 이기 때문에 기능 적 인 실현 은 베테랑 JAVA 에 게 맡 기 겠 습 니 다.
사용자 가 방문 할 때 Node 에 요청 해 야 합 니 다.여기 서 한 가지 말씀 드 려 야 할 것 은 백 엔 드 에 많은 인 터 페 이 스 를 제공 하면 모든 앱.get('/api')이나 무엇 을 써 야 하 는 지,express 문서 에 이런 표기 법 이 언급 되 어 있 는 것 은 아 닙 니 다.

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

나머지 는 위 토 큰 검증 과 많이 다 르 지 않 습 니 다.
네 번 째 단 계 는 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
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.