前端—Nuxt

简介

1、服务渲染

服务端渲染技术NUXT，即数据的操作过程在服务端实现，客户端只负责做显示，利于 SEO

服务端渲染又称 SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。即原来是客户端发送 ajax请求，然后服务端得到数据，返回并做渲染，即异步，但异步不利于做 SEO，当爬虫抓取的时候，抓取工具并不会等待异步完成后再进行页面内容的抓取，又因为是异步，所以内容可能还没有渲染成功，会造成网站排名靠后。

服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

2、nuxt

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

3、下载使用

3.1、下载

https://github.com/nuxt-community/starter-template/archive/master.zip

3.2、使用

1. 解压出来，然后在前端项目文件夹下面新建文件夹，然后将压缩后的 template文件夹下的所有内容放进新建的文件夹
2. 打开项目，找到这个文件夹下的 package.json文件，修改 name、description、author
3. 找到 nuxt.config.js，修改 title、meta->content
4. 右键该 nuxt项目->在集成终端中打开，输入 npm install
5. 再下载一个 element-ui， npm install element-ui
6. 在 plugins文件夹下创建 myPlugin.js文件，并加入内容，用于引用 element-ui

import Vue from 'vue'
//element-ui的全部组件
import ElementUI from 'element-ui'
//element-ui的css
import 'element-ui/lib/theme-chalk/index.css'
//使用elementUI
Vue.use(ElementUI)

1. 在 nuxt.config.js的 build{}的下面加入内容

plugins: [
  { src: '~/plugins/myPlugin.js', ssr: false }
]

1. 测试运行，npm run dev，访问项目：http://localhost:3000/

4、nuxt的目录结构

• .nuxt：相关的编译后文件
• assets：放一些静态资源，比如：css、js、图片
• components：vue支持的相关组件
• middleware、static、store：放相关的静态资源
• plugins：放依赖的插件

4.1、layouts

页面布局，比如上部固定样式，下部固定样式等，中间的内容引用 pages的页面

4.2、pages

页面内容

5、封装 axios

1. 下载 axios，npm install axios
2. 在 nuxt项目下新建文件夹 utils
3. 在 utils中新建文件 request.js，并加入内容

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
    baseURL: 'http://localhost',
    timeout: 15000 // 请求超时时间
})
// http request 拦截器
service.interceptors.request.use(
    config => {
        // token 先不处理，后续使用时在完善
        return config
    },
    err => {
        return Promise.reject(err)
    })
​
    // http response 拦截器
