一篇文章帶你快速入門 Nuxt.js 服務端渲染

在這里插入圖片描述

1. Nuxt.js 概述

1.1 我們一起做過的SPA

  • SPA（single page web application）單頁 Web 應用，Web 不再是一張張頁面，而是一個整體的應用，一個由路由系統、數據系統、頁面（組件）系統等等，組成的應用程序。

  • 我們之前學習的Vue就是SPA中的佼佼者。

  • SPA 應用廣泛用于對SEO要求不高的場景中

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

1.2 什么是SEO

  • SEO：搜索引擎優化（Search Engine Optimization）, 通過各種技術（手段）來確保，我們的Web內容被搜索引擎最大化收錄，最大化提高權重，最終帶來更多流量。

  • 非常明顯，SPA程序不利于SEO

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • SEO解決方案：提前將頁面和數據進行整合

    • 前端：采用SSR

  • 后端：頁面靜態化 （freemarker 、thymeleaf、velocity）

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

1.3 什么是SSR技術

  • 服務端渲染（Server Side Render），即：網頁是通過服務端渲染生成后輸出給客戶端。

    • 在SSR中，前端分成2部分：前端客戶端、前端服務端
    • 前端服務端，用于發送ajax，獲得數據
    • 前端客戶端，用于將ajax數據和頁面進行渲染，渲染成html頁面，并響應給調用程序（瀏覽器、爬蟲）

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 如果爬蟲獲得html頁面，就可以啟動處理程序，處理頁面內容，最終完成SEO操作。

1.4 SPA和SSR對比

SPA單頁應用程序SSR服務器端渲染
優勢1.頁面內容在客戶端渲染
2. 只關注View層，與后臺耦合度低，前后端分離
3.減輕后臺渲染畫面的壓力		1.更好的SEO，搜索引擎工具可以直接查看完全渲染的畫面
2.更快的內容到達時間 (time-to-content)，用戶能更快的看到完整渲染的畫面
劣勢1.首屏加載緩慢
2.SEO(搜索引擎優化)不友好		1.更多的服務器端負載
2.涉及構建設置和部署的更多要求，需要用Node.js渲染
3.開發條件有限制，一些生命周期將失效
4.一些常用的瀏覽器API無法使用

1.5 什么是Nuxt.js

  • Nuxt.js 是一個基于 Vue.js 的通用應用框架。

    • Nuxt支持vue的所有功能，此類內容為前端客戶端內容。
    • Nuxt特有的內容，都是前端服務端內容。

  • 通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI 渲染。

  • Nuxt.js 預設了利用 Vue.js 開發服務端渲染的應用所需要的各種配置。

2 入門案例

2.1 create-nuxt-app 介紹

  • Nuxt.js 提供了腳手架工具 create-nuxt-app

  • create-nuxt-app 需要使用 npx

  • npx 命令為 NPM版本5.2.0默認安裝組件

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

2.2 安裝

npx create-nuxt-app <project-name>
  • 例如
npx create-nuxt-app demo_nuxt02

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

2.3 啟動

npm run dev

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • nuxtjs改善

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

2.4 訪問

http://localhost:3000

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

3. 目錄結構

3.1 目錄

目錄名稱描述
assets資源目錄，用于存放需要編譯的靜態資源。例如：LESS、SASS等
默認情況下，Nuxt使用Webpack若干加載器處理目錄中的文件
componentsvue組件目錄，Nuxt.js 不會增強該目錄，及不支持SSR
layouts布局組件目錄
pages頁面目錄，所有的vue視圖，nuxt根據目錄結構自動生成對應的路由。
plugins插件目錄
static靜態文件目錄，不需要編譯的文件
storevuex目錄
nuxt.config.jsnuxt個性化配置文件，內容將覆蓋默認
package.json項目配置文件

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

3.2 別名

  • assets 資源的引用：~ 或 @

    // HTML 標簽
<img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="~/assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="@/assets/13.jpg" style="height:100px;width:100px;" alt="">// CSS
background-image: url(~assets/13.jpg);
background-image: url(~/assets/13.jpg);
background-image: url(@/assets/13.jpg);

  • static 目錄資源的引用：/ 直接引用

    //html標簽
