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.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
https://img-blog.csdnimg.cn/66a83174bc584756b388ad6efece8f4d.jpeg
在HelloController.java中编写跳转代码
https://img-blog.csdnimg.cn/0c2e8e12d8814912bf183597fa2bedbd.png
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目次下
https://img-blog.csdnimg.cn/fb3d3b7ecf144c23b733952cec70bda3.jpeg
运行spring启动类
https://img-blog.csdnimg.cn/4b6a49ee73b24808b821a708d9d002fe.png
这两个地方都可以运行，运行后的效果如下：
运行成功：
https://img-blog.csdnimg.cn/0ddbf85a3eb14bbfa50520d47dda597f.png
首页打开成功：
https://img-blog.csdnimg.cn/2e08116add63498482d2fb95d2a5bb1d.png
点击跳转到a和b成功：
https://img-blog.csdnimg.cn/78458d7456bd4e20bf5c24fa282134cf.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]