granfrontend
- Tomemos a
Todo-App como un ejemplo para experimentar varios marcos y bibliotecas en los extremos delanteros y traseros. - La dirección del servidor es
http://localhost:8080 - Las interfaces de los extremos delanteros y traseros son:
- Obtenga todos los tDos:
{path: '/api/todo', method: 'GET', status: 200, return: [{action: 'todo1', done: false}] - Agregue nuevo TODO:
{path: '/api/todo', method: 'POST', status: 201, return: ''} - Complete o cierre el TODO especificado:
{path: '/api/todo/toggle/{index}', method: 'POST', status: 200, return: ''} - Eliminar el TODO especificado:
{path: '/api/todo/{index}', method: 'DELETE', status: 200, return: ''}
Backend completado
-
{tech: 'spring-boot', tag: 'springboot-backend'}
Frontend web completado
-
{tech: 'vuejs', tag: 'use-vue-frontend' } -
{tech: 'vuejs-vuex', tag: 'use-vuex'} -
{tech: 'react', tag: 'use-react'} -
{tech: ['react', 'redux'], tag: 'use-react-redux'} -
{tech: ['react', 'hooks'], tag: 'use-react-hooks'} -
{tech: 'jquery', tag: 'use-jquery-ajax-to-read/write-from/to-server'} -
{tech: ['react', 'typescript'], tag: 'use-react-typescript'} -
{tech: ['react', 'typescript', 'redux'], tag: 'use-react-typescript-redux'}
Frontend de línea de comando completado
-
{tech: ['react', 'ink'], tag: 'use-ink-cli'}
Un front-end que puede funcionar de forma independiente
-
{tech: 'jquery', tag: 'use-jquery-in-static-web' } -
{tech: 'javascript', tag: 'use-pure-javascript' }
Objetivo
- Comprender el significado de front-end y back-end
- Comprender las diferencias y conexiones de múltiples frontales
- Comprender la importancia de un gran front-end
- Experimente el marco técnico principal del front-end
Front-end, back-end
- Front-end: diseñe e implemente la interfaz sobre la interacción humana-computadora en el sistema
- Línea de comando: programa de consola. Por lo general, se implementa utilizando idiomas como C, C#y Java. Entrada y salida con comandos y parámetros, así como SCANF e printf
- Desktop: use varios controles gráficos como ventanas, menús, formularios, etc. para completar la entrada y la salida utilizando varios dispositivos, como teclados y ratones. Las tecnologías de uso común incluyen MFC, Java Swing, QT, WPF, etc.
- Web (H5): Similar al escritorio, pero se ejecuta en un navegador. Las tecnologías adoptadas incluyen principalmente HTML5, CSS3 y JavaScript
- Móvil: Uso de teléfonos móviles como operadores, los dispositivos móviles comunes incluyen Android e iOS
- Mini Programa: No hay necesidad de instalar o implementar, se ejecuta en aplicaciones como WeChat, y es bastante popular en el país. Tales como Mini-Programas WeChat, Mini-Programas QQ, Mini-Programas Baidu, Mini-Programas Alipay, Aplicaciones rápidas ...
- Backend: también conocido como lado del servidor. Generalmente utilizado para proporcionar datos y servicios.
- Procedimientos de procesamiento comunes
- Los datos se almacenan en la base de datos
- El servidor recibe solicitudes desde el frente, que generalmente son solicitudes HTTP.
- Según la solicitud, se llama la lógica comercial correspondiente y se devuelve el resultado del cálculo
- Según el resultado del cálculo, se devuelve la respuesta, que generalmente es una respuesta HTTP. La respuesta puede tener múltiples representaciones, como JSON, HTML, etc.
- Tecnologías y marcos de uso común
- Java EE, ASP.NET, PHP
- Primavera, hibernado
- ...
- Características de desarrollo de aplicaciones tradicionales
- La pila de tecnología utilizada en el front-end y el back-end no se unifica
- Las pilas de tecnología utilizadas por múltiples front-end no están unificados
- Los métodos e ideas de desarrollo front-end y de fondo no son consistentes
- Es difícil tener ingenieros que sean competentes en los extremos delanteros y traseros al mismo tiempo
Gran extremo frontal, pila completa
