#每日一记#为HW行动开发个小工具-前端配置篇

为HW行动开发个小工具-环境准备篇

为HW行动开发个小工具-项目构建篇

• 项目前端配置

  
  

  
  

  
  
  
  

       说明：该Web项目不搭配数据库进行开发

       第一步：在IDEA中，以DEBUG方式，启动通过start.spring.io下载打开后的项目，测试框架项目是否能正常启动。

      

      查看启动日志，出现以下信息，则表示项目已成功启动

      

      第二步：修改Tomcat端口，将8080改为80。在application.properties文件中，输入server.port=80即可，重新启动项目进行观察

      

      此时，已经将端口改为80，可以直接在浏览器中访问进行测试，能打开页面即为成功。

      第三步：配置Thymeleaf模板引擎，在application.properties中写入以下配置信息

      # Thymeleaf配置

      spring.thymeleaf.cache=false

      spring.thymeleaf.mode=LEGACYHTML5

      spring.thymeleaf.encoding=UTF-8

      spring.thymeleaf.prefix=classpath:/view/

      spring.thymeleaf.suffix=.html

      对应的，在resources目录下，创建view目录，该目录以后将存放前端代码

      第四步：进行web配置，在utils目录下创建一个config目录，方法为在utils-右键-new-package，输入config，点击确定，在config目录下创建一个WebConfig.java文件，方法为在config-右键-new-java class，输入WebConfig，点击确定。如下图所示。

      

       第五步：编写WebConfig.java文件。代码如下

1. package cn.anctec.utils.config;
   
2. 
   
3. import org.springframework.context.annotation.Configuration;
   
4. import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
   
5. import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
   
6. import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
   
7. 
   
8. @Configuration
   
9. public class WebConfig extends WebMvcConfigurerAdapter{
   
10. 
    
11.     @Override
    
12.     public void addViewControllers(ViewControllerRegistry registry) {
    
13.         registry.addViewController("/").setViewName("view.html");
    
14.         super.addViewControllers(registry);
    
15.     }
    
16. 
    
17.     @Override
    
18.     public void addResourceHandlers(ResourceHandlerRegistry registry) {
    
19.         registry.addResourceHandler("/view/**").addResourceLocations("classpath:/view/");
    
20.         super.addResourceHandlers(registry);
    
21.     }
    
22. }
    

复制代码

      第六步：view目录下上传jquery.min.js文件和新建view.html文件

       jquery文件下载： jquery.zip (28.21 KB, 下载次数: 0)

2021-3-1 14:10 上传

点击文件名下载附件

      

       第七步：启动项目测试，出现空白页面，则表明项目初步搭建配置成功

      

发帖辛苦，感谢分享~

感谢楼主的精彩分享，学习了！

感谢分享，学习收藏。

坚持每天登陆论坛学习   

感谢楼主无私分享，学习一下

感谢分享，有助于工作，学习学习