【SpringBoot】建立一个直接访问网页的项目

原创已于 2022-03-21 00:16:48 修改 · 3.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#后端 #intellij-idea #maven #idea #spring boot

于 2022-03-20 16:09:14 首次发布

Java web 专栏收录该内容

27 篇文章

订阅专栏

本文引导你使用SpringBoot快速创建一个项目，直接访问预先准备的Semantic UI模板网页，涉及资源文件替换和Controller配置。

【SpringBoot】建立一个直接访问网页的项目

本篇文章是SpringBoot中前后端结合的初步入门，通过在semantic-ui和CDN网页中复制拉取一个模板网页，再新建一个Controller类去控制访问项目直接跳转到网页，来实现这个直接访问网页的SpringBoot项目。感兴趣的朋友，可以往下看：

【SpringBoot】建立一个直接访问网页的项目

【SpringBoot】建立一个直接访问网页的项目

建立项目

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DbpMgUkq-1647762462576)(image\新建项目1.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-agbbzI8Q-1647762642082)(image\新建项目2.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dTcPKCjp-1647762462581)(image\项目操作台.png)]$

搞一个模板网页

如果自己准备好网页，可以完全跳过这一步。这一步是讲如何获取一个模板网页并应用的步骤。

获取网页模板的网站：Semantic UI (semantic-ui.com)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8eHh1Klc-1647762462583)(image\网页模板获取1.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GwMzJ44-1647762462584)(image\网页模板获取2.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sp1J1hM3-1647762462585)(image\网页模板获取3.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-badckTfr-1647762462586)(image\网页模板获取4.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ek5IkfBv-1647762462587)(image\网页模板获取5.png)]$

在项目src——>resources——>templates文件夹中新建网页文件，将上面复制的代码粘贴进去

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PPrI7b1J-1647762462588)(image\网页创建1.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ajunrpYO-1647762462590)(image\网页创建2.png)]$

需要注意的是，此时网页文件中引用的样式和脚本文件我们是没有的，必须要替换成引用在线的文件

找出所有需要引用的链接

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nCCxeuSv-1647762462591)(image\引用CDN在线样式和脚本1.png)]$
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fB14DMdE-1647762462592)(image\引用CDN在线样式和脚本2.png)]$

去找semantic-ui的在线样式文件：

在线CDN网站jsDelivr - A free, fast, and reliable CDN for open source

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WrcrtufR-1647762462594)(image\引用CDN在线样式和脚本3.png)]$
看一下之前我们圈出的链接路径，找到相关路径，如上上张图就是dist/components，我们根据这个路径在网页里引用即可

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i96W71Gl-1647762462595)(image\引用CDN在线样式和脚本4.png)]$
在这里插入图片描述

回到项目界面
在这里插入图片描述

在这里插入图片描述

以同样的步骤替换下面的jquery

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iDUFYG8t-1647762462601)(image\替换在线样式和脚本4.png)]$

在下图网站中找到jquery，按上面的步骤一样来操作即可

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y2kMXBHE-1647762462602)(image\替换在线样式和脚本5.png)]$

至此，网页模板就已经准备好了！

新建Controller类，来跳转网页

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rMtu2nkW-1647762462603)(image\新建Controller类1.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UaL80n2L-1647762462604)(image\新建Controller类2.png)]$
在这里插入图片描述

编写如下代码

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MvDcTgXm-1647762462605)(image\新建Controller类4.png)]$

package com.example.startspringboot_web.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RestController
public class StartController {

    @GetMapping("/")
    public ModelAndView hello(){
        return new ModelAndView("index");
    }
}