Skip to content

Arquitetura MVC no Liquido

Jump to bottom
Leonel Sanches da Silva edited this page Sep 19, 2025 · 2 revisions

Neste artigo, exploraremos a arquitetura MVC (Modelo-Visão-Controlador, ou Model-View-Controller) e como ela é implementada no framework Liquido. A arquitetura MVC é um padrão de design amplamente utilizado no desenvolvimento de aplicações web, que divide a aplicação em três componentes principais: Modelo (Model), Visão (View) e Controlador (Controller). Essa divisão facilita a manutenção, escalabilidade e testabilidade do código.

Estrutura de diretórios

Ao criar um projeto com o Liquido, a estrutura de diretórios é organizada da seguinte forma:

meu-projeto-liquido/
├── estilos/
├── modelos/
├── parciais/
├── publico/
├── rotas/
├── visoes/
├── .ambiente
└── configuracao.delegua
  • estilos/: contém arquivos de estilos FolEs para a apresentação visual de páginas LMHT.
  • modelos/: contém os arquivos que definem os modelos de dados.
  • parciais/: contém componentes reutilizáveis da apresentação que podem ser incluídos em várias visões.
  • publico/: contém arquivos estáticos, como imagens.
  • rotas/: contém os arquivos com extensão .delegua que definem as rotas da aplicação.
  • visoes/: contém os arquivos de apresentação do sistema, normalmente usando LMHT.
  • .ambiente: arquivo de configuração do ambiente, onde são definidas variáveis de ambiente, como chaves secretas.
  • configuracao.delegua: arquivo principal de configuração, onde o roteamento e outras configurações da aplicação são definidas.

Componentes da Arquitetura MVC

Modelo

A camada de Modelo é responsável pela descrição e persistência de dados, definindo as entidades e suas relações. No Liquido, o Modelo é implementado por meio de classes que representam as tabelas do banco de dados e suas propriedades. O framework oferece suporte para operações CLAE (Criar, Ler, Atualizar e Excluir, ou CRUD: Create, Read, Update, Delete em inglês) e facilita a interação com o banco de dados.

Uma entidade de dados, também chamada de Modelo, é uma classe em Delégua cujas propriedades representam porções de dados a serem registradas num banco de dados. Por exemplo, se queremos definir uma entidade de artigos para blogs, podemos fazer da seguinte forma:

classe Artigo {
    id: numero
    titulo: texto
    conteudo: texto
}

Cada propriedade pode ser acrescida de decoradores, que definem comportamentos e validações adicionais. Mais informações sobre esses decoradores podem ser vistas no projeto delegua-entidades.

Visão

A camada de Visão é responsável pela apresentação dos dados ao usuário. No Liquido, visões são geradas através da definição dos modelos de dados, permitindo a inserção, modificação e exclusão dinâmica de dados. O framework suporta a utilização de LMHT e FolEs para a criação das interfaces web. Também é possível utilizar o recurso de Parciais, inspirado no Ruby on Rails, para reutilizar componentes de interface. Veja um exemplo simples de uma Visão em Liquido:

<lmht>
    <cabeça>
        <meta nome="description" conteudo="LMHT" />
        <meta nome="keywords" conteudo="HTML, LMHT, Desenvolvimento, Web" />
        <meta nome="author" conteudo="Leonel Sanches da Silva" />
        <meta nome="viewport" conteudo="width=device-width, initial-scale=1.0" />
        <titulo>Meu blog</titulo>
        
    </cabeça>
    <corpo>
        <artigo>
            <titulo1>Meu primeiro artigo</titulo1>
            <p>Este é meu primeiro artigo.</p>
        </artigo>
    </corpo>
</lmht>

Controlador

O Controlador é responsável por gerenciar a lógica de negócios e a interação entre o Modelo e a Visão. O Liquido utiliza o conceito de Rotas para mapear URLs para redirecionar, processar requisições e retornar respostas. As rotas são funções que recebem dois parâmetros: o objeto de requisição e o objeto de resposta. Veja um exemplo de definição de uma rota no Liquido:

liquido.rotaGet(funcao(requisicao, resposta) { 
  resposta.enviar("Teste com ID. ${requisicao.parametros.id}").status(200) 
})

liquido.rotaGet: define uma rota que responde a requisições GET.

funcao(requisicao, resposta): Define uma função anônima que processa a requisição

resposta.enviar: envia uma resposta ao cliente.

requisicao.parametros.id: acessa o parâmetro id da requisição.

Podemos definir rotas para diferentes métodos HTTP, como GET, POST, PUT, DELETE, etc. Também é possível utilizar LinConEs para interagir com o banco de dados nas rotas. Veja um exemplo de uma rota que cria dois novos clientes:

liquido.rotaGet(funcao(requisicao, resposta) {
    lincones.executar("CRIAR TABELA clientes (ID INTEIRO NAO NULO CHAVE PRIMARIA AUTO INCREMENTO, NOME TEXTO(100) NAO NULO)")
    lincones.executar("INSERIR EM clientes (NOME) VALORES ('Pernalonga')")
    lincones.executar("INSERIR EM clientes (NOME) VALORES ('Patolino')")
    var teste = lincones.executar("SELECIONAR * DE clientes")
    resposta.lmht({"linhas": teste[0].linhasRetornadas}).status(200)
})

Neste exemplo, a rota cria uma tabela clientes, insere dois registros e retorna os dados em formato LMHT. Note que o comando lincones.executar é usado para executar comandos SQL diretamente no banco de dados.

Referências

Clone this wiki locally