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

在HelloController.java中编写跳转代码

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目录下

运行spring启动类

这两个地方都可以运行,运行后的效果如下: 运行成功: 首页打开成功: 点击跳转到a和b成功:

参考链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: