vscode + springboot + HTML 搭建服务端(二)

简介: vscode + springboot + HTML 搭建服务端(二)

1. vscode环境搭建和工程创建请参考上一篇文章

vscode + springboot + HTML 搭建服务端(一)

2. 添加一个简单的展示

2.1 效果

2.2 代码

2.3 代码分解

  • 1: @RestController
  • 2: @RequestMapping(“/”)
  • url访问路径:localhost:8080/,浏览器中输入此url会调用其作用的函数hello()
  • 3: hello函数
  • 返回一个字符串,显示在浏览器中

3. 添加并展示HTML文件

上面只是在url中展示了一个字符串,而实际项目中是需要将一个网页展示出来,所以下面我们来添加一个HTML文件。

3.1 添加 html 文件

  • 在 src/main/resources/templates 路径下面添加 index.html 文件
  • index.html 文件代码:
<!DOCTYPE html>
<html>
  <head>
    <title>hello1111</title>
  </head>
  <body>
    <h1>index22222</h1>
  </body>
</html>

3.2 添加 url 访问路径

  • url 访问路径添加为: localhost:8080/index

3.3 运行程序,查看结果

3.3.1 很不幸的,遇到错误

org.thymeleaf.exceptions.TemplateInputException: Error resolving template…

3.3.2 解决过程
  1. 在运行程序后,会在工程目录下生成一个bin文件夹

  2. 发现 bin 文件夹和 src文件夹的结构比较相似
  3. 在报错的时候,发现在 src/main/resources/templates 文件夹下添加的 index.html 并没有在 bin/templates 文件夹下
  4. 死马当活马医,将 index.html 文件拷贝一份到 bin/templates 目录下

  5. 重新运行,打开网页,运行成功了…

3.3.3 总结
  • bin目录下应该是存放的执行文件,索引资源时也是在该路径下索引,所以在src/main/resources/templates 路径下的 html 文件可能索引不到 —> 猜的…
  • 为什么索引不到?是需要什么额外配置吗?

4. demo源码

package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
@SpringBootApplication
@RestController
public class DemoApplication {
  @RequestMapping("/")
  public String hello()
  {
    return "Hello";
  }
  @RequestMapping("/index")
  public ModelAndView index()
  {
    ModelAndView modelView = new ModelAndView("index");
    return modelView;
  }
  public static void main(String[] args) {
    SpringApplication.run(DemoApplication.class, args);
  }
}

5. 后记

  • application.properties 文件一行没改,里面内容是空的
  • 修改监听端口,在application.properties文件里添加(这里修改的文件是在bin目录下的才会生效,修改src目录下的不会生效,也不知道为啥):
server.port=9000
相关文章
|
2天前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
5 0
|
22天前
|
前端开发 安全 Java
家政系统(用户端)介绍Java18+前端html+后端springboot
家政系统(用户端)介绍Java18+前端html+后端springboot
20 0
|
26天前
|
JavaScript Java 测试技术
基于springboot+vue.js的基于HTML5的问卷调查系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的基于HTML5的问卷调查系统附带文章和源代码设计说明文档ppt
21 0
|
4天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
3天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
8天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
30 5
|
12天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
22 2
|
12天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
12天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
15 1
|
15天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
36 3