Que aprender

Aprenda a desarrollar un sitio web de aplicación integral para el turismo y los viajes, incluidos módulos comerciales para publicar guías de viaje, buscar hoteles y reservar boletos de avión.

Aspectos técnicos destacados:

NuxtjsAplicación de marco, basada Vueen tecnología de renderizado de servidor ( SSR)
NuxtjsElement-uiUtilizado junto con el marco
Nuxtjs(SSR) usando edición de texto enriquecido
Aplicación flexible de almacenamiento de datos local para lograr vuex interactivo
Cómo aplicar la recursividad de componentes al módulo de narración de historias
El mapa de Gaode se da cuenta del posicionamiento
Generación de front-end de código QR de pago
Una aplicación puede aprender 3 tipos de negocios populares

Pila de tecnología

Nuxtjs
Vista
Vue-enrutador
Elemento-ui
Axios
Simbólico
Vuex
Mapa de Gaode

horario de clase

8 días con el módulo de redacción de tickets
6 días de combate grupal

Premisa de aprendizaje

HTML
CSS
Javascript
Conceptos básicos de Vue

Objetivos del Curso

Domine Nuxtjs para desarrollar aplicaciones de renderizado del lado del servidor (SSR para abreviar)
Domina el uso de Nuxtjs combinado con el framework Element-ui
Domina el método de construcción modular y en componentes (el titular del caballo oscuro ya lo ha hecho)
Domine el uso de componentes recursivos (los titulares de los caballos oscuros ya se han hecho)
Domine el uso de la edición de texto enriquecido en Nuxtjs (la representación del lado del servidor es un poco diferente del enfoque anterior)
Domina el uso básico de los mapas de Gaode
Comprender la 业务realización de funciones comunes de Internet .(老板怎么赚钱的, 团队如何协作)

Introducción a nuxt / ssr

ssr es la tecnología de renderización del lado del servidor de vue

Nuxt es un marco que se puede utilizar para el desarrollo de renderizado del lado del servidor ssr

La relación entre ellos, ssr es la base técnica, nuxt es el paquete

Que es ssr

Vue.js es un marco para crear aplicaciones cliente. De forma predeterminada, los componentes de Vue se pueden generar en el navegador para generar DOM y manipular DOM. Todas las operaciones se ejecutan en el cliente. En este caso, antes de que se monte el ciclo de vida, no se puede ver nada, o si nuestro navegador cliente Rui deshabilita la función js, estará en blanco

Sin embargo, vuejs también puede representar el mismo componente vue directamente como cadenas HTML en el lado del servidor, enviarlas directamente al navegador y finalmente "activar" estas etiquetas estáticas como una aplicación totalmente interactiva en el cliente.

[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo de enlace anti-sanguijuela. Se recomienda guardar la imagen y subirla directamente (img-JFOxtLKY-1604683092122) (02-Project Introduction.assets / image-20200709115544680.png )]

Uso básico de ssr

Renderizar una instancia de 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)
})

Integración con el servidor

Es bastante simple y directo de usar en el servidor Node.js, como 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)

resumen

render del lado del servidor

En el proyecto vue anterior, el servidor solo transmite html y js en blanco al cliente

De hecho, todo lo que se muestra se explica en el navegador, si el navegador está deshabilitado, js, cliente de renderizado en blanco

El servidor ssr convierte directamente el componente vue en una cadena html y la envía al navegador.

Incluso si el navegador está deshabilitado js, puede ver el servidor de procesamiento de contenido

[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo de enlace anti-sanguijuela. Se recomienda guardar la imagen y subirla directamente (img-pM3atu9i-1604683092129) (02-Project Introduction.assets / image-20200229113852879.png )]

La rutina básica de ssr

Crea una instancia de vue en el servidor
Renderiza esta instancia de vue en una cadena en el servidor
La cadena se transmite al cliente para que el cliente ya es una cadena html

¿Por qué / debería utilizar la representación del lado del servidor (SSR)?

En comparación con la SPA (aplicación de una sola página) tradicional, las principales ventajas de la representación del lado del servidor (SSR) son:

Mejor SEO, porque el rastreador del motor de búsqueda puede ver directamente la página completamente renderizada.
Tiempo de llegada de contenido más rápido (tiempo de contenido), especialmente para condiciones de red lentas o dispositivos lentos. No es necesario esperar a que se descargue y ejecute todo JavaScript, sus usuarios verán la página completamente renderizada más rápido.

Existen algunas compensaciones cuando se utiliza la representación del lado del servidor (SSR):

Limitado por las condiciones de desarrollo. El código específico del navegador solo se puede usar en ciertos enlaces del ciclo de vida; algunas bibliotecas externas pueden requerir un procesamiento especial antes de que se puedan ejecutar en aplicaciones de procesamiento de servidor.
Más requisitos relacionados con la instalación y la implementación de la compilación. A diferencia de una aplicación de página única (SPA) completamente estática que se puede implementar en cualquier servidor de archivos estáticos, la aplicación de procesamiento del servidor debe estar en el entorno de ejecución del servidor Node.js.
Más carga del lado del servidor. La representación de una aplicación completa en Node.js obviamente consume más recursos de CPU (CPU intensiva, CPU intensiva) que un servidor que solo proporciona archivos estáticos, por lo que si espera usarlo en un entorno de alto tráfico, prepare la carga del servidor correspondiente y utilice sabiamente las estrategias de almacenamiento en caché.

Antes de usar la representación del lado del servidor (SSR) para su aplicación, la primera pregunta que debe hacerse es si realmente la necesita. Esto depende principalmente de la importancia del tiempo de contenido para la aplicación. Por ejemplo, si está creando un tablero interno, los pocos cientos de milisegundos adicionales en la carga inicial no son importantes. En este caso, el uso de la representación del lado del servidor (SSR) será un gran problema. Sin embargo, el requisito de tiempo de contenido es un indicador absolutamente crítico. En este caso, la representación del lado del servidor (SSR) puede ayudarlo a lograr el mejor rendimiento de carga inicial.

Xianyun travel day01-project introducción