Cómo lograr la separación de front-end y back-end en nginx vue.js
1. nginx es un servidor proxy inverso y HTTP de alto rendimiento, que se utiliza a menudo para la gestión de servidores distribuidos.
A menudo se usa para equilibrar la carga (llamando a varios servidores para lograr este propósito).
La salida de recursos estáticos es más rápida y puede lograr una salida de recursos comprimida con gzip (esto también es un paso importante). razón por la cual este artículo lo usa para el acceso a recursos estáticos)
Es adecuado para resolver problemas entre dominios y proxy inverso (porque nadie quiere ver que otros accedan a su propio nombre de dominio) La aparición de dominio nombre y dominio cruzado provocarán ataques CSRF, que es la segunda razón para usarlo en este artículo)
Ocupa menos memoria y solo tarda unos segundos en iniciarse. Puede cambiar rápidamente de nodo. Evite el tiempo de inactividad.
2.es6 es la sexta versión de ECMAScript. Si desea aprender marcos js como vue.js, este es un lenguaje que debe aprender. La dirección de aprendizaje recomendada es la siguiente. .vuejs.org/v2/guide/forms.html)
3. Los siguientes cuatro puntos se refieren a la API del sitio web oficial y no se presentarán nuevamente
4. cómo implementar la capacidad de respuesta (completa el valor primero después de inicializar la página, si hay algún cambio ¿Qué debo hacer si lo modifico?).
5. Aplicación de componentes personalizados y su uso de Render para crear estructura HTML
6. Uso de enrutamiento
7. p >6. Ejemplos prácticos
1.nginx configura recursos estáticos
servidor {
escucha 4000;
nombre_servidor www.test. com ;
charset utf-8;
index /static/index.html; //configurar la página de inicio
// La expresión regular aquí se puede utilizar para interceptar solicitudes de datos dinámicos para resolver problemas entre dominios
location = /sellingJson.html {
proxy_pass: 4000/sellingJson.html')
. then(function(data){
//definir un objeto vue para la representación de plantillas
v =Object.assign(v, new Vue({
el : '.char_contain', //nombre del evento de enlace
datos: {
carbrandList: data.data.carbrandList, //flujo de datos
}< / p>
}));
})
.catch(función(err){
console.log(err);
p>
});
}); Lo anterior es el contenido que he compilado para usted, espero que le sea útil.
Artículos relacionados:
Cómo implementar un efecto de desplazamiento circular intermitente de texto a través de JS
Explicación detallada de las referencias en React (tutorial detallado)
Utilice tween.js para implementar el algoritmo de animación de relleno progresivo