Nuxt.jsサービス側レンダリング実践、開発から導入まで

悟る
いくつかの土曜日と日曜日の試みを経て、ついにサービス側のレンダリングの中でよくある問題を解決して、SEOがいないのが問題な時、私たちが先端の本当の春をするのかも知れなくて、その中でもいくつかの小さな穴に出会って、Nuxt.jsの公式はやはりとても力を入れて、issueを提げた后にとても积极的に助けて、再びNuxtに感谢します.jsの開発チーム.
ルーティング認証
最初のトラは上陸時の鑑権問題で、どのようにtokenを地元に保存するかです.公式にexpress-sessionを使ってこの問題を解決しますが、このようにバックエンドもnodejsを使う必要があります.当社が使用しているPHPです.クッキーが試してもいいかもしれないと考えて、私はこのようにしました.

app.post('/api/login', function (req, res) {
  //         ，   token
  async function login () {
    const { data } = await axiosServer.post('/login', req.body)
    return data
  }

  login().then(function (data) {
    //  token   cookie 
    const { token } = data
    if (token) {
      res.cookie('token', token, {
        maxAge: 60000 * 60 * 24
      })
    }
    //       
    return res.json(data)
  })
})

私はログイン要求をnodejsで転送し、ユーザーが提出したデータをバックエンドに転送し、バックエンドから戻ったtokenをクッキーに設定し、データをフロントエンドに返し、フロントエンドはvuexでtoken状態を保存します.このようにtokenはクッキーとメモリに同時に存在し、ページ面をリフレッシュするのも正常なフロントエンドストレージtokenです.

  async nuxtServerInit ({ dispatch, commit }, { req, res }) {
    if (req.cookies && req.cookies.token) {
      //   token
      commit('SET_USER', req.cookies.token)
    }
  },
  // SET_USER
  SET_USER (state, token) {
    state.token = token
  },

この問題はこのように解決され、ローカルに格納する必要があるすべてのデータがこのように解決されます.
コンポーネント内のデータのレンダリング
もう一つの小さな問題はcomponentsでデータがどのようにレンダリングされるかです.Nuxt.jsにはpageのコンポーネントのみがfetchとasyncDataの方法があるので、layoutレイアウトページを使用する場合、コンポーネントがデータを要求する必要がある場合はレンダリングできません.解決策はnuxtServerInitの方法でコンポーネント内のデータを初期化し、以下のようにします.

  async nuxtServerInit ({ dispatch, commit }, { req, res }) {
    //          
    await dispatch('ADMIN_INFO')
    await dispatch('TAGS')
    await dispatch('ARCHIVES')
  }

これでコンポーネント内のデータもレンダリングできます
フィルタの使用
Nuxt.jsのpluginsデザインの個人的な感覚はやはり人間的で、使うのはまったく簡単ではありません.pluginsにfiltersを新規作成します.js、フィルタはこのように遊ぶことができます:

import Vue from 'vue'
//      
export function formatDate (date, fmt) {
  let newDate = new Date(date)
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (newDate.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  let o = {
    'M+': newDate.getMonth() + 1,
    'd+': newDate.getDate(),
    'h+': newDate.getHours(),
    'm+': newDate.getMinutes(),
    's+': newDate.getSeconds()
  }
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + ''
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}
let filters = {
  formatDate
}

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
export default filters

そしてnuxt.config.jsに登録してください.

  plugins: [
    '~plugins/filters.js'
  ]

コンポーネントではhappyを使用できます.

 {{date | formatDate('yyyy-MM-dd')}}

ミドルウェア
たとえば、ユーザーがログインしていない状態で、ルーティングによって認証が必要なページに侵入した場合、いくつかのエラーをカスタマイズできます.

// auth.js
export default function ({ store, error }) {
//       props  error  
  if (!store.state.token) {
    error({
      message: 'cookie      ，      ',
      statusCode: 403
    })
  }
}

このミドルウェアをコンポーネントで使用するには、次の手順に従います.

export default {
  middleware: 'auth',
  //              
  fetch ({redirect, store}) {
    if (!store.state.token) {
      redirect('/login')
    }
  },
}

マルチレベルルーティングネスト
公式にはこのような状況は少ないと言われていますが、私は多くのものを使っていることに気づきました.例えば、異なる分類には異なるページがあります.このように分類とページは動的ルーティングで、図に示しています.
コンパイルの結果:
プロジェクトの導入
8月ごろ、nodejsプロジェクトの配置方法についていくつかの文章を書いて、振り返って書いたのはやはり料理を比較して、時間が経つにつれて、いくつかの間違いを修復して、いくつかの間違いを発見して、全体の書くのがあまりにも乱れています.そこで1日引き、新しいサーバで実践しながら記録し、上記の文章をgitbookでまとめましたが、ここでは展開されず、長すぎて自動配置に関する内容が増えました
プロジェクトの実践
この小さなプロジェクトは私が数ヶ月前に書いたもので、最近の1月にNuxtを使いました.jsは再構成する、先端にNuxtを用いた.js+vuex、バックエンドはNodejs+MongoDBを使用して、vueでmarkdownエディタを書いて、画像のアップロードとサービス側のレンダリングをサポートして、効果図:
トップページ
エディタ
GitHub
gitbook