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">跳转a网页</a>
<a href="/b">跳转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://blog.csdn.net/qq_41601567/article/details/129786595?spm=1001.2014.3001.5502

创建springboot项目

配置maven

创建controller类

新建controller文件夹,以及创建一个controller类:HelloController.java
后端控制前端页面跳转,spring boot,前端,后端,java,intellij-idea,maven

在HelloController.java中编写跳转代码
后端控制前端页面跳转,spring boot,前端,后端,java,intellij-idea,maven

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 boot,前端,后端,java,intellij-idea,maven

运行spring启动类

后端控制前端页面跳转,spring boot,前端,后端,java,intellij-idea,maven
这两个地方都可以运行,运行后的效果如下:
运行成功:
后端控制前端页面跳转,spring boot,前端,后端,java,intellij-idea,maven
首页打开成功:
后端控制前端页面跳转,spring boot,前端,后端,java,intellij-idea,maven
点击跳转到a和b成功:
后端控制前端页面跳转,spring boot,前端,后端,java,intellij-idea,maven文章来源地址https://www.toymoban.com/news/detail-764469.html

到了这里,关于springboot-结合前端实现网页跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue路由跳转后,刷新指定页面。

            做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数。需要手动刷新之后,才会使用第二次参数。         鉴于时间原因直接使用刷新页面监听路由的方法。在准备跳转的A页面添加路

    2024年02月12日
    浏览(72)
  • 使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理

    在前面随笔《在Winform应用中增加通用的业务编码规则生成》,我介绍了基于Winform和WPF的一个通用的业务编码规则的管理功能,本篇随笔介绍基于后端Web API接口,实现快速的Vue3+ElementPlus前端界面的开发整合,同样是基于代码生成工具实现快速的前端代码的生成处理。 在前面

    2024年02月04日
    浏览(48)
  • Springboot集成阿里云对象存储oss-前端-后端完整实现

    1.注册阿里云并购买套餐流量包 2.点击套餐买个流量包,5元半年40g,还挺便宜    3.购买后进入管理控制台-点开对象存储oss 4.点开bucket创建,我已经创建好了    5.需要复制每个人的 外网访问,这个到时候需要在springboot项目中配置  6.点击个人头像创建每个人自己的key    

    2024年02月05日
    浏览(46)
  • SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)

    本文适用对象:已有基础的同学,知道基础的SpringBoot配置和Vue操作。 在此基础上本文实现基于SpringBoot和Vue.js基础上的增删改查和数据回显、刷新等。 实现步骤: 第1步:编写动态请求响应类:在启动类同父目录下创建controller包,在包下创建DataController类,添加@RestController、

    2024年02月04日
    浏览(50)
  • 微信小程序优化多次跳转后卡顿问题

    一、微信小程序多次跳转会产生卡顿的原理 通过wx.navigateTo 跳转,都会出现保留当前页面,打开新的页面机制。 wx.navigateTo不会将旧页面出栈,会将新页面入栈(栈内元素个数增加,栈内元素5个时,不能再跳转)。手机性能好点,可能10次左右才会导致小程序跳转卡顿崩溃。 二

    2024年02月11日
    浏览(142)
  • 服务端(后端)主动通知前端的实现:WebSocket(springboot中使用WebSocket案例)

    我们都知道 http 协议只能浏览器单方面向服务器发起请求获得响应,服务器不能主动向浏览器推送消息。想要实现浏览器的主动推送有两种主流实现方式: 轮询:缺点很多,但是实现简单 websocket:在浏览器和服务器之间建立 tcp 连接,实现全双工通信 springboot 使用 websocket 有

    2023年04月14日
    浏览(68)
  • websocket 实现后端主动前端推送数据、及时通讯(vue3 + springboot)

    WebSocket 是一种全双工通信协议,用于在 Web 浏览器和服务器之间建立持久的连接。 WebSocket 协议由 IETF 定为标准,WebSocket API 由 W3C 定为标准。 一旦 Web 客户端与服务器建立连接,之后的全部数据通信都通过这个连接进行。 可以互相发送 JSON、XML、HTML 或图片等任意格式的数据

    2024年03月17日
    浏览(52)
  • 前端加springboot实现Web Socket连接通讯以及测试流程(包括后端实现心跳检测)

    写这个项目主要是有有个项目需要后端有数据实话返回前端,一开始采用前端轮询的方式,后面觉得及时性上有些不行,然后改为使用websocket ,具体实现demo以及测试流程发出来提供交流学习, WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被

    2024年02月11日
    浏览(44)
  • 关于vue路由跳转后的页面不会刷新的解决办法

    做uni项目的时候遇到的情况:1,父组件页面刷新了之后 需要触底加载的子组件能触底加载,否则不能加载。2,子组件不能触底加载,只需要刷新之后就能触底加载。以上的刷新不包括下拉刷新。3. 可能因为包了一层tab页导致跳转进页面没有请求数据的问题。 我的解决办法是

    2024年02月11日
    浏览(63)
  • 【Nginx】POST请求跳转后变为GET请求 308 307状态码

    由于nginx中配置了http强制跳转https的配置,导致从http接收到的POST请求无法正常响应,是因为POST 请求经过 rewrite跳转后变成了GET请求 Moved Permanently:该方式将所有的 HTTP 请求重定向到 HTTPS 上,并且该重定向是永久性的。客户端在收到 301 响应后,会自动将 HTTP 请求转为 GET 请求

    2024年02月11日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包