Resumen de los puntos de conocimiento práctico del proyecto Shangpinhui VUE

Vue sigue siendo un proyecto de Silicon Valley

El proceso de implementación de un componente de módulo:
1. Almacenar datos en vuex
2. Escribir páginas estáticas
3. Dividir componentes
4. Obtener datos del servidor
5. Mostrar datos
6. Desarrollar servicios dinámicos

1. Directorio de andamios

• Público: generalmente coloca recursos estáticos (imágenes)
• Src: archivo de código del programador
• Activos: los recursos en la carpeta se empaquetarán en un módulo por webpack y se colocarán en la carpeta js
• componentes: generalmente coloca componentes que no son de enrutamiento (o componentes compartidos por proyectos)
• Páginas: poner componentes de enrutamiento
• App.vue es el único componente raíz
• archivo de entrada main.js [el archivo que el programa ejecuta primero]
• babel.config.js: archivo de configuración de babel
• package.json: vea la descripción del proyecto, las dependencias del proyecto y las instrucciones de operación del proyecto
• README.md: archivo de descripción del proyecto

2. Configuración del alias de la carpeta src

La ventaja de configurar el alias de la carpeta src es que será más fácil encontrar el archivo
Crear un archivo jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

3. Configuración de componentes de enrutamiento

a. La diferencia entre el frente y el fondo:
Para el fondo:
K es la dirección URL (localizador de recursos de red)
V es el middleware correspondiente
http://localhost:8080/0607

app.get("/0607",(res,req)=>{
   res.send('我是祖国的老花骨朵');
});

Enrutamiento front-end:
K es la URL (localizador de recursos de red)
y V es el componente de enrutamiento correspondiente

b. Página frontal de bolsa de productos básicos: el núcleo de la página SPA

• Componentes de enrutamiento: generalmente fijos allí (Inicio, Búsqueda, Inicio de sesión)
  • 1. Cree un componente de enrutamiento [generalmente ubicado en la carpeta vistas|páginas]
  • 2. Configure el enrutamiento, configure los cuatro componentes de enrutamiento en la carpeta del enrutador

// 配置路由的地方
import Vue from 'vue'
import VueRouter from 'vue-router'

// 使用路由插件
Vue.use(VueRouter)

// 引入路由组建
import Home from '@/pages/Home'
import Login from '../pages/Login'