service.interceptors.response.use(
    response => {
        if (response.data.code !== 200) {
            Message({
                message: response.data.message,
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject(response.data)
        } else {
            return response.data
        }
    },
    error => {
        return Promise.reject(error.response)
    })
export default service

nuxt技术点

1、nuxt的路由跳转

nuxt有两种路由跳转方式：固定路由、动态路由

1.1、固定路由

是什么路径，就跳转到什么页面，即路径对应固定的页面，

会默认寻找 pages文件夹下的对应文件夹的默认文件(index.vue)

//找到 pages/hospital/index.vue页面
window.location.href = '/hospital'

1.2、动态路由

在路径中添加参数，不同的参数会显示不同的内容

会寻找 pages文件夹下对应文件夹的 参数名称.vue，即有一个命名规范：参数名称.vue

动态路由相当于 vue那样的 router/index.js的情况，但 nuxt中没有 router/index.js，所以可用动态路由来路径传参

//找到 pages/hospital/_hoscode.vue页面
window.location.href = '/hospital/' + hoscode

2、监听全局事件

页面 B想调用页面 A的方法

2.1、A引入 Vue

import Vue from 'vue'

2.2、A添加 mounted方法

即页面渲染之后执行的方法

mounted() {
  // 注册全局登录事件对象
  window.loginEvent = new Vue();
  // 监听登录事件
  loginEvent.$on('loginDialogEvent', function () {
      document.getElementById("loginDialog").click();
  })
}

2.3、B添加 js-cookie

import cookie from 'js-cookie'

2.4、B调用方法

schedule(depcode) {
  // 登录判断
  let token = cookie.get('token')
  if (!token) {
    loginEvent.$emit('loginDialogEvent')
    return
  }
  window.location.href = '/hospital/schedule?hoscode=' + this.hospital.hoscode + "&depcode="+ depcode
},

简单使用

1、实例1

1.1、实现首页

1.1.1、添加静态资源

将 css、images放入 assets文件夹下

1.1.2、修改 layouts/default.vue

<template>
  <div class="app-container">
    <div id="main">
      <!-- 公共头 -->
      <myheader />
      <div class="main-container">
        <el-scrollbar class="page-component__scroll">
          <!-- 内容区域 -->
          <nuxt />
        </el-scrollbar>
      </div>
      <!-- 公共底 -->
      <myfooter />
    </div>
  </div>
</template>
​
<script>
import "~/assets/css/app.css"
import "~/assets/css/chunk.css"
import "~/assets/css/iconfont.css"
import "~/assets/css/main.css"
export default {}
</script>

1.1.3、提取头文件

创建 layouts/myheader.vue文件

<template>
    <div class="header-container">
        <div class="wrapper">
            <!-- logo -->
            <div class="left-wrapper v-link selected">
                <img style="width: 50px" width="50" height="50" src="~assets/images/logo.png">
                <span class="text">互联网医院平台</span>
            </div>
​
            <!-- 搜索框 -->
            <div class="search-wrapper">
                <div class="hospital-search animation-show">
                    <el-autocomplete class="search-input small" prefix-icon="el-icon-search"
                        v-model="state" :fetch-suggestions="querySearchAsync"
                        placeholder="点击输入医院名称" @select="handleSelect">
                        <span slot="suffix" class="search-btn v-link highlight clickable selected">搜索 </span>
                    </el-autocomplete>
                </div>
            </div>
​
            <!-- 右侧 -->
            <div class="right-wrapper">
            <span class="v-link clickable">帮助中心</span>
            <!--        <el-dropdown >-->
            <!--              <span class="el-dropdown-link">-->
            <!--                晴天<i class="el-icon-arrow-down el-icon--right"></i>-->
            <!--              </span>-->
            <!--            <el-dropdown-menu class="user-name-wrapper" slot="dropdown">-->
            <!--                <el-dropdown-item>挂号订单</el-dropdown-item>-->
            <!--                <el-dropdown-item>就诊人管理</el-dropdown-item>-->
            <!--                <el-dropdown-item divided>退出登录</el-dropdown-item>-->
            <!--            </el-dropdown-menu>-->
            <!--        </el-dropdown>-->
            <span class="v-link clickable" @click="dialogUserFormVisible = true">登录/注册</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {}
</script>

1.1.4、提取尾文件

创建 layouts/myfooter.vue文件

<template>
    <div class="footer-container">
        <div class="wrapper">
            <div>
                <span class="record">京ICP备13018369号</span>
                <span class="phone">电话挂号010-56253825</span>
            </div>
​
            <div class="right">
                <span class="v-link clickable"> 联系我们 </span>
                <span class="v-link clickable"> 合作伙伴 </span>
                <span class="v-link clickable"> 用户协议 </span>
                <span class="v-link clickable"> 隐私协议 </span>
            </div>
        </div>
    </div>
</template>
​
<script>
export default {}
</script>

1.1.5、默认布局引入头尾文件

修改 layouts/default.vue文件，将两个页面作为组件引入进去，使得页面中可用标签进行使用

<script>
import "~/assets/css/app.css"
import "~/assets/css/chunk.css"
import "~/assets/css/iconfont.css"
import "~/assets/css/main.css"
​
import myheader from './myheader'
import myfooter from './myfooter'
​
export default {
  components: {
    myheader,myfooter
  }
}
</script>

1.1.6、修改首页

修改 pages/inde.vue文件，然后重启即可

​

1.2、开发过程

1.2.1、创建 api文件

创建 js文件，用于引用对应 controller的接口方法

import request from '@/utils/request'
​
const api_name = `/admin/cmn/dict`
​
export default {
    //根据 dictCode获取子节点
    findByDictCode(dictCode){
        return request({
            url: `${api_name}/findByDictCode/${dictCode}`,
            method: 'get'
        })
    },
}

1.2.2、修改 index.vue

在里面定义方法和组件，最后进行首页展示，主要是服务端的异步渲染

export default {
  //服务端渲染异步，显示医院列表
  //很多代码做了封装，不需要去 data中定义数据，可直接在 return 中定义
  //params用于得到路径中的数据，error用于得到异常信息
  asyncData({ params, error }) {
    //调用
    return hospital.findByConditionWithPage(1,10,null)
      .then(response => {
        return {
          hospitalList: response.data.content,
          totalPages: response.data.totalPages
        }
      })
  },
}