国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

weij / 3489人閱讀

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

感悟

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

項(xiàng)目地址
演示地址

路由鑒權(quán)

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

app.post("/api/login", function (req, res) {
  // 后臺(tái)驗(yàn)證用戶信息，并返回token
  async function login () {
    const { data } = await axiosServer.post("/login", req.body)
    return data
  }

  login().then(function (data) {
    // 把token存儲(chǔ)到cookie中
    const { token } = data
    if (token) {
      res.cookie("token", token, {
        maxAge: 60000 * 60 * 24
      })
    }
    // 原封不動(dòng)返回
    return res.json(data)
  })
})

我把登錄請(qǐng)求用nodejs做了一次轉(zhuǎn)發(fā)，把用戶提交的數(shù)據(jù)傳給后端，后端返回的token設(shè)置到cookie里，然后把數(shù)據(jù)返會(huì)給前端，前端再用vuex保存token狀態(tài)，這樣token同時(shí)存在于cookie和內(nèi)存里，刷新頁面也是正常的
前端存儲(chǔ)token:

  async nuxtServerInit ({ dispatch, commit }, { req, res }) {
    if (req.cookies && req.cookies.token) {
      // 存儲(chǔ)token
      commit("SET_USER", req.cookies.token)
    }
  },
  // SET_USER
  SET_USER (state, token) {
    state.token = token
  },

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

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

另一個(gè)小問題是components里數(shù)據(jù)如何渲染。在Nuxt.js中只有page里的組件有fetch和asyncData方法，所以當(dāng)我們使用layout布局頁面時(shí)如果組件需要請(qǐng)求數(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è)計(jì)的個(gè)人感覺還是很人性化的，用起來簡(jiǎn)直是不能再簡(jiǎn)單。在plugins新建一個(gè)filters.js，過濾器可以這樣玩：

import Vue from "vue"
// 時(shí)間格式化
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中注冊(cè)一下：

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

在組件中就可以這樣happy的用起來了：




 {{date | formatDate("yyyy-MM-dd")}}
中間件

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

// auth.js
export default function ({ store, error }) {
// 可通過組件的props接收error信息
  if (!store.state.token) {
    error({
      message: "cookie失效或未登錄，請(qǐng)登錄后操作",
      statusCode: 403
    })
  }
}

在組件中使用該中間件：

export default {
  middleware: "auth",
  // 還可以把用戶重定位到登錄頁
  fetch ({redirect, store}) {
    if (!store.state.token) {
      redirect("/login")
    }
  },
}
多級(jí)路由嵌套

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

編譯后的結(jié)果：

項(xiàng)目部署

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

結(jié)語

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/90193.html

相關(guān)文章

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

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

    Eirunye 評(píng)論0 收藏0

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

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

    bingchen 評(píng)論0 收藏0

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

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

    ccj659 評(píng)論0 收藏0

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

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

    reclay 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

weij

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<