学什么

学习如何开发一个旅游，出行综合应用类网站，包含发布旅游攻略游记，查找酒店，订飞机票业务模块。

技术亮点：

Nuxtjs框架应用，基于Vue的服务器渲染技术（SSR）
Nuxtjs结合Element-ui框架使用
Nuxtjs(SSR)中使用富文本编辑
灵活应用本地数据存储实现交互 vuex
盖楼式跟帖模块，如何应用组件递归
高德地图实现定位
前端生成付款二维码
一个应用，能学习到3种流行的业务类型

技术栈

Nuxtjs
Vue
Vue-router
Element-ui
Axios
Token
Vuex
高德地图

课程安排

8天带着写机票模块
6 天分组实战

学习前提

HTML
CSS
Javascript
Vue基础

课程目标

掌握Nuxtjs开发服务器端渲染应用（简称SSR）
掌握Nuxtjs结合Element-ui框架的使用
掌握组件化、模块化的构建方式 (黑马头条已经做过)
掌握递归组件的使用(黑马头条已经做过)
掌握在Nuxtjs中使用富文本编辑 (服务端渲染,跟之前的做法有点不一样)
掌握高德地图的基本使用
了解常见的互联网业务功能实现 (老板怎么赚钱的, 团队如何协作)

nuxt/ssr 简介

ssr 是 vue 的服务端渲染技术

nuxt 是一个可以用来做 ssr 服务端渲染开发的框架

他们之间的关系, ssr 是技术基础, nuxt 是封装

什么是 ssr

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。全部的操作都是在客户端运行. 在这种情况下, 生命周期 mounted 之前 ,看不到任何东西的, 或者如果我们的客户端瑞浏览器,禁用了js功能的话, 就会一片空白

然而，vuejs 也可以将同一个vue组件在服务器端直接就渲染为 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JFOxtLKY-1604683092122)(02-项目介绍.assets/image-20200709115544680.png)]

ssr 的基本用法

渲染一个 Vue 实例

npm init
npm i vue

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
    
    
  template: `<div>Hello World</div>`
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
    
    
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {
    
    
  console.log(html)
}).catch(err => {
    
    
  console.error(err)
})

与服务器集成

在 Node.js 服务器中使用时相当简单直接，例如 Express：

npm install express --save

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
    
    
  const app = new Vue({
    
    
    data: {
    
    
      url: req.url
    },
    template: `<div>Url is: {
     
     { url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    
    
    if (err) {
    
    
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${
      
      html}</body>
      </html>
    `)
  })
})

server.listen(8080)

小结

server side render

以前的 vue 项目,服务器只管给客户端传输空白 html 和 js

实际上所有显示的东西都是在浏览器进行解释, 如果浏览器禁用 js ,一片空白 渲染在客户端

ssr 服务端直接把 vue 组件变成了 html字符串再发送给浏览器

即使浏览器禁用 js, 还能看见内容 渲染在服务器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pM3atu9i-1604683092129)(02-项目介绍.assets/image-20200229113852879.png)]

ssr 的基本套路

在服务端创建 vue 实例
将这个 vue 实例在服务器渲染成字符串
将字符串传输到客户端到了客户端已经是html字符串了

为什么/要不要使用服务器端渲染 (SSR)？

与传统 SPA (单页应用程序 (Single-Page Application)) 相比，服务器端渲染 (SSR) 的优势主要在于：

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，你的用户将会更快速地看到完整渲染的页面。

使用服务器端渲染 (SSR) 时还需要有一些权衡之处：

开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。
涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。
更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。

在对你的应用程序使用服务器端渲染 (SSR) 之前，你应该问的第一个问题是，是否真的需要它。这主要取决于内容到达时间 (time-to-content) 对应用程序的重要程度。例如，如果你正在构建一个内部仪表盘，初始加载时的额外几百毫秒并不重要，这种情况下去使用服务器端渲染 (SSR) 将是一个小题大作之举。然而，内容到达时间 (time-to-content) 要求是绝对关键的指标，在这种情况下，服务器端渲染 (SSR) 可以帮助你实现最佳的初始加载性能。

闲云旅游day01-项目介绍

学什么

技术栈