使用服务端渲染技术 Nuxt.js框架

服务端渲染

服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据

优势

• 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
  • 如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取
  • 如果 SEO 对你的站点至关重要，而页面又是异步获取内容，则需要服务器端渲染(SSR)解决此问题
• 获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验
  • 对于那些内容到达时间与转化率直接相关的应用程序而言，服务器端渲染(SSR)至关重要

关于Nuxt

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

初始化平台前端

创建yygh-site文件夹作为前台项目目录

下载初始化模板压缩包 https://github.com/nuxt-community/starter-template/archive/master.zip 解压后复制template中的所有内容到yygh-site目录下

修改package.json

将 name、description、author 修改，否则项目无法安装

{
  "name": "yygh-site",
  "version": "1.0.0",
  "description": "在线挂号",
  "author": "stt",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^4.19.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

修改nuxt.config.js

该设置最后会显示在页面标题栏和meta数据中

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'yygh-site',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '在线挂号预约' }
    ],
...

安装项目依赖

在yygh-site目录下打开cmd，输入如下命令

npm install

引入elementUI

下载依赖

npm install element-ui

添加配置js

• 创建plugins/my-plugins.js文件，并添加如下内容

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

在nuxt.config.js中引入plugins/my-plugins.js文件，添加如下 plugins内容

module.exports = {
...
  build: {
...
  },
  plugins: [
    { src: '~/plugins/my-plugins.js', ssr: false }
  ]
}

运行测试

npm run dev

访问http://localhost:3000/

Nuxt的目录结构

资源目录 assets

• 用于组织未编译的静态资源如 LESS、SASS 或 JS

组件目录 components

• 用于组织应用的 Vue.js 组件
• Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

布局目录 layouts

• 用于组织应用的布局组件

页面目录 pages

• 用于组织应用的路由及视图
• Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置

插件目录 plugins

• 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 JS 插件

nuxt.config.js 文件

• nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置
• 覆盖默认配置

引入 axios

安装

npm install axios

创建utils文件夹，utils下创建request.js

import axios from 'axios'
import { Message } from 'element-ui'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:8080',
  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