// 配置路由
export default new VueRouter({
    // 配置路由
    routes:[
        {
            path:"/home",
            component:Home,
            meta:{
                show:true
            }
        },

• Componentes sin enrutamiento: cambiar de página ((Encabezado, Pie de página) (en la carpeta de componentes)
  • 1. Componentes globales (registro global en la página principal)
    - ¿Cuál es la función del atributo de nombre del componente?
    1. El nombre del componente se puede ver en la herramienta del desarrollador
    2. Al registrar un componente global, el nombre del componente correspondiente el componente se puede obtener a través de la instancia del componente
  • 2. Componentes no globales
  • El uso de componentes que no son de enrutamiento se divide en varios pasos:
    - Paso 1: Definición
    - Paso 2: Introducción
    - Paso 3: Registro
    - Paso 4: Uso

c. Construcción de la estructura del componente de enrutamiento:

• 1. Estructura + estilo + recursos de imagen
• 2. Coloque la etiqueta del componente correspondiente en la posición correspondiente

D. Salto de enrutamiento

• Hay dos formas de saltos de enrutamiento: navegación declarativa (enlace de enrutador: debe tener que atribuir)
  navegación programática push||replace
• La navegación programática es mejor: porque puede escribir su propia lógica comercial
• $router: salto de enrutamiento para navegación programática
  • este. $enrutador.\_\_\_empujarsuh|estehola.\_\_$enrutador.reemplazar
  • $ruta: Puede obtener información de enrutamiento|parámetros
  • esta.$ruta.camino
  • this.$route.params|consulta
  • esto.$ruta.meta

E. Parámetros de enrutamiento

• parámetro params: la ruta debe ocupar un lugar y el programa colapsará, ¿cuál es parte de la palabra clave URL?
• Parámetro de consulta: la ruta no necesita ocupar espacio, y el método de escritura es similar al parámetro de consulta en ajax.Pequeños
  problemas:

1) La ruta de navegación programática salta a la ruta actual (los parámetros permanecen sin cambios) y las ejecuciones múltiples arrojarán un error de advertencia de NavigationDuplicated Nota
: Solo la navegación programática (push|replace) tendrá esta excepción, y la navegación declarativa No existe tal problema, porque la navegación declarativa ya ha resuelto este problema internamente.
Esta excepción no tiene efecto en el programa.
Por qué ocurre este fenómeno:
dado que la última versión 3.5.2 de vue-router presenta la promesa, cuando el parámetro se pasa varias veces y se repite, se lanzará una excepción, por lo que ocurre el fenómeno anterior. La primera solución: es para el
empuje Función. Pase la devolución de llamada correcta correspondiente y la devolución de llamada fallida.
La primera solución puede resolver temporalmente el problema actual, pero seguirán ocurriendo fenómenos similares al usar push|replace más tarde, por lo que debemos reescribir (reconfigurar los métodos push y replace)

1:重写push与replace方法
工作的时候想处理掉，不想处理对于你的程序没有任何影响
function push(){
    return new Promise(resolve,reject){

    }
}

Salto y transferencia de parámetros de enrutamiento d+e

1. El primer tipo de navegación declarativa: ¿Por qué hay un retraso al usar el componente de enlace de enrutador?
router-link es un componente: es equivalente a un objeto de instancia de la clase VueComponent Hay muchas instancias (más de 1000) del nuevo VueComponent en un instante
, lo que consume mucha memoria y provoca un bloqueo.
{ { c1. nombre de categoría }}

2. La segunda navegación programática: push|replace

La clasificación de tres niveles utiliza la navegación programática porque se congelará al usar el enlace del enrutador.
Debido a que hay muchas cascadas, obtenidas por el bucle v-for, durante el proceso del bucle, la función de devolución de llamada también se optimizará a su vez
: el principio burbujeante de navegación programática + delegación de eventos vinculará una función de devolución de llamada, y será correspondiente asignado a cada nodo secundario

Cuando el enrutamiento salta [inicio->buscar]: es necesario pasar los parámetros de enrutamiento [nombre de la categoría, id de la primera, segunda y tercera categorías]

this.$router.push()
{
    
    
 name:'search',
 query:{
    
    
    categoryName:'电子书',
    category2Id:4
 }
}

// 三级联动路由跳转和传递参数的业务
    goSearch(event) {
    
    
      // alert(444)
      // 问题1：如何判断点击子节点的是A标签
      // 答：把子节点当中的a标签，加上自定义的属性，其余子节点是没有的（自定义属性：浏览器会将驼峰命名转换为一般的命名）
      // 问题2：如何判断是几级的目录？
      // 答：也是根据自定义属性加上的自身的ID值进行条件判断
      // 问题3：如何获取当前的事件 答：event

      // event.target :获取到的是触发事件的元素（h3,a,dt,dl）
      let node = event.target;
      // 节点有一个属性dataset属性，可以获取自定义属性与属性值 (这里一定要小写，不是给你说了么，浏览器会将自定义属性变为全部小写)
      let {
    
     categoryname, category1id, category2id, category3id } =
        node.dataset;
      console.log(event);
      // 当这个标签是A标签的时候才会进入判断
      if (categoryname) {
    
    
        /*         {
        name:'search',
        query:{
            categoryName:'电子书',
            category2Id:4
        } */
        // 准备路由跳转的参数 设置对象
        let location = {
    
     name: "search" };
        let query = {
    
     categoryname: categoryname };
        // 一级目录
        if (category1id) {
    
    
          query.category1id = category1id;
        } else if (category2id) {
    
    
          query.category2Id = category2id;
        } else {
    
    
          query.category3id = category3id;
        }

        // 路由跳转前要合并参数
        // 1.判断路由中是否有params参数，有则进行合并
        if (this.$route.params) {
    
    
          // 动态的给location添加params属性
          location.params = this.$route.params;
          // 动态的给location添加query属性
          location.query = query;
        }
        this.$router.push(location);
      }
    },

4. Vuex:

En los cursos básicos anteriores, la operación de envío de una solicitud es la siguiente: escribir axios.get||post en el componente montado, obtener los datos y almacenarlos en los datos del componente para su uso

• montada: la plantilla se ha convertido en un DOM real [pero no hay datos, la pantalla está en blanco], porque ajax es asincrónico y lleva tiempo.
• creado: un poco mejor (no es gran cosa)
  ahora:
• vuex: un complemento proporcionado oficialmente por Vue, el complemento puede administrar datos compartidos del proyecto.
• vuex: cuando el proyecto es grande, debe haber un lugar para "unificar los datos de solicitud en el almacén pequeño y administrar los datos" es la tienda del almacén
• Conceptos básicos de Vuex: estado, acciones, mutaciones, captadores, módulos (tres cadenas)
• estado
• comportamiento
• mutaciones
• captadores
• módulos

5. El efecto de fondo de la clasificación de primer nivel

La primera solución: CSS hover es tan simple y cómo funciona
La segunda solución: solución lógica JS 20 episodios Shang Silicon Valley completa el color de fondo dinámico de vinculación de tres niveles

6. Complete la estructura de vinculación de pantalla dinámica 2|3

Al principio, muestre y oculte
el método JS a través de css display: none y display block: :style="{display:currentIndex == index?'block':'none'}" estilo de enlace dinámico

7. Enlace de tres niveles y animación de transición en el módulo de búsqueda.

En el módulo de inicio, se utiliza una función de vinculación de tres niveles---->[typeNav]
En el módulo de búsqueda, también se utiliza una función de vinculación de tres niveles------->[typeNav]

a. ¿Análisis de negocio del componente TypeNav?

• El enlace de tres niveles se muestra normalmente en el módulo de inicio
• La vinculación de tres niveles se muestra durante un tiempo y se oculta durante un tiempo en la búsqueda—solución: controlar la visualización y ocultación de la vinculación de tres niveles a través de un atributo de respuesta B. Pregunta 1
  Problemas
  durante el desarrollo: mostrar y ocultar no deben aparecer debajo el módulo de inicio Efecto
• Ahora, este problema [enlace de tres niveles: el módulo de búsqueda en sí mismo debería tener servicios de visualización y ocultación], pero los servicios de visualización y ocultación no deberían aparecer debajo del módulo de inicio. Para decirlo sin rodeos: debe dejar que el componente de enlace de tres
  niveles saber quién lo está usando.
• Use $route para distinguir en qué módulo se encuentra el componente.
  Cuando trabaje en el futuro, si aparece un determinado componente, debe distinguir en qué módulo se encuentra actualmente [inicio, búsqueda]

c. Solución
1. Agregue v-show al componente TypeNav para el enlace dinámico
2. Establezca el valor inicial de show en el método de datos
3. Distinga a través de la información de enrutamiento de $route

    // 当鼠标移入时，全部商品分类列表进行展示
    enterShow() {
    
    
      if (this.$route.path != "/home") {
    
    
        this.show = true;
      }
    },
    // 当鼠标离开的时候，全部商品类别进行影藏
    leaveShow() {
    
    
      if (this.$route.path != "/home") {
    
    
        this.show = false;
      }

• Cuando la ruta salta, el componente correspondiente será destruido y recreado ---- [kepp-alive]

D. Efecto de transición

• Cuando entré en contacto con él por primera vez: CSS3
• También hay efectos de animación de transición en Vue: los componentes incorporados de transición están completos

 HTML：<transition name="sort"> 相应的节点和组件</transition>
 CSS：// 过渡动画的样式
    // 开始进入状态
    .sort-enter {
    
    
      height: 0;
    }
    // 结束状态
    .sort-enter-to {
    
    
      height: 461px;
    }
    // 定义动画的时间和速率
    .sort-enter-active {
    
    
      transition: all 0.5s linear;
    }

• Nota 1, en Vue, puede agregar efectos de animación de transición a (un cierto nodo) | (un cierto componente)
• El nodo|componente debe tener la instrucción v-if|v-show antes de que pueda usarse.
  e. ¿Optimización del rendimiento del enlace de tres niveles de TypeNav?
  Proyecto: cambiar a inicio para buscar o buscar a inicio, el componente envía con frecuencia solicitudes al servidor para obtener datos de enlace de tres niveles para su visualización.
  Si envía solicitudes con frecuencia al servidor en el proyecto, el rendimiento es muy bueno, por lo que debemos optimizarlo.

¿Por qué con frecuencia envía solicitudes al servidor para obtener los datos del enlace de tres niveles?
Los datos del enlace de tres niveles son un componente global, y se dan saltos en los componentes utilizados, porque cuando la ruta salta, los componentes será destruido [creado del componente de inicio: la acción se envía a vuex, por lo que los datos del enlace de tres niveles se obtienen con frecuencia]
Solo se requiere una solicitud para obtener los datos del enlace de tres niveles, y no hay necesidad de varias veces.
Solución final: Moutend en la aplicación solo se ejecutará una vez.
Aunque main también se ejecuta una vez, no es un componente. Sin esto, los componentes solo tienen la propiedad $store

8. Combinar parámetros

Cuando ingresa a la página de búsqueda, debe pasar varios parámetros para que pueda enviar una solicitud al servidor para obtener los datos correspondientes
1) Combinar parámetros *****
¿Por qué necesita combinar parámetros (consulta | parámetros): Debido a que estos parámetros son útiles para la búsqueda, debido a que la búsqueda
envía una solicitud al servidor a través de estos parámetros, estos parámetros deben llevarse al servidor, el servidor devolverá los datos de búsqueda del usuario correspondiente y la búsqueda puede mostrarlos.

1.1: El negocio de vinculación de tres niveles desarrollado, cuando hace clic en una etiqueta, saltará a la ruta y pasará el nombre del producto y la identificación al módulo de búsqueda ---- (consulta) 1.2: Cuando se hace clic en el botón de búsqueda , el
usuario Las palabras clave ingresadas se pasarán al módulo de búsqueda a través del parámetro params cuando se haga clic en el botón -----(params)
1.3 Salto de enrutamiento (inicio->búsqueda), dos lugares, enlace de tres niveles (typeNav) , Componente de encabezado (botón de búsqueda)

 // 路由跳转前要合并参数
        // 1.判断路由中是否有params参数，有则进行合并
        if (this.$route.params) {
    
    
          // 动态的给location添加params属性
          location.params = this.$route.params;
          // 动态的给location添加query属性
          location.query = query;
        }
        this.$router.push(location);
      }

9. datos simulados

Función : generar datos aleatorios, interceptar solicitud de Ajax:
interceptar solicitud de ajax : solicitud de publicación [el navegador interceptará: pensamiento estúpido, debido al servidor], son solo los datos locales en el proyecto.
Para el proyecto : interfaz real/api/xxxx datos simulados/simulacros/xxxx
datos simulados JSON : sin espacios, es mejor usar un complemento de formato para formatear.
Nota:
los datos simulados (datos simulados) deben usar el módulo mockjs, que puede ayudarnos a simular datos.
mockjs [no mock.js mock-js]
http://mockjs.com/ Dirección oficial
Los datos simulados son generales: object, array
{ 'a|1-10':'I love you' } Pasos para usar:

Paso 1: Instala el paquete de dependencias mockjs

Parte 2: Cree una carpeta debajo de la carpeta src, la carpeta simulada de la carpeta.

Paso 3: Prepare los datos simulados ¡
Coloque las imágenes requeridas para los datos simulados en la carpeta pública! La carpeta pública empaquetará intactos los recursos correspondientes en la carpeta dist.
Por ejemplo: los datos del carrusel en listContainer
[
{id:1,imgUrl:'xxxxxxxxx'},
{id:2,imgUrl:'xxxxxxxxx '},
{id:3,imgUrl:'xxxxxxxxx'},
]
Paso 4: Cree un archivo server.js en la carpeta simulada
Nota: En el archivo server.js, los datos de banner.json||floor.json No están expuestos, pero disponible en el módulo del servidor.
Para algunos módulos en webpack: imágenes y json, no es necesario exponerlos al mundo exterior, ya que están expuestos al mundo exterior de forma predeterminada.

Paso 5: simule los datos a través del módulo simulado

Simular datos a través del método Mock.mock

mock->servers:
// 这里使用mock模拟数据
// 1.引入mock
import Mock from 'mockjs'
// 2.把json数据引入进来  JSON数据不需要暴露
// webpack默认对外暴露：JSON 图片
import banner from './banner.json'
import floor from './floor.json'

// 3.mock数据:第一个请求数据是地址地址一定要写对 第二个参数：请求数据
Mock.mock("/mock/banner",{
    
    code:200,data:banner}) //模拟首页轮播图的数据
Mock.mock("/mock/floor",{
    
    code:200,data:floor})

Paso 6: Vuelva al archivo principal de entrada e importe
los datos requeridos por el simulacro de serve.js | Después de escribir la página de código simulada relevante, debe ejecutar serve.js una vez en el simulacro.
Si no lo ejecuta, es lo mismo que si no lo escribieras tú.

// 引入mockServe.js
import "@/mock/mockServe"

Paso 7: Cree un mockRequest [instancia de axios: baseURL:'/mock'] en la carpeta API
para obtener una instancia de axios para datos simulados.

api->mockAjax(mock对应axios的二次封装)
const requests = axios.create({
    
    
    // create里面可以传配置对象

    // 配置对象
    // 基础路径：baseURL就是给每个请求的路径上自动加上所配置的，就不用自己再去书写
    baseURL: '/mock', //基础路径更改即可
    // 请求超时的时间
    timeout: 5000
})

api->index(// 这个文件进行统一的API管理)
//获取floor的数据/floor后台接口路径
export const reqGetFloor = ()=>mockrequest.get('/floor')

// 获取search的数据   这个函数需要不需要外部传递的参数？要给服务器带参进行params给服务器传递参数 调这个函数得有相应的参数     错错错需要接收home页传递过来的params数据和query数据/api/list
// 当前这个接口。给服务器发请求的时候，至少得是一个空对象
export const reqGetSearchInfo = (params)=>requests({
    
    

Al desarrollar un proyecto: recuerde, prueba unitaria, cuando se complete una determinada función, asegúrese de probar si está bien

10. ¿Cuál es el uso básico de swiper?

La escena comúnmente usada es el carrusel----[carrusel: carrusel], que se puede usar en la terminal móvil de swiper y también en la terminal de PC.

Pasos para usar Swiper:

• Instalar swiper en el proyecto
• Paso 1: importe el paquete dependiente en el componente correspondiente [swiper.js|swiper.css]
• Paso 2: la estructura en la página estática debe ser completa [contenedor, envoltura, control deslizante] y el nombre de la clase no se puede escribir indiscriminadamente
• (Antes de inicializar la instancia de swiper, debe haber nodos (estructuras) en la página)
• Paso 3: inicialice la instancia de swiper

import Swiper from "swiper"

¡Aviso!

• Muchos componentes del módulo de inicio usan swiper.css, no es necesario introducir estilos una vez en cada componente,
  sino solo una vez en el archivo de entrada.

// 引入swiper样式
import "swiper/css/swiper.css"

1. ¿Dónde inicializar la instancia de swiper?

• Para un componente Vue, montado [el componente está montado: la estructura correspondiente aún no está allí]
  montado–> el componente está montado

2. ¿Por qué no salió el efecto dinámico?

• Swiper necesita obtener el nodo DOM del gráfico de carrusel para agregar efectos dinámicos al carrusel de swiper,
  porque no se obtienen nodos.

3. La primera solución, retardador (no es una solución perfecta)
en creación: ejecución creada y ejecución montada, la diferencia de tiempo puede ser de 2 ms,
actualizada en vano: si el componente tiene muchos (datos) de respuesta, siempre que haya un valor de atributo Si hay un cambio, la actualización se ejecutará nuevamente y la instancia se inicializará nuevamente.

Resumen: La primera solución puede resolver el problema a través de un retardador (asincrónico),
pero esta solución tiene riesgos (es imposible determinar cuánto tardará la solicitud del usuario), por lo que no hay forma de determinar
el tiempo del retardador.

4. Swiper utiliza la solución perfecta en el proyecto Vue

• ¿Dónde está el problema con la primera solución: v-for, el recorrido proviene de Vuex (datos: envíe una solicitud al servidor a través de ajax, hay asíncrono)

• reloj: controle el atributo, el reloj puede detectar el cambio del valor del atributo, cuando el valor del atributo cambia, puede comenzar una vez.

• Los datos del almacén bannerList en Vuex (el componente está en uso):
  ¿Han cambiado los datos del almacén bannerList?
  Debe haber: el valor inicial de bannerList es una matriz vacía, y cuando se devuelven los datos del servidor, el valor del atributo almacenado en su bannerList cambiará [convirtiéndose en los datos devueltos por el servidor] La instancia del componente está utilizando bannerList en el almacén, y el atributo bannerList del
  componente Debe haber habido un cambio, y el reloj puede monitorearlo.
  ¡Pero no está permitido escribir directamente en el reloj!
  Razón: 1. Solo hay datos en este momento, pero el recorrido de v-for también toma tiempo para recorrer la estructura de representación de datos (no hay garantía de que el recorrido de v-for se complete)

组件实例的一个方法:$nextTick + watch
this.$nextTick(()=>{
    
    

})

5. Explicación del sitio web oficial de NextTick:
después de la próxima actualización de DOM, una vez que finaliza el ciclo, se ejecuta la devolución de llamada retrasada. Utilice este método inmediatamente después de modificar los datos para obtener el DOM actualizado.
Función: Puede asegurar que la estructura de la página sea cierta. (El DOM ya existe)
Nota: El método $nextTick de la instancia del componente se usa a menudo en el trabajo y, a menudo, se usa junto con complementos de terceros para obtener nodos DOM actualizados.

11. Desarrollar componentes Floor (comunicación entre componentes)

Desarrollar componentes de piso: los componentes de piso se reutilizan (reutilizar dos veces)

1. El componente Floor obtiene los datos simulados, ¿dónde está escrita la acción para enviar la solicitud?

Respuesta: La acción de envío debe escribirse en la función de ciclo de vida del componente principal cuando se monta el componente, porque el componente principal debe notificar a Vuex para enviar la solicitud, el componente principal obtiene los datos simulados y genera múltiples componentes de piso a través de v-para transversal, logrando así complejo Usado para.
2. El componente principal envía una acción, notifica a Vuex que envíe una solicitud y el componente principal Home obtiene los datos del almacén y atraviesa varios componentes Floor a través de v-for
3.v-for|v-show|v-if |Estas instrucciones se pueden personalizar
4. ¿Por qué inicializar el carrusel de instancias de SWiper en el componente montado del piso?
envía una solicitud para obtener el componente del suelo, cuando se ejecuta el componente montado del padre.
Es posible que la estructura del componente del piso no esté completa, pero la estructura del componente del piso debe completarse después de que regresen los datos del servidor, por lo que v-for está atravesando los datos del servidor. Si los datos del servidor existen, la estructura del piso debe estar completa.
De lo contrario, no verá el componente Floor

12. Componentes globales del carrusel (división de componentes globales, comunicación entre padre e hijo)

Si hay funciones similares en el proyecto y se reutilizan, encapsúlelas como componentes globales----[También es posible sin encapsulación]
Para encapsular el componente carrusel global: Deje que los códigos en los componentes Floor y listContainer sean lo mismo, si son lo mismo, pueden ser completamente independientes Empaquetado como un componente global.
En este momento, el piso y los nuevos componentes globales del carrusel también tienen comunicación entre componentes entre padres e hijos.