SpringBoot融入Vue的简单测试

一.配置静态资源映射器

在springBoot项目之中，由于它兼容Web依赖，故而它支持web服务，普通的开发一般就会把一些静态的资源放在springBoot的项目之下，对于怎么访问这些静态资源就需要简单的了解了

首先，springBoot的强大之处在于自动装配和扫描，既然是自动扫描，那么它就一定要一个指定的扫描范围，所谓约定大于配置，如果每个文件夹都放静态资源，那么springBoot的速度也快不起来，因为大部分时间都扫描资源去了。故而springBoot为了解决这个问题，它在自动扫描静态资源的时候只会扫描下面的这些路径：

  • /classpath/META-INF/resource/
  • /classpath/resouce/
  • /classpath/static/
  • /classpath/public

这些目录如果您看不懂，没关系，你只要记住静态资源统一放在static文件夹（包）下面就好了

 那些静态资源需要放在这个static包下面呢？

可以简单总结有HTML文件，CSS文件，JavaScript文件，图片，视频，音频等文件都是静态资源，如果您的项目需要用到，都需要放在这个static文件夹下面，由于这些文件类型比较多，一般可以在static包下面继续新建包，用于分门别类的装静态资源

 如上图，在静态资源比较多的情况下，我们就可以通过继续向下一级新建包来分类这些静态资源，接下来简单的测试一个小Demo，SpringBoot中怎么访问静态的Html文件

环境搭建

springBoot需要添加Web依赖，可以打开你的pom.xml文件查看是否包含了sping-boot-starter-web，如果已经包含就不需要管它

首先在resource下新建一个static包，如果你已经建好了就继续下一步，第二步新建一个html页面，命名可以叫main.html

新建一个html文件之后，就可以写一些简单的测试内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页</title>
</head>
<body>
<div id="app" style="text-align: center;margin-top: 100px;color: deepskyblue">
    <h1>测试访问静态Html页面</h1>
    <h1>转发到此，说明访问首页成功</h1>
</div>
</body>
</html>

 由于我们的静态资源文件是新建在static包下面的，那么springBoot会自动帮我们扫描这些静态资源，这时候就可以使用springBoot的启动器，启动这个Web项目

被@SpringBootApplication注解标记的类就是启动器，点击绿色的小三角就可以启动springBoot了

 正常启动之后去浏览器地址栏输入：localhost:8080/main.html

我们可以发现直接请求静态资源世界弹出了Html页面，接下来就需要配置一个映射器给这个html文件；

为什么要配置静态资源的映射器呢？

你要知道一般的开发中，会有很多个静态资源，如果你不配置映射器给它，那么你每次访问都需要输入完整的页面名称，第一手动输入如果包的层级关系多了，懒得输入，第二直接访问文件会导致文件名和文件所在地址暴露在地址栏，容易被非法分子利用，故而需要给静态资源设置一个映射器。

怎么设置呢？

这也是springBoot的一个配置类，只需要实现WebMvcConfigurer接口，然后重写里面的方法就好了：

由于这是一个配置类所以需要加上@Configuration 注解，标记这个类是SpringBoot的配置的一部分，当容器启动后springBoot会根据这个类的代码进行配置

同时重写配置类中的一个方法，添加main.html页面的映射为 /m，springBoot配置之后，我们就可以使用/m拿到这个页面了，当然这个/m可以自定义，后面的/main.html就必须是你的html文件所在位置了

我们可以发现，经过配置类的注册，果然/m也可以代替/main.html进行请求静态页面了

接下来基于这个html文件，来快速开始一下Vue的测试

二.引入Vue框架

入门Vue可以去菜鸟教程：https://www.runoob.com/vue3/vue3-tutorial.html

首先我们需要知道Vue是一个前端的框架，它的出现就是为了使前端可以工程化，模块化，提升开发的效率；使用Vue的好处就是我们可以像面向对象编程一样编写前端代码；当然这些都是后戏，现在我们需要做的第一个目标就是引入Vue的依赖。引入Vue的方式有很多，既然是入门我们就一切从简，只使用两种方式

  • CDN在线引入
  • 本地引入

 1. 首先是CDN在线引入，它的有点是快速，简洁，它只需要在html文件中加上一行代码就好了：

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>

