服务端渲染技术NUXT

概述

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

作用：

• 在网页中右键查看源代码，会显示出当前页面的html源代码
• 让数据在页面初始化之前就加载完成

下载解压

nuxt脚手架目录结构

运行工程之后，发现源代码全部显示出来

定义路由

页面的布局形式

在layouts的default.vue页面中定义布局

<template>
  <div>
    <header>
      首页 活动列表
    </header>
    <nuxt/>
    <footer>
      出品
    </footer>
  </div>
</template>

nuxt工程的路由规范

1. 请求地址 /list=在路径/pages/list/index.vue下创建文件
2. 请求地址 / = /pages/index.vue

需求：点击活动列表进入路由为/gathering的视图页面

一、创建文件（定义路由）

二、编写index.vue
略

三、编写布局页面default.vue

<template>
  <div>
    <header>
      <a href="/">首页</a> 
      <a href="/gathering">活动列表</a>
    </header>
    <nuxt/>
    <footer>
      出品
    </footer>
  </div>
</template>

服务器渲染

让数据在页面初始化之前就加载完成
1、asyncData()：服务端渲染
2、获取数据：axios
3、数据模型绑定：return

<template>
    <div>
        活动列表<br>
        <div v-for="(item,index) in items" :key="index">
            {{item.name}}<br>
        </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    asyncData(){
        return axios.get(" http://192.168.200.130:7300/mock/5f44a37b0264a30cc9fbb200/gathering/gathering").then(res => {
            let list = res.data.data
            return {
                items:list
            }
        })
    },
    data(){
        return {

        }
    }
    
}
</script>

<style>

</style>

动态路由

需求：点击活动列表显示活动详情页
url

一、创建目录结构
_id：声明地址参数，参数名为id

二、_id.vue中获取到id
context：上下文对象
context.params：全部的地址参数列表

<template>
    <!-- 
        _id：声明地址参数，参数名为id
     -->
    <div></div>
</template>

<script>
export default {
    //获取地址参数
    //context：上下文对象
    //context.params：全部的地址参数列表
    //活动id = context.params.id
    asyncData(context){
        let id = context.params.id
        console.log(id)
    }
}
</script>

<style>

</style>

补充：项目小技巧

一、如何在nuxt工程中使用css

1、添加静态资源
2、添加script标签，使用import来引入css
注意：~/表示当前项目根路径

<script>
//引入css
import "~/assets/plugins/yui/cssgrids-min.css"
import "~/assets/plugins/yui/cssgrids-min.css" 
import "~/assets/plugins/sui/sui.min.css"  
import "~/assets/plugins/sui/sui-append.min.css" 
import "~/assets/plugins/font-awesome/css/font-awesome.min.css" 
import "~/assets/css/widget-base.css" 
import "~/assets/css/widget-head-foot.css" 


export default {
  
}
</script>

二、<router-link>标签

 <router-link active-class="active" exact tag="li" to="/"><a>头条</a></router-link>
 <router-link active-class="active" tag="li" to="/qa"><a>问答</a></router-link>
 <router-link active-class="active" tag="li" to="/gathering"><a>活动</a></router-link>
 <router-link active-class="active" tag="li" to="/friend"><a>交友</a></router-link>
 <router-link active-class="active" tag="li" to="/spit"><a>吐槽</a></router-link>
 <router-link active-class="active" tag="li" to="/recruit"><a>招聘</a></router-link>

1、tag属性：表示该标签在页面上以哪个标签的形式来展现
2、active-class属性：当该url的路径中包含（模糊查询）to后面的路径时，该class生效
3、exact：使active-class精确查询

三、抽取工具类使用axios
不再用最基本的axios的使用方法

1、创建工具类~/utils/request.js：创建axios实例

//axios请求的工具类
import axios from "axios"

//创建axios实例
const service = axios.create({
    baseURL: 'http://192.168.200.130:7300/mock/5f44a37b0264a30cc9fbb200',
    timeout: 15000,
});

export default service

2、创建api：~/api/gathering.js
写法和elementUI脚手架的写法相同

//活动管理的api
import request from '~/utils/request'

const group_name="gathering"
const api_name="gathering"

export default {
    //获取活动列表
    getList:function(){
        return request({
            url: `/${group_name}/${api_name}`,
            method: 'get',
        })
    },
    //根据条件查询活动列表
    search:function(searchMap){
        return request({
            url: `/${group_name}/${api_name}/search`,
            method: 'post',
            data:searchMap
        })
    },
    //活动分页
    searchPage:function(searchMap,page,size){
        return request({
            url: `/${group_name}/${api_name}/search/${page}/${size}`,
            method: 'post',
            data:searchMap
        })
    },
    //新增活动
    save:function(pojo){
        return request({
            url: `/${group_name}/${api_name}`,
            method: 'post',
            data:pojo
        })
    },
    //根据id查询活动
    findById:function(id){
        return request({
            url: `/${group_name}/${api_name}/${id}`,
            method: 'get'
        })
    },
    //根据id修改
    update:function(id,pojo){
        return request({
            url: `/${group_name}/${api_name}/${id}`,
            method: 'put',
            data:pojo
        })
    },
    saveOrUpdate:function(id,pojo){
        if(id == undefined || id == null || id == ''){
            return this.save(pojo)
        }else{
            return this.update(id,pojo)
        }
    },
    deleteById:function(id){
        return request({
            url: `/${group_name}/${api_name}/${id}`,
            method: 'delete'
        })
    }

}

3、使用

<script>
import gatheringApi from "~/api/gathering"
export default {
    asyncData(){
        // return axios.get(" http://192.168.200.130:7300/mock/5f44a37b0264a30cc9fbb200/gathering/gathering").then(res => {
        //     let list = res.data.data
        //     return {
        //         items:list
        //     }
        // })
        return gatheringApi.searchPage({},1,10).then(res => {
            let list = res.data.data.rows
            return {
                items:list
            }
        })
    },
    data(){
        return {

        }
    }
    
}
</script>

四、通过并行获取数据，加快页面加载速度

<script>
import recruitApi from "~/api/recruit"
import enterpriseApi from "~/api/enterprise"
import "~/assets/css/page-sj-recruit-index.css"
import axios from "axios"
export default {
    asyncData() {
        return axios.all([enterpriseApi.hot(),recruitApi.new(),recruitApi.com()])
            .then(axios.spread(function(res1,res2,res3){
                return {
                    hotEnterprise : res1.data.data,
                    newJob : res2.data.data,
                    comJob : res3.data.data
                }
            }))
    }
}
</script>