Big-Frondend
- Tome
Todo-App como um exemplo para experimentar várias estruturas e bibliotecas na frente e nas extremidades traseiras. - O endereço do servidor é
http://localhost:8080 - As interfaces das extremidades dianteiras e traseiras são:
- Obtenha todos os Todos:
{path: '/api/todo', method: 'GET', status: 200, return: [{action: 'todo1', done: false}] - Adicione novo TODO:
{path: '/api/todo', method: 'POST', status: 201, return: ''} - Complete ou feche o TODO especificado:
{path: '/api/todo/toggle/{index}', method: 'POST', status: 200, return: ''} - Exclua o TODO especificado:
{path: '/api/todo/{index}', method: 'DELETE', status: 200, return: ''}
Back -end concluído
-
{tech: 'spring-boot', tag: 'springboot-backend'}
Frontend da Web concluído
-
{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 da linha de comando concluída
-
{tech: ['react', 'ink'], tag: 'use-ink-cli'}
Um front-end que pode correr de forma independente
-
{tech: 'jquery', tag: 'use-jquery-in-static-web' } -
{tech: 'javascript', tag: 'use-pure-javascript' }
Propósito
- Entender o significado do front-end e back-end
- Entenda as diferenças e conexões de vários front-ends
- Entenda o significado de um grande front-end
- Experimente a estrutura técnica convencional do front-end
Front-end, back-end
- Front-end: projete e implemente a interface sobre a interação humano-computador no sistema
- Linha de comando: Programa de Console. Geralmente é implementado usando idiomas como C, C#e Java. Entrada e saída com comandos e parâmetros, bem como scanf e printf
- Desktop: use vários controles gráficos, como janelas, menus, formulários, etc. para concluir a entrada e saída usando vários dispositivos, como teclados e ratos. As tecnologias comumente usadas incluem MFC, Java Swing, QT, WPF, etc.
- Web (H5): semelhante ao desktop, mas é executado em um navegador. As tecnologias adotadas incluem principalmente HTML5, CSS3 e JavaScript
- Mobile: Usando telefones celulares como operadoras, dispositivos móveis comuns incluem Android e iOS
- Mini Programa: Não é necessário instalar ou implantar, ele é executado em aplicativos como o WeChat e é bastante popular no país. Como mini-programas WeChat, mini-programas QQ, mini-programas de Baidu, mini-programas de Alipay, aplicações rápidas ...
- Back -end: Também conhecido como lado do servidor. Geralmente usado para fornecer dados e serviços.
- Procedimentos comuns de processamento
- Os dados são armazenados no banco de dados
- O servidor recebe solicitações do front end, que geralmente são solicitações HTTP.
- De acordo com a solicitação, a lógica de negócios relevante é chamada e o resultado do cálculo é retornado
- De acordo com o resultado do cálculo, a resposta é retornada, que geralmente é uma resposta HTTP. A resposta pode ter várias representações, como JSON, HTML, etc.
- Tecnologias e estruturas comumente usadas
- Java EE, Asp.net, PHP
- Primavera, Hibernate
- ...
- Características de desenvolvimento de aplicações tradicionais
- A pilha de tecnologia usada no front-end e no back-end não é unificada
- As pilhas de tecnologia usadas por vários front-ends não são unificadas
- Os métodos e idéias de desenvolvimento front-end e back-end
- É difícil ter engenheiros que sejam proficientes na frente e traseiros, ao mesmo tempo
Grande front -end, pilha completa