<img src="/12.jpg" style="height:100px;width:100px;" alt="">//css
background-image: url(/12.jpg);

  • 實例

    <template><div><!-- 引用 assets 目錄下經過 webpack 構建處理后的圖片 --><img src="~assets/13.jpg" style="height:100px;width:100px;" alt=""><!-- 引用 static 目錄下的圖片 --><img src="/12.jpg" style="height:100px;width:100px;" alt=""><!-- css --><div class="img1"></div><div class="img2"></div></div>
</template><script>
export default {}
</script><style>.img1 {height: 100px;width: 100px;background-image: url(~assets/13.jpg);background-size: 100px 100px;display: inline-block;}.img2 {height: 100px;width: 100px;background-image: url(/12.jpg);background-size: 100px 100px;display: inline-block;}
</style>

4 路由

4.1 路由概述

  • Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置。
  • 要在頁面之間切換路由，我們建議使用<nuxt-link> 標簽。
標簽名描述
<nuxt-link>nuxt.js中切換路由
<Nuxt />nuxt.js的路由視圖
<router-link>vue默認切換路由
<router-view/>vue默認路由視圖

4.2 基礎路由

  • 自動生成基礎路由規則
路徑組件位置及其名稱規則
/pages/index.vue默認文件 index.vue
/userpages/user/index.vue默認文件 index.vue
/user/onepages/user/one.vue指定文件

  • 實例

    情況1：訪問路徑，由pages目錄資源的名稱組成（目錄名稱、文件的名稱）- 資源位置： ~/pages/user/one.vue- 訪問路徑：http://localhost:3000/user/one情況2：每一個目錄下，都有一個默認文件 index.vue- 資源位置： ~/pages/user/index.vue- 訪問路徑：http://localhost:3000/user

  • 思考：/user 可以匹配幾種文件？

    • pages/user.vue 文件 【優先級高】
    • pages/user/index.vue 文件

4.3 動態路由

  • 在 Nuxt.js 里面定義帶參數的動態路由，需要創建對應的以下劃線作為前綴的 Vue 文件 或 目錄。
路由中路徑匹配組件位置及其名稱
/pages/index.vue
/user/:idpages/user/_id.vue
/:slugpages/_slug/index.vue
/:slug/commentspages/_slug/comments.vue
  • 實例1：獲得id值，創建資源 user/_id.vue
<template><div>查詢詳情 {{this.$route.params.id}}</div>
</template><script>
export default {transition: 'test',mounted() {console.info(this.$route)},
}
</script><style></style>

4.4 動態命名路由

  • 路徑 /news/123 匹配_id.vue還是_name.vue ？

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 我們可以使用<nuxt-link>解決以上問題

    • 通過name 確定組件名稱：“xxx-yyy”
    • 通過params 給對應的參數傳遞值
<nuxt-link :to="{name:'news-id',params:{id:1002}}">第2新聞</nuxt-link>
<nuxt-link :to="{name:'news-name',params:{name:1003}}">第3新聞</nuxt-link>

4.5 默認路由

路徑組件位置及其名稱
不匹配的路徑pages/_.vue
  • 404頁面，可以采用 _.vue進行處理

4.6 嵌套路由(知道)

  • 創建嵌套子路由，你需要添加一個 父組件Vue 文件，同時添加一個與該文件同名的目錄用來存放子視圖組件。

    • 要求：父組件 使用<nuxt-child/> 顯示子視圖內容
    pages/
--| book/						//同名文件夾
-----| _id.vue
-----| index.vue
--| book.vue					//父組件

  • 步驟1：編寫父組件 pages/child/book.vue

    <template><div><nuxt-link to="/child/book/list">書籍列表</nuxt-link> |<nuxt-link to="/child/book/123">書籍詳情</nuxt-link> |<hr><nuxt-child /></div>
</template><script>
export default {}
</script><style></style>

  • 步驟2：編寫子組件 pages/child/book/list.vue

    <template><div>書籍列表</div>
</template><script>
export default {}
</script><style></style>

  • 步驟3：編寫子組件 pages/child/book/_id.vue

    <template><div>書籍詳情{{$route.params.id}} </div>
</template><script>
export default {}
</script><style></style>

4.7 過渡動效（了解）

