springboot-结合前端实现网页跳转
作者:mmseoamin日期:2024-01-18

springboot-前后端实现网页跳转(不含get、post请求)

    • 总结
    • 前端篇
      • 编写首页
      • 后端篇
        • 创建springboot项目
        • 配置maven
        • 创建controller类
        • 运行spring启动类

          总结

          1、前端代码写好放在springboot的static目录下

          2、controller类使用GetMapping获取网址链接,然后返回具体的前端html代码

          前端篇

          前端常用技术包含bootstrap、vue和react,今天基于html+css,主要为了说明springboot如何实现前后端跳转

          编写首页

          首页包含两个a标签,分别跳转到a.html和b.html,编译器使用VScode,

          首页index.html的body代码如下:

              hello, world
          跳转a网页
          跳转b网页
          

          a.html的body代码如下,b.html类似:

          
              这是a网页
          
          

          前端三个页面完成,只是前端跳转的话,可以把/a和/b换成a.html和b.html就可以了

          后端篇

          后段使用springboot,

          1、创建springboot项目

          2、配置maven

          3、创建controller文件夹以及controller类

          4、编写跳转代码

          创建springboot项目和配置maven已在前面写过,不熟悉的可以参考之前写的这篇博客(springboot实现hello world)https://blog.csdn.net/qq_41601567/article/details/129786595?spm=1001.2014.3001.5502

          创建springboot项目

          配置maven

          创建controller类

          新建controller文件夹,以及创建一个controller类:HelloController.java

          springboot-结合前端实现网页跳转,在这里插入图片描述,第1张

          在HelloController.java中编写跳转代码

          springboot-结合前端实现网页跳转,在这里插入图片描述,第2张

          import org.springframework.stereotype.Controller;
          import org.springframework.web.bind.annotation.GetMapping;
          @Controller
          public class HelloController {
              @GetMapping("/")
              public Object index(){
                  return "c.html";
              }
              @GetMapping("/a")
              public Object a(){
                  return "a.html";
              }
              @GetMapping("/b")
              public Object b(){
                  return "b.html";
              }
           }
          

          在GetMapping中填写需要跳转的url地址,函数类通过return返回一个具体的具体的html网页

          当目前为止前后都已经写完了,但是后端寻找的是html文件,此时直接运行会提示找不到html文件,需要将前端html文件放在springboot指定的目录下:

          静态文件放在resources/static目录中

          动态文件放在resources/templates目录下

          css、html和js都放在static目录下

          springboot-结合前端实现网页跳转,在这里插入图片描述,第3张

          运行spring启动类

          springboot-结合前端实现网页跳转,在这里插入图片描述,第4张

          这两个地方都可以运行,运行后的效果如下:

          运行成功:

          springboot-结合前端实现网页跳转,在这里插入图片描述,第5张

          首页打开成功:

          springboot-结合前端实现网页跳转,在这里插入图片描述,第6张

          点击跳转到a和b成功:

          springboot-结合前端实现网页跳转,在这里插入图片描述,第7张