成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Nuxt.js服務(wù)端渲染實踐，從開發(fā)到部署

weij / 3494人閱讀

摘要：感悟經(jīng)過幾個周六周日的嘗試，終于解決了服務(wù)端渲染中的常見問題，當不在是問題的時候，或許才是我們搞前端的真正的春天，其中也遇到了一些小坑，官方還是很給力的，提后很積極的給予幫助，再次感謝的開發(fā)團隊。

感悟

經(jīng)過幾個周六周日的嘗試，終于解決了服務(wù)端渲染中的常見問題，當SEO不在是問題的時候，或許才是我們搞前端的真正的春天，其中也遇到了一些小坑，Nuxt.js官方還是很給力的，提issue后很積極的給予幫助，再次感謝Nuxt.js的開發(fā)團隊。

項目地址
演示地址

路由鑒權(quán)

第一個攔路虎就是登陸時候的鑒權(quán)問題，如何把token保存到本地。官方使用express-session解決這個問題，但是這樣做后端也需要使用nodejs,而我們公司使用的PHP。轉(zhuǎn)念一想或許cookie可以一試，于是我是這樣做的：

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做了一次轉(zhuǎn)發(fā)，把用戶提交的數(shù)據(jù)傳給后端，后端返回的token設(shè)置到cookie里，然后把數(shù)據(jù)返會給前端，前端再用vuex保存token狀態(tài)，這樣token同時存在于cookie和內(nèi)存里，刷新頁面也是正常的
前端存儲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
  },

于是這個問題就這樣解決了，所有需要存儲到本地的數(shù)據(jù)都可以這樣做來解決

渲染組件內(nèi)的數(shù)據(jù)

另一個小問題是components里數(shù)據(jù)如何渲染。在Nuxt.js中只有page里的組件有fetch和asyncData方法，所以當我們使用layout布局頁面時如果組件需要請求數(shù)據(jù)，就無法渲染了，解決方法是在nuxtServerInit方法里初始化組件內(nèi)的數(shù)據(jù)，如下：

  async nuxtServerInit ({ dispatch, commit }, { req, res }) {
    // 初始化組件內(nèi)的數(shù)據(jù)
    await dispatch("ADMIN_INFO")
    await dispatch("TAGS")
    await dispatch("ARCHIVES")
  }

這樣組件內(nèi)的數(shù)據(jù)也可渲染成功了

過濾器的使用

Nuxt.js的plugins設(shè)計的個人感覺還是很人性化的，用起來簡直是不能再簡單。在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")}}
中間件

比如說用戶未登錄狀態(tài)下，通過路由闖入了需要鑒權(quán)的頁面，我們可以自定義一些錯誤：

// 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")
    }
  },
}
多級路由嵌套

官方說這種情況用的較少，但是我發(fā)現(xiàn)用的挺多的，比如說不同分類又有不同分頁，這樣分類和分頁都要是動態(tài)路由，如圖所示：

編譯后的結(jié)果：

項目部署

大概在8月份時候，寫了幾篇關(guān)于如何部署nodejs項目的文章，回頭看寫的果然比較菜，隨著時間推移，修復了一些錯誤，發(fā)現(xiàn)了一些錯誤，整體寫的太亂。于是抽了一天時間，在新的服務(wù)器上一邊實踐一邊記錄，把上面幾篇文章用gitbook匯總了一下，不在這里展開了，太長了，增加了自動部署的相關(guān)內(nèi)容

結(jié)語

以上所有的實踐代碼都在這里，這個小項目是我在幾月前寫的，后來用Nuxt.js進行了重構(gòu)！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90193.html

相關(guān)文章

  • 使用Docker部署Spring-Boot+Vue博客系統(tǒng)

    摘要：先來看一下容器的文件中間一些操作省略這里用了多階段構(gòu)建容器，如果直接通過設(shè)置環(huán)境變量只會在后面一個階段生效，但是是在第一個階段執(zhí)行的，所以環(huán)境變量不能應(yīng)用到當中。 在今年年初的時候，完成了自己的個Fame博客系統(tǒng)的實現(xiàn)，當時也做了一篇博文Spring-boot+Vue = Fame 寫blog的一次小結(jié)作為記錄和介紹。從完成實現(xiàn)到現(xiàn)在，也斷斷續(xù)續(xù)的根據(jù)實際的使用情況進行更新。 只不過每...

    Eirunye 評論0 收藏0

  • vue 服務(wù)器端渲染 nuxt.js初探

    摘要：在調(diào)研插件后，發(fā)現(xiàn)無法滿足以及等要求時，果斷選用了做服務(wù)器渲染。布局目錄該目錄名為保留的，不可更改。服務(wù)器啟動的時候，該目錄下的文件會映射至應(yīng)用的根路徑下。它可以在服務(wù)端或路由更新之前被調(diào)用?？捎糜谥付ǚ?wù)端返回的請求狀態(tài)碼。 開頭還是來一段廢話： 年關(guān)將近，給大家拜個早年，愿大家年會都能抽大獎，來年行大運。 廢話不多說，直接進正文 項目環(huán)境： 前端vue項目， 需要將新增的幾個路由頁...

    bingchen 評論0 收藏0

  • 珠峰前端架構(gòu)師培養(yǎng)計劃

    摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開發(fā)實踐經(jīng)驗相關(guān)字眼。我們主要從端公眾號移動端小程序三大平臺進行前端的技術(shù)選型，并來說說選其技術(shù)的幾大優(yōu)勢。技術(shù)的優(yōu)勢互聯(lián)網(wǎng)前端大潮后，前端出現(xiàn)了大框架，分別是與。 1、技術(shù)選型的背景前端技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)上出現(xiàn)的新型框架也比較多，如何讓新招聘的人員...

    ccj659 評論0 收藏0

  • 細說 Vue 組件的服務(wù)器端渲染

    摘要：所以，這次就來聊聊組件的服務(wù)器端渲染。這種模式下，后端只提供接口，傳統(tǒng)的服務(wù)器端路由模板渲染則都有層接管。這樣，前端開發(fā)人員可以自由的決定哪些組件需要在服務(wù)器端渲染，哪些組件可以放在客戶端渲染，前后端完全解耦，但又保留了服務(wù)器端渲染的功能。 細說 Vue 組件的服務(wù)器端渲染 聲明：需要讀者對 NodeJs、Vue 服務(wù)器端渲染有一定的了解 現(xiàn)在，前后端分離與客戶端渲染已經(jīng)成為前端開發(fā)的...

    reclay 評論0 收藏0

發(fā)表評論

0條評論

weij

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<