springboot 添加静态页面_如何在springboot项目加一个页面呢-优快云博客

本文链接：https://blog.youkuaiyun.com/jishamo/article/details/72628435

本文记录了在Spring Boot项目中配置并添加静态页面的过程。首先，在`application.properties`中设置视图解析的相关配置，然后在项目结构中添加`jsp`页面到`main/webapp/WEB-INF/jsp`目录下。接着，引入Tomcat的Jasper编译依赖。在后端，通过`WebMvcConfigurerAdapter`扩展配置视图解析器，并设置默认首页。最后，展示了前端`index.jsp`中的JavaScript代码，实现了一个POST请求的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

笔者最近使用 spring boot 新建一个测试页面一直不成功，经过查阅资料，多次调试，最终调通，记录于此！

1.首先 向springboot 项目添加静态页面需要添加部分配置

   配置文件 main/resources/application.properties/application.properties	#spring.mvc.view.suffix=.jsp
	#spring.mvc.view.prefix=/WEB-INF/jsp/ 所以添加的jsp 文件目录应是： main/webapp/WEB-INF/jsp/index.jsp

   添加gradle依赖：    compile group: 'org.apache.tomcat.embed', name: 'tomcat-embed-jasper'

2. 后端配置@Configuration
public class WebMvcConfigure extends WebMvcConfigurerAdapter {

    @Bean
    InternalResourceViewResolver internalResourceViewResolver () {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/jsp/"); // application.properties 已配置就不需要
        viewResolver.setSuffix(".jsp");	
        return viewResolver;
    }
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index"); 	// 设置默认页面路径
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
        super.addViewControllers(registry);
    }
}
3. 前端index.jsp

<script type="text/javascript">//post 请求
       var putRecord = {};
        function addPutRecord(connected) {
            var dustbinNumber = document.getElementById('dustbinNumber').value;
            var userCardNumber = document.getElementById('userCardNumber').value;
            var date = new Date();
            var month = date.getMonth() + 1;
            month = month > 9 ? month : 0 + "";
            var timeStamp = date.getFullYear() + "" + month + "" + date.getDate();
            var weights = document.getElementById('weights').value;
            var capacity = document.getElementById('capacity').value;
            var imageName = document.getElementById('imageName').value;
            var message = {
                "dustbin_number": dustbinNumber,
                "user_card_number": userCardNumber,
                "time_stamp": timeStamp,
                "weights": weights,
                "capacity": capacity,
                "image_name": imageName
            }

            var url = 'http://localhost:8080/v1/yoururl';
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(message),	// 若不加JSON.stringify 后端对象解析时报错
                success: function (data) {
                    if (data.status == 200) {
                        alert("添加成功");
                    } else {
                        alert("添加失败");
                    }
                }
            })
//            var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
//            request.open('POST',url,false);
//
//            request.setRequestHeader("contentType","text/html;charset=uft-8"); //指定发送的编码
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
//            request.setRequestHeader("Content-type", "application/json");
//            request.send(formdata);
//            request.onload = function (data) {
//                alert("Data: " + data + "\nStatus: " + status);
//            }
        }
    </script>