缺点就是CDN引入的方式是在页面初始化的时候从网上加载下来的，如果网络抽风或者服务器不稳定都会导致CDN引入失败

2. 本地引入

本地引入就需要将CDN的地址输入到浏览器https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js，然后就会打开一个页面，上面有很多JS代码，这就是Vue框架的实现代码，只需要将其ctrl + s 保存，或者右键浏览器--另存为一个js文件就下载好了：

 如上图，点击另存为，然后选择保存到位置，记住这个保存位置就好了，后面需要赋值到项目中

 

它的名字也不需要改，比如我就把它放在桌面，方便后面的复制，选好存储位置直接点击保存就好了，再次声明需要记得保存这个文件的位置

接下来我们回到Idea中，需要在static包下面新建一个JS包，用来装JS文件，前面提到过，目的是为了分门别类这些静态资源

 

 注意一定要建在static包下面，这样SpringBoot才能扫描到这个包

然后回到桌面（你放下载Vue文件的位置），复制这个文件，回到Idea中选中这个JS包，注意一定要点击选中它，然后粘贴，就将其引入到项目中了

 

 

Vue的使用

 

注意：修改完代码之后就重启springBoot，注意每次请求的时候（也就是在浏览器地址栏输入地址的时候）都需要重启，不然就是无效的，一定要重启springboot！一定要重启springboot！一定要重启springboot！

 

将Vue的依赖都引入之后，就可以使用Vue来简单显示一些东西到页面上了

可以打开菜鸟教程的这个网站：https://www.runoob.com/try/try.php?filename=vue3-hw

然后我们开始使用Vue，先引入依赖到html文件中，让Vue在main.html文件中生效

第一种CDN引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
</head>
<body>
<div id="app" style="text-align: center;margin-top: 100px;color: deepskyblue">
    <h1>测试访问静态Html页面</h1>
    <h1>转发到此，说明访问首页成功</h1>
</div>
</body>
</html>

如上图，将其放在<head></head>标签对之间就可以了

第二种方式：本地引入到main.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页</title>
    <script src="JS/vue.global.min.js"></script>
</head>
<body>
<div id="app" style="text-align: center;margin-top: 100px;color: deepskyblue">
    <h1>测试访问静态Html页面</h1>
    <h1>转发到此，说明访问首页成功</h1>
</div>
</body>
</html>

以上两种方式实现一种就可以了，如果您一种引入不成功，那么请切换到另一种，两种都是OK的，但有时候CDN会抽风

接下来复制材料教程上的起步代码，打开这个网站：https://www.runoob.com/try/try.php?filename=vue3-hw

先复制被script标签包裹的内容:<script></script>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

将上面的代码复制到您的main.html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页</title>
    <script src="JS/vue.global.min.js"></script>
</head>
<body>
<div id="app" style="text-align: center;margin-top: 100px;color: deepskyblue">
    <h1>测试访问静态Html页面</h1>
    <h1>转发到此，说明访问首页成功</h1>
</div>
<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

 如上图就是复制好了<script></script>标签中的内容，下面的操作就很简单了，但是需要仔细一点，在script代码中vue实例定义了一个成员变量message，接下来我们要把里面的值取出来，操作就是将{{message}}放在<div>盒子标签中，使用{{}}这种语法就是vue提供的数据双向绑定，可以直接在页面中取出vue实例中的属性值

<div id="hello-vue" style="text-align: center;margin-top: 100px;color: deepskyblue">
    <h1>测试访问静态Html页面</h1>
    <h1>转发到此，说明访问首页成功</h1>
    {{message}}
</div>

注意需要将<div>标签的id属性值更换为 hello-vue ，这样才能绑定vue的实例

然后使用刚刚的方式再次请求这个页面，启动springboot，访问localhost:8080/m 或者 localhost:8080/main.html

 

我们发现hello Vue在页面上显示了，说明测试Vue的引入成功了

后面我们就需要继续引入第二个组件：axios，异步通信

三.引入axios

