Part12 - NuxtJS服务器端渲染

小鱼儿 2022-11-17 10:22 226阅读 0赞

## 01-服务端渲染技术 ##

![服务端渲染技术][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW55YW8xOTk0_size_16_color_FFFFFF_t_70_pic_center]

## 02-Nuxt.js入门 ##

### 一、安装和运行 ###

在线安装方式：参考：https://zh.nuxtjs.org/docs/2.x/get-started/installation  
我们可以直接解压资料中的 nuxt-app.zip

### 二、页面、导航和路由 ###

#### 1、页面 ####

创建pages目录，在pages目录中创建index.vue

<template>
      <h1>Hello world!</h1>
    </template>

启动项目

npm run dev

访问项目：http://localhost:3000/  
再在pages目录中创建一个about.vue页面用于后面的测试

访问页面：http://localhost:3000/about

#### 2、导航 ####

使用标签可以在程序中的不同页面之间导航，相当于`<a>`标签的作用。一般情况下我们使用连接程序内部的不同的路由地址，使用`<a>`标签连接站外地址。

pages/index.vue

#### 3、自动路由 ####

在vue项目中我们需要创建页面，并为每一个页面配置路由，而Nuxt会根据pages路径中的页面自动生成路由配置。  
基本路由1： /user 指向 pages/user.vue页面

<template>
      <div>
        <h1>用户中心</h1>
      </div>
    </template>
    基本路由2： /lend 指向 pages/lend/index.vue页面
    <template>
      <div>
        <h1>投资产品列表</h1>
        <NuxtLink to="/lend/1">
          产品1
        </NuxtLink>
        <NuxtLink to="/lend/2">
          产品2
        </NuxtLink>  
      </div>
    </template>

动态路由：/lend/1、lend/2 等 指向 pages/lend/\_id.vue页面，并通过 this.$route.params.id 获取动态路径

<template>
      <h1>投资产品 {
       { id }}</h1>
    </template>
    
    <script>
    export default {
      data() {
        return {
          id: null,
        }
      },
    
      created() {
        this.id = this.$route.params.id
      },
    }
    </script>

嵌套路由：如果 pages/user.vue 和 pages/user/index.vue 同时存在，我们可以利用嵌套路由  
pages/user.vue

pages/user/index.vue

<template>
      <h1>用户信息</h1>
    </template>
    pages/user/account.vue
    <template>
      <h1>用户账户</h1>
    </template>

### 三、布局Layout ###

1、默认布局

> 如果想拥有统一的页面风格，例如：一致的页头和页尾，可以使用Layout，布局文件的默认的名字是default.vue，放在layouts目录中

`注意：新创建的layout重启前端服务器后应用`

layouts/default.vue

<template>
      <div>
        <Nuxt />
        <div>default footer</div>
      </div>
    </template>

2、自定义布局  
也可以自定义Layout：layouts/my.vue

<template>
      <div>
        <Nuxt />
        <div>my footer</div>
      </div>
    </template>

在page中使用layout属性指定布局文件：pages/user.vue

3、重启服务测试

### 四、配置文件 ###

#### 1、Meta Tags and SEO ####

我们可以在nuxt.config.js中配置如下内容，Nuxt会自动生成网站的标签，这也是搜索引擎优化的一个必要手段。

module.exports = {
      head: {
        title: '尚融宝',
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          {
            hid: 'meta-key-words',
            name: 'keywords',
            content:
              '尚融宝官网_纽交所上市企业，网络借贷平台，解决个人小额借款、短期借款问题。 资金银行存管，安全保障。',
          },
          {
            hid: 'description',
            name: 'description',
            content:
              '尚融宝官网_纽交所上市企业，网络借贷平台，解决个人小额借款、短期借款问题。 资金银行存管，安全保障。',
          },
        ],
        link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
      },
    }

注意：/favicon.ico 放在 static 目录下

#### 2、样式 ####

step1：创建 assets/css/main.css

body {
      background-color: pink;
    }

step2：在nuxt.config.js中配置样式（和head同级别）

css: [
        // CSS file in the project
        '~/assets/css/main.css',
    ],

3、端口号  
在nuxt.config.js中配置

server: {
        port: 3001, // default: 3000
    },

## 整合axios ##

我们可以引入Nuxt中封装的axios组件，功能更多，编程更简单  
参考：https://axios.nuxtjs.org/

#### 1、配置 ####

nuxt.config.js

module.exports = {
      modules: [
        '@nuxtjs/axios', //引入axios模块
      ]
    }

#### 2、客户端渲染 ####

在pages/index.vue中添加如下代码

template中显示ip  
`{ { ip }}`

#### 3、服务器端渲染 ####

asyncData({ $axios }) {
        console.log('asyncData')
        $axios.$get('http://icanhazip.com').then((response) => {
            console.log('asyncData', response)
        })
        return {
            ip: response,  //这种写法的问题是：前面的远程调用是异步的，无法在这获取到response
        }
    },

可以将异步调用改为同步调用，可以使用async 和 await关键字使远程调用变为同步，同时让程序更简洁

async asyncData({ $axios }) {
        console.log('asyncData')
        let response = await $axios.$get('http://icanhazip.com')
        return {
            message1: response,
        }
    },

#### 4、axios全局选项 ####

在nuxt.config.js中添加如下配置

axios: {
        // Axios options here
        baseURL: 'http://icanhazip.com',
    },

asyncData中直接写相对路径  
`let response = await $axios.$get('/')`

#### 5、拦截器 ####

创建拦截器插件 plugins/axios.js

export default function({ $axios, redirect }) {
      $axios.onRequest((config) => {
        console.log('Making request to ' + config.url)
      })
    
      $axios.onResponse((response) => {
        console.log('Making resposne')
        return response
      })
    
      $axios.onError((error) => {
        console.log(error) // for debug
      })
    }

nuxt.config.js中配置插件

plugins: [
        '~/plugins/axios'
    ]

#### 6、`$axios.$get和$axios.get` ####

`注意以下$axios访问data的快捷方式问题：`  
参考地址 [https://axios.nuxtjs.org/usage][https_axios.nuxtjs.org_usage]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW55YW8xOTk0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/4960e919bc1947eb94ea19adf16444ed.png
[https_axios.nuxtjs.org_usage]: https://axios.nuxtjs.org/usage