4.7.1 全局過渡動效設置

  • Nuxt.js 默認使用的過渡效果名稱為 page

    • .page-enter-active樣式表示進入的過渡效果。
    • .page-leave-active樣式表示離開的過渡效果。

  • 步驟1：創建 assets/main.css，編寫如下內容：

    .page-enter-active, .page-leave-active {transition: opacity .5s;
}
.page-enter, .page-leave-active {opacity: 0;
}

  • 步驟2：nuxt.config.js 引入main.css文件

    module.exports = {css: ['assets/main.css']
}

4.7.1 自定義動畫

  • 如果想給某個頁面自定義過渡特效的話，只要在該頁面組件中配置 transition 字段即可：

  • 步驟1：在全局樣式 assets/main.css 中添加名稱為test的過渡效果

    .test-enter-active, .test-leave-active {transition: all 2s;font-size:12px;
}.test-enter, .test-leave-active {opacity: 0;font-size:40px;
}

  • 步驟2：需要使用特效的vue頁面編寫如下：

    export default {transition: 'test'
}

4.8 案例：學生管理

  • 需求1：首頁

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 需求2：點擊，學生管理

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 需求3：點擊“添加”按鈕

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 需求4：點擊修改按鈕

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 需求5：詳情

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

5. 視圖

5.1 默認模板（了解）

  • 定制化默認的 html 模板，只需要在應用根目錄下創建一個 app.html 的文件。

  • 默認模板：

    <!DOCTYPE html>
<html {{ HTML_ATTRS }}><head {{ HEAD_ATTRS }}>{{ HEAD }}</head><body {{ BODY_ATTRS }}>{{ APP }}</body>
</html>

  • 修改模板，對低版本IE瀏覽器進行支持（兼容IE瀏覽器）

    <!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]--><head {{ HEAD_ATTRS }}>{{ HEAD }}</head><body {{ BODY_ATTRS }}>{{ APP }}</body>
</html>

5.2 默認布局【掌握】

5.2.1 布局概述

  • 布局：Nuxt.js根據布局，將不同的組件進行組合。

  • 模板：html頁面，是布局后所有組件掛載的基礎。

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

5.2.2 布局分析

  • layouts/default.vue 默認布局組件
    • 訪問路徑根據路由，確定執行組件
    • 組件具體顯示的位置，有布局來確定

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

5.2.3 公共導航

  • 修改 layouts/default.vue
<template><div><nuxt-link to="/">首頁</nuxt-link> |<nuxt-link to="/user/login">登錄</nuxt-link> |<nuxt-link to="/user/123">詳情</nuxt-link> |<nuxt-link to="/about">默認頁</nuxt-link> |<nuxt-link to="/nuxt/async">async</nuxt-link> |<hr/><Nuxt /></div>
</template>

5.3 自定義布局

  • 在layouts目錄下創建組件：layouts/blog.vue

    <template><div>開頭<br/><nuxt/>結束<br/></div></template><script>
export default {}
</script><style></style>

  • 在需要的視圖中使用 blog布局

    <script>
export default {layout: 'blog'//...
}
</script>

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

5.4 錯誤頁面（了解）

  • 編寫layouts/error.vue頁面，實現個性化錯誤頁面
<template><div><div v-if="error.statusCode == 404">404 頁面不存在 {{error.message}}</div><div v-else>應用程序錯誤</div><nuxt-link to="/">首 頁</nuxt-link></div>
</template><script>
export default {props: ['error']
}
</script><style></style>
  • 解決問題： 404 、500、連接超時（服務器關閉）
  • 總結：所學習的技術中，有2種方式處理錯誤頁面
    • 方式1：默認路徑，_.vue （先執行）
    • 方式2：錯誤頁面，~/layouts/error.vue

6 Nuxt組件特殊配置

6.1 概述

  • Nuxt頁面組件實際上是 Vue 組件，只不過 Nuxt.js 為這些組件添加了一些特殊的配置項（在Vue組件的基礎上，添加了額外功能）
特殊配置項描述
asyncDataSSR進行異步數據處理，也就是服務器端ajax操作區域。
fetch在渲染頁面之前獲取數據填充應用的狀態樹（store）
head配置當前頁面的head標簽，整合第三方css、js等。
layout指定當前頁面使用的布局
transition指定頁面切換的過渡動效
scrollToTop布爾值，默認: false。 用于判定渲染頁面前是否需要將當前頁面滾動至頂部。