axios的目的是实现前后端的通信，引入它可以打开网站：https://www.runoob.com/vue3/vue3-ajax-axios.html

引入方式也是两种，和引入vue是一样的，故而我就不再次操作了，这次我直接使用CDN的方式引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在我们的引入vue代码下面加上这段代码就好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页</title>
    <script src="JS/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="hello-vue" style="text-align: center;margin-top: 100px;color: deepskyblue">
    <h1>测试访问静态Html页面</h1>
    <h1>转发到此，说明访问首页成功</h1>
    {{message}}
</div>
<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

如上，只需要多加一行代码就引入axios了，接下来就可以使用axios进行前后端通信了

先写前端的通信：可以打开网站对照复制就好了，手写的话容易出错：https://www.runoob.com/try/try.php?filename=vue3-ajax-axios

mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
    });
  }

需要复制的代码就是上面的这段，mounted方法的意思是当vue挂载到div盒子上就执行，再加上axios的话；意思就是当页面加载完成后，就发送一个axios请求到后端

接下啦就将这段代码引入到我们的main.html中去：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页</title>
    <script src="JS/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="hello-vue" style="text-align: center;margin-top: 100px;color: deepskyblue">
    <h1>测试访问静态Html页面</h1>
    <h1>转发到此，说明访问首页成功</h1>
    {{message}}
</div>
<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        },
        mounted () {
            axios
                .get('https://www.runoob.com/try/ajax/json_demo.json')
                .then(response => (this.message = response))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

 

如上图，我们只是将axios的代码段引入到了main.html中了，还没有修改，get()方法后面的地址，那是因为后端还没有写，所以这些就回到springBoot中创建一个controller包用来处理axios发送过来的异步请求

新建一个包controller，在新建一个类MyController

 

 

如上图，新建大controller包应该和启动器在同一级目录，同时MyController在controller包下面，接下来是类中方法的代码：

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

//注解这个类为controller
@RestController
public class MyController {
    //请求的名称，前端调用/getInfo时，由这个方法处理
    @GetMapping("/getInfo")
    public String getInfo(){
        //返回给前端的数据
        return "SpringBoot返回";
    }
}

这是一个很简单的请求，只需要使用前端只需要使用/getInfo请求，就可以拿到后端的额数据

接下来就是更改前端的axios的get()方法的请求路径：

 修改时候前端的main.html代码应该为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="hello-vue" style="text-align: center;margin-top: 100px;color: deepskyblue">
    <h1>测试访问静态Html页面</h1>
    <h1>转发到此，说明访问首页成功</h1>
    {{message}}
</div>
<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        },
        mounted () {
            axios
                .get('/getInfo')
                .then(response => (this.message = response))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

然后启动springBoot项目，和前面的一样的操作，访问地址为：localhost:8080/m 或者 localhost:8080/main.html

应该会看到如下内容：

 

看到这一大串不要慌，说明你已经成功了，因为我们Vue是直接取得整个响应内容，所以才有这么大一块，一般我们也只需要返回的数据，故而只需要修改main.html中的内容：

修改之后的完整代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是首页</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="hello-vue" style="text-align: center;margin-top: 100px;color: deepskyblue">
    <h1>测试访问静态Html页面</h1>
    <h1>转发到此，说明访问首页成功</h1>
    {{message}}
</div>
<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        },
        mounted () {
            axios
                .get('/getInfo')
                .then(response => (this.message = response.data))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

注意：修改完代码之后就重启springBoot，注意每次请求的时候（也就是在浏览器地址栏输入地址的时候）都需要重启，不然就是无效的，一定要重启springboot！一定要重启springboot！一定要重启springboot！

接下来再次请求：localhost:8080/m 或者 localhost:8080/main.html

 

如上图，就是后端返回的代码被Vue接收到了，这就说明前端引入vue，axios成功，基本的环境就搭建好了

我们就可以基于这个开发架构去完成更多的功能了。

 

 

------END-----

本文虽经反复斟酌，但仍可能存在疏漏或不当之处，衷心希望得到各位同行的批评指正，以期进一步完善。

 

posted @ 2025-03-19 22:30  回忆也交给时间$  阅读(122)  评论(0)    收藏  举报