springboot结合前端实现网页跳转功能实例

 更新时间:2023年12月28日 10:38:43   作者:大盘鸡加面  
今天处理Springboot统一异常拦截的时候,遇到了页面跳转的问题,这篇文章主要给大家介绍了关于springboot结合前端实现网页跳转功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

总结

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

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

前端篇

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

编写首页

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

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

<div class="">
    hello, world
</div>

<a href="/a" rel="external nofollow" >跳转a网页</a>
<a href="/b" rel="external nofollow" >跳转b网页</a>

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

<body>
    <div class="">这是a网页</div>
</body>

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

后端篇

后段使用springboot,

1、创建springboot项目

2、配置maven

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

4、编写跳转代码

创建springboot项目和配置maven已在前面写过,不熟悉的可以参考之前写的这篇博客(springboot实现hello world)https://www.jb51.net/program/310318c1r.htm

创建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成功:

总结 

到此这篇关于springboot结合前端实现网页跳转功能的文章就介绍到这了,更多相关springboot前端实现网页跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • springboot整合redis集群过程解析

    springboot整合redis集群过程解析

    这篇文章主要介绍了springboot整合redis集群过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • Java SWT中常见弹出框实例总结

    Java SWT中常见弹出框实例总结

    刚开始写Java工具的小伙伴可能不知道怎么写消息对话框,在这里总结一些常用的几种消息弹出框,下面这篇文章主要给大家介绍了关于Java SWT中常见弹出框的相关资料,需要的朋友可以参考下
    2023-01-01
  • String的两种初始化方法讲解

    String的两种初始化方法讲解

    今天小编就为大家分享一篇关于String的两种初始化方法讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-04-04
  • 详解Java中使用ImageIO类对图片进行压缩的方法

    详解Java中使用ImageIO类对图片进行压缩的方法

    这篇文章主要介绍了Java中使用ImageIO类对图片进行压缩的方法,能够按指定的比例调整图片的宽高,需要的朋友可以参考下
    2016-04-04
  • 三分钟读懂mybatis中resultMap和resultType区别

    三分钟读懂mybatis中resultMap和resultType区别

    这篇文章主要给大家介绍了mybatis中resultMap和resultType区别的相关资料,resultType和resultMap都是mybatis进行数据库连接操作处理返回结果的,需要的朋友可以参考下
    2023-07-07
  • Idea导入多个maven项目到同一目录下的方法示例

    Idea导入多个maven项目到同一目录下的方法示例

    这篇文章主要介绍了Idea导入多个maven项目到同一目录下,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • java连接mysql数据库详细步骤解析

    java连接mysql数据库详细步骤解析

    以下是对java连接mysql数据库的具体详细步骤进行了分析介绍,需要的朋友可以过来参考下
    2013-08-08
  • 手把手教你设置IntelliJ IDEA 的彩色代码主题的图文教程

    手把手教你设置IntelliJ IDEA 的彩色代码主题的图文教程

    本文给出一系列 IntelliJ IDEA 代码的彩色主题,感兴趣的朋友一起看看吧
    2018-01-01
  • java处理异常Exception的方法总结

    java处理异常Exception的方法总结

    在Java中处理异常并不是一个简单的事情,不仅仅初学者很难理解,即使一些有经验的开发者也需要花费很多时间,本文为大家整理了java处理异常Exception的一些常用方法,希望对大家有所帮助
    2023-09-09
  • java常见的字符串拼接方式总结

    java常见的字符串拼接方式总结

    这篇文章主要为大家详细介绍了java中常见的字符串拼接方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-09-09

最新评论