6.2 模板代碼

<template><h1 class="red">Hello {{ name }}!</h1>
</template><script>
export default {asyncData (context) {					//異步處理數據, 每次加載之前被調用return { name: 'World' }},	fetch () {							//用于在渲染頁面之前獲取數據填充應用的狀態樹（store）},head: {								//配置當前頁面的 Meta 標簽},layout: '自定義布局名'					//自定義布局...
}
</script><style>
.red {color: red;
}
</style>

6.3 head - 入門

  • html模板代碼

    <html>
<head><meta charset="UTF-8" /><title>我是標題</title><link rel="stylesheet" type="text/css" href="css外部文件"/><script src="js外部文件" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>

  • 通過nuxt提供head屬性，可以給單個也是設置：標題、外部css、外部js 等內容。

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 基本模板

    <script>
export default {head: {link: [],       //導入第三方css文件，可以導入多個script: []      //導入第三方js文件，可以導入多個}
}
</script>

  • 完整代碼

<template><div>詳情頁 {{$route.params.id}} <br/><div class="bg2"></div><div class="bg3"></div></div>
</template><script>
export default {head: {title: '詳情頁',link: [{rel:'stylesheet',href:'/style/img.css'},....],script: [{ type: 'text/javascript', src: '/js/news.js' }]}
}
</script><style>.bg2 {background-image: url('~static/img/2.jpg');width: 300px;height: 300px;background-size: 300px;}
</style>

7. ajax操作

7.1 整合 axios

7.1.1 默認整合

  • 在構建項目時，如果選擇axios組件，nuxt.js將自動與axios進行整合

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

7.1.2 手動整合（可選）

  • 步驟1：package.json有axios的版本

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

      "dependencies": {"@nuxtjs/axios": "^5.13.1",},

  • 步驟2：安裝

    npm install

  • 步驟3：nuxt.config.js 以模塊的方式添加axios

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

      modules: [// https://go.nuxtjs.dev/axios'@nuxtjs/axios',],

7.1.3 常見配置

  • 修改 nuxt.config.js 進行baseURL的配置

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

      // Axios module configuration: https://go.nuxtjs.dev/config-axiosaxios: {baseURL:'http://localhost:10010/'},

7.2 使用axios發送ajax

  • 在vue頁面中，通過 this. a x i o s . x x x ( ) 操作 a j a x 。 t h i s . axios.xxx() 操作ajax。this. axios.xxx()操作ajax。this.axios 與之前 axios等效。

    this.$axios.post("/search-service/search",this.searchMap).then( res => {//獲得查詢結果this.searchResult = res.data.data;
});

7.3 使用asyncData發送 ajax

  • asyncData中的ajax將在“前端服務端執行”，在瀏覽器看到是數據，而不是ajax程序。

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

7.3.1 發送一次請求

  • 語法：
export default {async asyncData( context ) {  //context就相當于其他地方的this//發送ajaxlet { data } = await context.$axios.get('路徑','參數')// 返回結果return {變量: 查詢結果從data獲取 }},
}

  • 實例

    <template><div>{{echo}}</div>
</template><script>
export default {async asyncData(context) {// 發送ajaxlet {data} = await context.$axios.get('/service-consumer/feign/echo/abc')// 返回數據return {echo: data}},
}
</script><style></style>

7.3.2 發送多次請求

  • 語法1：

    export default {async asyncData( content ) {let [結果1,結果2] = await Promise.all([ ajax請求1, ajax請求2])return {變量1: 結果1,變量2: 結果2}},
}

  • 語法2：

    export default {async asyncData( content ) {let [{數據:別名1},{數據:別名2}] = await Promise.all([ ajax請求1, ajax請求2])return {變量1: 別名1,變量2: 別名2}},
}

    //演化過程
let response = ajax請求
let [response,response] = await Promise.all([ajax1,ajax2])
let [{data},{data}] = await Promise.all([ajax1,ajax2])
let [{data:別名1},{data:別名2}] = await Promise.all([ajax1,ajax2])

  • 實例

<template><div>{{echo}} {{echo2}}</div>
</template><script>
export default {async asyncData(context) {// 發送ajaxlet [{data:echo}, {data:echo2}] = await Promise.all([context.$axios.get('/service-consumer/feign/echo/abc'),context.$axios.get('/service-consumer/client/echo/abc')])// 返回數據return {echo,echo2}},
}
</script><style></style>

7.4 使用fetch發送 ajax

  • fetch 方法用于在渲染頁面前填充應用的狀態樹（store）數據， 與 asyncData 方法類似，不同的是它不會設置組件的數據。

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 步驟1：創建store/index.js

    export const state = () => ({str: 0
})export const mutations = {setData (state, value) {state.str = value}
}

  • 步驟2：測試頁面

    <template><div><!-- 顯示數據 -->{{$store.state.str}}</div>
</template><script>export default {async fetch( {store, $axios} ) {// 發送ajaxlet { data } = await $axios.get('/service-consumer/feign/echo/abc')// 設置數據store.commit('setData' , data )}
}
</script><style></style>

7.5 插件：自定義axios

7.5.0 分析

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

7.5.1 客戶端

  • 步驟一：在nuxt.conf.js中配置客戶端插件，設置 mode 為 client

      plugins: [{ src: '~plugins/api_client.js', mode: 'client' }//{ src: '~plugins/api.js', ssr: false }],

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

  • 步驟二：編寫 plugins/api_client.js 對 內置的 $axios進行增強

    外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

    //自定義函數
const request = {test : (params) => {return axios.get('/service-consumer/feign/echo/abc',{params})},
}var axios = null
export default ({ $axios }, inject) => {//3） 保存內置的axiosaxios = $axios//4) 將自定義函數交于nuxt// 使用方式1：在vue中，this.$request.xxx()// 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()inject('request', request)
}

7.5.2 服務端

  • 步驟一：配置服務端插件，設置 mode 為 server

      plugins: [{ src: '~plugins/api_client.js', mode: 'client' },{ src: '~plugins/api_server.js', mode: 'server' },//{ src: '~plugins/api.js', ssr: false },//{ src: '~plugins/api.server.js', ssr: true }],

  • 步驟二：編寫 plugins/api.server.js 對 內置的 $axios進行增強

    const request = {test : (params) => {return axios.get('/service-consumer/feign/echo/abc',{params})},}var axios = null
export default ({ $axios, redirect, process }, inject) => {//賦值axios = $axios//4) 將自定義函數交于nuxt// 使用方式1：在vue中，this.$requestServer.xxx()// 使用方式2：在nuxt的asyncData中，content.app.$requestServer.xxx()inject('requestServer', request)
}

  • 注意：前端服務端插件，不支持切換路由。也就是說刷新可以訪問，使用<nuxt-link>切換不能訪問。解決方案：

    • 方案1：修改mode，支持client和service。
    • 方案2：使用 location.href = ‘路徑’ 進行跳轉

7.5.3 插件配置總結

//方式1：通過src設置文件，通過mode設置模式
plugins: [{ src: '~/plugins/apiclient.js', mode: 'client' },		//前端客戶端{ src: '~/plugins/apiserver.js', mode: 'server' },		//前端服務端{ src: '~/plugins/api.js' }								//前端客戶端 + 前端服務端
]//方式2：通過命名來確定模式
plugins: ['~/plugins/api.client.js',				//前端客戶端'~/plugins/api.server.js',				//前端服務端'~/plugins/api.js',						//前端客戶端 + 前端服務端
]

8. Vuex 狀態樹

8.1 根模塊數據操作

  • 步驟一：創建 store/index.js 添加一個 counter變量，并可以繼續累加操作

    export const state = () => ({counter: 0
})export const mutations = {increment (state) {state.counter++}
}

  • 步驟二：在頁面中，使用

    <template><div>首頁 {{counter}}<input type="button" value="+" @click="increment"/></div>
</template><script>
import { mapState,mapMutations } from 'vuex'
export default {computed: {...mapState(['counter'])},methods: {...mapMutations(['increment'])},
}
</script><style></style>

8.2 其他模塊數據操作

  • 步驟一：創建其他模塊 store/book.js

    export const state = () => ({money: 0
})export const mutations = {addmoney (state) {state.money += 5}
}

  • 步驟二：使用指定模塊中的數據

    <template><div>金額：{{money}} <br><input type="button" value="累加" @click="addMoney(5)"></div>
</template><script>
import {mapState, mapMutations} from 'vuex'
export default {methods: {// ...mapMutations({'方法名':'模塊/action名稱'})...mapMutations({'addMoney':'book/addMoney'})},computed: {//...mapState('模塊名稱',['變量'])...mapState('book',['money'])}
}
</script><style></style>

8.3 完整vuex模板

// state為一個函數, 注意箭頭函數寫法
const state = () => ({user: 'jack'
})// mutations為一個對象
const mutations = {setUser(state, value) {state.counter = value}
}
// action執行mutation
const actions = {userAction (context,value){// 可以發送ajaxcontext.commit('setUser',value)}}// 獲取數據
const getters = {getUser (state) {return state.user}
}
export default {namespace: true,	// 命名空間，強制要求，在使用時，加上所屬的模塊名，例如：book/addmoneystate,mutations,actions,getters
}

9. nuxt流程總結

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

10. Nuxt整合Element UI

11 綜合練習

10.1 練習1：學生列表

  • 表結構

    #班級表
create table tab_class(cid int primary key auto_increment,cname varchar(50)
);
insert into tab_class(cid, cname) values(1,'Java56');
insert into tab_class(cid, cname) values(2,'Java78');#學生表
create table tab_student(sid int primary key auto_increment,sname varchar(50),cid int
);insert into tab_student(sname,cid) values('張三',1);
insert into tab_student(sname,cid) values('李四',1);
insert into tab_student(sname,cid) values('王五',2);
insert into tab_student(sname,cid) values('趙六',2);

  • 需求：查詢學生列表信息

    • 要求1：可以進行“班級”條件查詢
    • 要求2：對“班級”數據進行SEO
    • 要求3：學生數據不進行SEO

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

10.2 練習2：

10.2.1 表結構：

CREATE TABLE tb_teacher(tid INT PRIMARY KEY AUTO_INCREMENT,tname VARCHAR(50) COMMENT '老師姓名',TYPE INT COMMENT '老師類型：1.授課老師、2.助理老師、3.輔導員老師'
);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(1,'梁桐老師',1);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(2,'馬坤老師',2);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(3,'仲燕老師',3);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(4,'袁新奇老師',1);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(5,'任林達老師',2);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(6,'王珊珊老師',3);CREATE TABLE tb_class(cid INT PRIMARY KEY AUTO_INCREMENT,cname VARCHAR(50) COMMENT '班級名稱',teacher1_id INT COMMENT '授課老師',teacher2_id INT COMMENT '助理老師',teacher3_id INT COMMENT '輔導員老師'
);INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(1,'Java56',1,2,3);
INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(2,'Java78',1,2,3);
INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(3,'Java12',4,5,6);
INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(4,'Java34',4,5,6);

10.2.2 需求：查詢

  • 需求：使用“自定義axios”完成
    • 查詢班級詳情
    • 通過班級名稱模糊查詢
    • 查詢班級的同時，查詢老師信息

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

10.2.3 擴展需求：添加

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

end

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/207707.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/207707.shtml
英文地址，請注明出處：http://en.pswp.cn/news/207707.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

什么是HTTPS加密協議？HTTPS安全傳輸原理，SSL和TLS介紹，NGINX如何配置SSL證書

什么是HTTPS加密協議？HTTPS安全傳輸原理，SSL和TLS介紹，NGINX如何配置SSL證書

HTTPS介紹 HTTPS是超文本傳輸協議&#xff08;HTTP&#xff09;的安全版本。它使用SSL&#xff08;安全套接層&#xff09;或TLS&#xff08;傳輸層安全&#xff09;加密協議來保護數據傳輸的安全性和機密性&#xff0c;以防止未經授權的訪問和竊聽。HTTPS協議通常用于處理敏感…
閱讀更多...
HbuilderX使用Uniapp+Vue3安裝uview-plus

HbuilderX使用Uniapp+Vue3安裝uview-plus

如果你是vue2版本想使用uniapp去配置uviewui庫可以參考之前的文章 小程序的第三方ui庫推薦較多的還是uview的&#xff0c;看起來比較美觀&#xff0c;功能也比較完善&#xff0c;下面將提一下Vue3安裝uview-plus庫的教程 創建項目 安裝 首先進入官網 uView-Plus 直接下載并導…
閱讀更多...
預訓練--微調

預訓練--微調

預訓練–微調 一個很簡單的道理&#xff0c;如果我們的模型是再ImageNet下訓練的&#xff0c;那么這個模型一定是會比較復雜的&#xff0c;意思就是這個模型可以識別到很多種類別的即泛化能力很強&#xff0c;但是如果要它精確的識別是否某種類別&#xff0c;它的表現可能就不…
閱讀更多...
07-2 Python模塊和命名空間

07-2 Python模塊和命名空間

1. 模塊 概念&#xff1a;其實就是一個Python文件&#xff0c;正常文件有的變量&#xff0c;函數&#xff0c;類&#xff0c;模塊都有 功能:模塊可以被其它程序引入&#xff0c;以使用該模塊中的函數等功能。 示例&#xff1a;test-module.py調用mymodule.py模塊中的now_time…
閱讀更多...
充電樁IC

充電樁IC

充電樁IC 電子元器件百科 文章目錄 充電樁IC前言一、充電樁IC是什么二、充電樁IC的類別三、充電樁IC的應用實例四、充電樁IC的工作原理總結前言 充電樁IC的設計和功能會根據不同的充電協議和市場需求進行調整和定制。目前市場上有許多不同型號和廠家的充電樁IC可供選擇，以滿足…
閱讀更多...
一篇文章帶你快速入門 Vue 核心語法

一篇文章帶你快速入門 Vue 核心語法

一篇文章帶你快速入門 Vue 核心語法 一、為什么要學習Vue 1.前端必備技能 2.崗位多&#xff0c;絕大互聯網公司都在使用Vue 3.提高開發效率 4.高薪必備技能&#xff08;Vue2Vue3&#xff09; 二、什么是Vue 概念&#xff1a;Vue (讀音 /vju?/&#xff0c;類似于 view) …
閱讀更多...
Mysql 日期函數大全

Mysql 日期函數大全

一、時間函數 &#xff08;一&#xff09;、獲取當前時間 1、NOW() 獲取當前日期和時間&#xff0c;在程序一開始執行便拿到時間 返回格式 YYYY-MM-DD hh:mm:ss eg&#xff1a; NOW() 得到 2023-12-03 12:20:02 NOW(),SLEEP(2),NOW() 得到 2023-12-03 12:20:02 | 0 | 2023-…
閱讀更多...
目標檢測——OverFeat算法解讀

目標檢測——OverFeat算法解讀

論文&#xff1a;OverFeat: Integrated Recognition, Localization and Detection using Convolutional Networks 作者&#xff1a;Pierre Sermanet, David Eigen, Xiang Zhang, Michael Mathieu, Rob Fergus, Yann LeCun 鏈接&#xff1a;https://arxiv.org/abs/1312.6229 文章…
閱讀更多...
Go語言-讓我印象深刻的13個特性

Go語言-讓我印象深刻的13個特性

我們正在加速進入云原生時代&#xff0c;Go語言作為云原生的一塊基石&#xff0c;確有它的獨到之處。本文介紹Go語言的幾個讓我印象深刻的特性。 1、兼顧開發效率和性能 Go語言兼顧開發效率和性能。可以像Python那樣有很快的開發速度&#xff0c;也可以像C那樣有很快的執行速…
閱讀更多...
SpringAOP專欄二《原理篇》

SpringAOP專欄二《原理篇》

上一篇SpringAOP專欄一《使用教程篇》-CSDN博客介紹了SpringAop如何使用&#xff0c;這一篇文章就會介紹Spring AOP 的底層實現原理&#xff0c;并通過源代碼解析來詳細闡述其實現過程。 前言 Spring AOP 的實現原理是基于動態代理和字節碼操作的。不了解動態代理和字節碼操作…
閱讀更多...
【C語言】函數遞歸詳解（一）

【C語言】函數遞歸詳解（一）

目錄 1.什么是遞歸&#xff1a; 1.1遞歸的思想&#xff1a; 1.2遞歸的限制條件&#xff1a; 2.遞歸舉例&#xff1a; 2.1舉例1&#xff1a;求n的階乘&#xff1a; 2.1.1 分析和代碼實現&#xff1a; 2.1.2圖示遞歸過程&#xff1a; 2.2舉例2&#xff1a;順序打印一個整數的…
閱讀更多...
機器學習---集成學習的初步理解

機器學習---集成學習的初步理解

1. 集成學習 集成學習(ensemble learning)是現在非常火爆的機器學習方法。它本身不是一個單獨的機器學 習算法&#xff0c;而是通過構建并結合多個機器學習器來完成學習任務。也就是我們常說的“博采眾長”。集 成學習可以用于分類問題集成&#xff0c;回歸問題集成&#xff…
閱讀更多...
多線程并發Ping腳本

多線程并發Ping腳本

1. 前言 最近需要ping地址&#xff0c;還是挺多的&#xff0c;就使用python搞一個ping腳本&#xff0c;記錄一下&#xff0c;以免丟失了。 2. 腳本介紹 首先檢查是否存在True.txt或False.txt文件&#xff0c;并在用戶確認后進行刪除&#xff0c;然后從IP.txt的文件中讀取IP地…
閱讀更多...
CSS——sticky定位

CSS——sticky定位

1. 大白話解釋sticky定位 粘性定位通俗來說&#xff0c;它就是相對定位relative和固定定位fixed的結合體&#xff0c;它的觸發過程分為三個階段 在最近可滾動容器沒有觸發滑動之前&#xff0c;sticky盒子的表現為相對定位relative【第一階段】&#xff0c; 但當最近可滾動容…
閱讀更多...
【MATLAB】tvfEMD信號分解+FFT+HHT組合算法

【MATLAB】tvfEMD信號分解+FFT+HHT組合算法

有意向獲取代碼&#xff0c;請轉文末觀看代碼獲取方式~也可轉原文鏈接獲取~ 1 基本定義 TVFEMDFFTHHT組合算法是一種結合了總體變分模態分解&#xff08;TVFEMD&#xff09;、傅里葉變換&#xff08;FFT&#xff09;和希爾伯特-黃變換&#xff08;HHT&#xff09;的信號分解方…
閱讀更多...
vivado時序方法檢查8

vivado時序方法檢查8

TIMING-30 &#xff1a; 生成時鐘所選主源管腳欠佳 生成時鐘 <clock_name> 所選的主源管腳欠佳 &#xff0c; 時序可能處于消極狀態。 描述 雖然 create_generated_clock 命令允許您指定任意參考時鐘 &#xff0c; 但是生成時鐘應引用在其直接扇入中傳輸的時鐘。此…
閱讀更多...
電子學會C/C++編程等級考試2021年06月（五級）真題解析

電子學會C/C++編程等級考試2021年06月（五級）真題解析

C/C++等級考試（1~8級）全部真題?點這里 第1題：數字變換 給定一個包含5個數字(0-9)的字符串，例如 “02943”，請將“12345”變換到它。 你可以采取3種操作進行變換 1. 交換相鄰的兩個數字 2. 將一個數字加1。如果加1后大于9，則變為0 3. 將一個數字加倍。如果加倍后大于…
閱讀更多...
JS--異步的日常用法

JS--異步的日常用法

目錄 JS 異步編程并發&#xff08;concurrency&#xff09;和并行&#xff08;parallelism&#xff09;區別回調函數&#xff08;Callback&#xff09;GeneratorPromiseasync 及 await常用定時器函數 JS 異步編程 并發&#xff08;concurrency&#xff09;和并行&#xff08;p…
閱讀更多...
Python中一些有趣的例題

Python中一些有趣的例題

下面會寫一些基礎的例題&#xff0c;有興趣的自己也可以練練手&#xff01; 1.假設手機短信收到的數字驗證碼為“278902”&#xff0c;編寫一個程序&#xff0c;讓用戶輸入數字驗證碼&#xff0c;如果數字驗證碼輸入正確&#xff0c;提示“支付成功”&#xff1b;否則提示“數…
閱讀更多...
Python configparser 模塊：優雅處理配置文件的得力工具

Python configparser 模塊：優雅處理配置文件的得力工具

更多資料獲取 &#x1f4da; 個人網站&#xff1a;ipengtao.com 配置文件在軟件開發中扮演著重要的角色&#xff0c;而Python中的 configparser 模塊提供了一種優雅而靈活的方式來處理各種配置需求。本文將深入介紹 configparser 模塊的各個方面&#xff0c;通過豐富的示例代碼…
閱讀更多...
最新文章

Copyright @ 2022~2023