wjsp
1.0.0
Os aplicativos tradicionais da página JSP não podem usar efetivamente os recursos de sintaxe ES6, e é difícil empacotar e compactar projetos e não pode ser atualizado a quente. Os aplicativos tradicionais de uma página única não podem executar a renderização do lado do servidor em contêineres como o Tomcat para alcançar o efeito do SEO. Este projeto está bem integrado às características dos recursos tradicionais de renderização do lado do servidor JSP e de uma página única, e é muito fácil de usar!
Endereço do código -fonte
Demos e documentação
Se você deseja oferecer suporte ao IE8, precisa downgrade do WebPack, porque o WebPack2+não suporta o IE8 e tenta evitar o uso de bibliotecas que não suportam o IE8, como JQuery2+, Lodash4+, Vue, etc. Boa sorte.
Se você quiser fazer um bom trabalho, primeiro afie suas ferramentas.
Se você gosta de editar JS e CSS, também não há problema em usar o VSCode, mas é recomendável usar a ideia ao escrever JSP e Java.
A seguir, resume os artigos relacionados sobre configuração do ambiente, para referência, endereço de download JDK, configuração de ideias Intellij, ambiente de desenvolvimento de front-end, Intellij Idea Configuration, Java Web Tomcat Environment, Download e instalação do Maven, download do Git Bash e instalação
├── pom.xml // maven配置文件
├── src
| ├── main
| | ├── filters
| | | └── resources // java工程资源配置目录
| | ├── java // java代码目录
| | ├── js // 前端页面工程
| | | ├── build // 编译相关以及webpack相关配置
| | | | ├── build.js
| | | | ├── check-versions.js
| | | | ├── logo.png
| | | | ├── utils.js
| | | | ├── webpack.base.conf.js
| | | | ├── webpack.dev.conf.js
| | | | └── webpack.prod.conf.js
| | | ├── config // 配置相关
| | | | ├── dev.env.js
| | | | ├── index.js
| | | | ├── js-jsp-map.js // 配置入口js和jsp的映射
| | | | └── prod.env.js
| | | ├── package.json // npm配置
| | | ├── src // web项目工程目录
| | | | ├── pages // jsp页面，最终的jsp文件们会按照pages相对路径打包进webapp/WEB-INF/jsp目录下
| | | | | ├── include // 共享的jsp页面，通过jsp:include引入
| | | | | | ├── common_script.jsp
| | | | | | ├── footer.jsp
| | | | | | ├── header.jsp
| | | | | | ├── init.jsp
| | | | | | └── meta.jsp
| | | | | ├── index // 页面1
| | | | | | ├── index.js // 需要在在config/js-jsp-map.js配置与jsp的映射关系，这样编译后的js会加载jsp的body下。一般js与jsp在同一个目录下。
| | | | | | └── index.jsp
| | | | | └── start // 页面2
| | | | | ├── dashboard.css
| | | | | ├── index.js
| | | | | └── index.jsp
| | | | └── my-component.vue 支持VUE
| | | ├── polyfills 兼容相关的代码
| | | | ├── console.js
| | | | ├── index.js
| | | | └── promise.js
| | | ├── static // 存在静态文件，最终这些文件会拷贝到webapp目录下
| | | | ├── favicon.ico
| | | | ├── images
| | | | | ├── jsp.svg
| | | | | └── webpack.svg
| | | | ├── js
| | | | | └── lib
| | | | | └── jquery.min.js
| | | | └── WEB-INF
| | | | ├── tld
| | | | └── web.xml
| | | └── styles
| | └── webapp // 该目录下的文件不用开发人员手动添加修改，在npm run dev或npm run build的时候自动生成。
| └── test
| └── java
A estrutura do diretório no diretório SRC/Main/JS é modificada com base no modelo Webpack do VUE-CLI. Se você criou um projeto usando este modelo, será fácil começar.
cd src/main/js npm run dev
Comece o tomcat na ideia
Aberto http://localhost:8081 em seu navegador
Os seguintes pontos precisam receber atenção para
Pela primeira vez iniciando o projeto, recomenda -se iniciar o TomCat npm run dev primeiro. Depois disso, um deles reiniciará e o outro não precisará ser reiniciado. Por padrão, npm run dev é executado sob a porta 8081, o Tomcat é executado sob a porta 8080. No final, você só precisa acessar a página de 8081 no navegador e a página de 8080 não é necessária. No modo de desenvolvimento, o CSS introduzido pelo JS é introduzido dinamicamente e a página terá um efeito flash. Não se preocupe, não aparecerá no ambiente pós-lançamento. Ao desenvolver páginas JSP, a implantação a quente atrasará. Para obter detalhes, consulte a seção JSP Page para desenvolver arquivos JSP no diretório de páginas e não se desenvolva no diretório WebApp. Caso contrário, depois de mudar para o diretório de páginas para desenvolver ou embalar, o arquivo JSP no WebApp será substituído, resultando no conteúdo modificado perdido. À medida que os arquivos de entrada configurados no js-jsp map.js aumentam, a atualização quente do Webpack-dev-server será muito lenta. Recomenda -se comentar temporariamente alguns arquivos de entrada não utilizados de acordo com as necessidades atuais de desenvolvimento e manter 1 a 3, o que aumentará bastante o tempo de atualização quente.
npm run build
O WebApp é usado como diretório de saída. Os arquivos na estática serão copiados para o diretório de saída. O arquivo JSP no diretório de páginas será copiado para o diretório WebApp/Web-Inf/JSP como um arquivo de modelo. O portal JS associado ao JSP será mesclado, compactado e introduzido no corpo do arquivo JSP. O CSS associado ao JSP será extraído da cabeça do arquivo JSP introduzida por um único arquivo CSS.
Se o contexto do aplicativo do seu aplicativo embalado não for/, por exemplo, /app , ou seja, o endereço de acesso é baseado em http://localhost:8080/app , depois quando a embalagem, lembre -se de configurar/configurar/ publicPath ${pageContext.request.contextPath}/ na página JSP (PagContext.reQuest.ContetPath ${ctx}/ estrutura
O JSP tradicional é desenvolvido no src/main/webapp . Sob esta estrutura do projeto, os arquivos JSP são desenvolvidos em src/main/js/src/pages . Embora o diretório de desenvolvimento seja inconsistente, ele ainda possui todos os recursos do desenvolvimento tradicional do JSP.
<jsp:include page=''></jsp:include> ou <%@include file=""%><c:set> , <c:if> , <c:forEach> etc. Todos podem ser usados<% out.println("hello world"); %>File->Syncronize> Syncronize (tecla de atalho Ctrl+Alt+Y ) e clique no terceiro botão à esquerda das Update classes and resources para atualizar manualmente. Depois de atualizar a página, você pode ver a página mais recente. De fato, quando npm run dev , o JSP no diretório de páginas será usado como o arquivo de modelo para o plug -in HTMLWebPackPlugin. Cada vez que o arquivo em Páginas é modificado, ele será emitido para o diretório relativo em webapp/WEB-INF/jsp . Se você precisar entender os princípios específicos, vá para o capítulo centralAlém das bibliotecas de tags C, FMT e FN padrão, você também pode personalizar a biblioteca de tags.
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %> Observe que o endereço da página JSP deve começar com/web-inf/e o caminho para realmente desenvolver o JSP está no diretório js/src/pages , que faz com que a idéia não resolva o caminho do arquivo TLD no diretório JSP normalmente e não pode ser concluído automaticamente ao usar tags personalizadas. No entanto, ele pode ser executado normalmente, e o processo de desenvolvimento real tem pouco impacto. Se você tiver uma solução melhor, entre em contato conosco.
Como você usa o WebPack como uma ferramenta de embalagem, pode executar facilmente a conversão de sintaxe de JS e CSS e atualmente suporta:
No processo de desenvolvimento de um aplicativo de página única, há um ótimo recurso que é atualizações quentes. Se o arquivo JS for modificado, a página acionará atualizações em tempo real. Sob esta estrutura do projeto, você ainda pode desfrutar da alegria das atualizações quentes. Quando você modifica JS e CSS, a página aciona atualizações em tempo real.
Este projeto já suporta Vue por padrão. Este capítulo também é escrito em Vue, e você pode desfrutar da alegria de codificação trazida por Vue.
Este projeto combina os recursos do WebPack e JSP para implementar aplicativos de várias páginas, o que é legal. Então, como foi alcançado? Aqui falaremos sobre como resolver os problemas mais essenciais dos problemas encontrados na construção do projeto.
Usando o webpack para implementar aplicativos de várias páginas é fácil de associar à configuração de vários portais de entrada, cada entrada corresponde a um HtmlWebpackPlugin . O arquivo JSP é usado como o arquivo de modelo para HtmlWebpackPlugin . Depois que a entrada JS é embalada, ela será inserida no corpo. O projeto também foi construído dessa maneira. Aqui estão alguns pontos para prestar atenção
{ test: /.jsp$/, loader: 'raw-loader' } no webpack. Aqui, raw-loader é usado para cópia de texto sem formatação. Se você possui um carregador mais adequado para o JSP, poderá fornecer a arquivos JSP muitos recursos.config/js-jsp-map.js .O Tomcat é executado sob a porta 8080, o WebPack-Dev-Server é executado sob a porta 8081 e é duas aplicações diferentes. Então não seria necessário escrever a depuração sob o Tomcat para o desenvolvimento e depurar no Webpack-dev-server para o desenvolvimento. Isso não seria muito problemático?
Felizmente, o WebPack-Dev-Server possui um parâmetro proxy. Utilizamos o proxy para reverter todas as solicitações para acessar o WebPack-dev-server a 8080. Isso levará em consideração as funções da renderização do servidor JSP, bem como as funções da conversão de sintaxe do Webpack e da atualização quente. O tomcat só pode ser reiniciado quando necessário. Aqui estão alguns pontos para prestar atenção
npm run dev e Tomcat, mas ambos os serviços precisam ser iniciados antes que o navegador acesse o 8081.npm run dev e reiniciar o tomcat. Lembre -se, se houver novos arquivos e excluir, é melhor reiniciar os dois serviços.Sabemos que o webpack-dev-server usa o sistema de arquivos na memória. A página JSP é publicada no Tomcat, e o arquivo JSP na memória não pode ser ouvido pela Idea; portanto, mesmo que a saída final do JSP altere, ela não pode ser implantada no Tomcat. Felizmente, encontramos um plugin webpack Writefileplugin, que pode forçar os arquivos de saída do programa Webpack-dev-server ao sistema de arquivos de disco. Aqui estão alguns pontos para prestar atenção
Na verdade, essa ideia não é aplicável apenas a aplicativos de várias páginas JSP no Tomcat, mas também para se aplicar ao nó como aplicativos de várias páginas de servidor. Apreciá-lo!
