VUE基础知识讲解，适合Springboot后端人员的简单教程

最新推荐文章于 2024-06-18 20:56:08 发布
最新推荐文章于 2024-06-18 20:56:08 发布
阅读量475 收藏 2
点赞数 2
文章标签： vue.js javascript html SpringBoot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_51976307/article/details/120404241
版权

HI GUY!

后端不得不系列：不得不学一点VUE了,本教程结合了狂神和黑马程序员，所以知识较为完善，值得收藏😍😍😍

关于前端

html-css-javaScript：前端三要素

前端组成：逻辑判断（遍历与循环）、事件监听、视图呈现（html、css）、通信功能（ajax、Axios）

关于框架

vue：渐进式javaScript的框架——框架=规则

Element UI：一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

一、第一个VUE程序

1、在idea安装Vue插件

请添加图片描述

2、导入Vue.js
<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
3、hello，Vue！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>

<div id="app">
    {{message}}
</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue!"
        }
    })
</script>

</body>
</html>
  • el: '#xxx'：绑定元素的ID(id=xxx)，该标签下的{{xxx}}都可以取到该值，但外部的无法取到
  • data:{message:'Hello Vue!'}：数据对象中有一个名为message的属性，并设置了初始值Hello，Vue！
  • data所办含数据类型：字符串（message:“xxx”），对象（school{name:“xxx”,locatioan:“xxx”}）,数组（campous:[“xxx”,“xxx1”,“xxx2”]）
  • 对应的取法：字符（{{message}}）,对象（{{school.name}}）,数组（{{campous[0]}}）

一个Vue前端项目基础单位：

  • 一个标签的id

    • <div id="app">
    {{message}}
</div>

  • 一个绑定这个id的Vue对象

    • <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue!"
        }
    })
</script>

二、基础语法指令

指令官方API教程地址：https://v3.cn.vuejs.org/api/directives.html

① v-bind
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<!--view层，模板-->
<div id="app">
    <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    });
</script>
</body>
</html>

  • 在html中，span标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。span标签本身并没有什么格式表现（比如：换行等），需要对它应用样式才会有视觉上的变化。

    span标签通常使用来将文本的一部分或者文档的一部分独立出来，从而对独立出来的内容设置单独的样式。

  • v-bind:v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。该指令此处的意思是将这个元素节点的title特性和Vue实例的message属性保持一致。相当于之前的{{}}。

② v-if、v-else

条件判断语句。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<div id="app1">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='D'">D</h1>
    <h1 v-else>C</h1>

</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            ok:true
        }
    });

    var vm = new Vue({
        el:"#app1",
        data:{
            type: 'E'
        }
    });

</script>
</body>
</html>
  • <h1 v-if="ok">Yes</h1>一个v-if="xxx"代表，xxx===ture。因为Vue的语法中三个等号才表示相等判断
  • v-if=“判断语句”、v-else-if=“判断语句”、v-else=“判断语句”
  • 所判断的值，来自Vue所传入的值，实现动态dom渲染
③ v-for
1、完全遍历
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>

</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            items:[
                {message:'狂神说Java'},
                {message:'狂神说前端'},
                {message:'狂神说运维'}
            ]
        }
    });
</script>
</body>
</html>
  • []里面放数组，{}里面放对象（键值对对象）
  • 完全遍历v-for语法：
    • v-for=“单体名 in 遍历对象”
    • {{单体名.属性名}}即Vue对象中对应的传入值属性名
2、索引生成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <li v-for="(item,index) in items">
        {{index}}-{{item.message}}
    </li>

</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            items:[
                {message:'狂神说Java'},
                {message:'狂神说前端'},
                {message:'狂神说运维'}
            ]
        }
    });
</script>
</body>
</html>
  • 索引生成遍历v-for语法：

    • v-for="（单体名，index） in 遍历对象"

    • {{index}}，{{单体名.属性名}}

④ v-on（@）

监听事件的方法

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button v-on:click="sayHi">点我</button>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el:"#app",
        data:{
            message:'Hello World'
        },
        methods:{
            sayHi:function(event){
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

  • 在标签中添加v-on:事件名="连接Vue的对应method名"，v-on:可以替换为@

  • 在Vue对象中methods属性中添加method

    • methods:{
            属性名:function(event){
                事件;
            }

  • alert为弹出弹窗

⑤ v-model

【双向绑定】：可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

当数据发生变化时，视图也发生变化。就像线上做选择题，选完之后答案会显示在题目旁边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    下拉框:
    <select v-model="pan">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>value:{{pan}}</span>



</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:""
        }
    });
</script>
</body>
</html>

注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

  • v-model:"属性名"
  • {{属性名}}
  • 因为v-model绑定了该下拉框，所以所输入的值会传给v-model后面绑定的属性，该属性的值会传回Vue对象对应属性名。在其它如单行文本、多行文本、单选按钮、多选按钮皆可使用v-modl绑定，达成双向值的传递。
⑥ v-text
<div id="app">
    <button v-text:"message">点我</button>
</div>
==============
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el:"#app",
        data:{
            message:'Hello World'
        }
    });
</script>
  • v-text：起到的是标签内的内容替换为对应js中的属性的值，特点是全部替换
  • 和v-text作用相似的就是{{属性名}},如此别不会导致全替换
⑦ v-html
<div id="app">
    <button v-text:"message">点我</button>
</div>
==============
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el:"#app",
        data:{
            message:'Hello World'
        }
    });
</script>
  • 对于普通文本来说，和v-text作用相似标签内的内容替换为对应js中的属性的值，也是全部替换
  • 当属性的值为html语法格式时，会自动增整个html语句
⑧ v-show
<div id="app">
    <button v-show="true">点我</button>
    <button v-show="isSHow">点我</button>
    <button v-show="age>=18">点我</button>
</div>
==============
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el:"#app",
        data:{
            isShow:false
            age:16
        }
    });
</script>
  • 当v-show=“判断语句”，当判断语句结果为true时，才会显示
  • 若使用v-if来完成，需要使用dom，性能消耗比较大

三、Vue组件[Vue.component]

组件是可复用的Vue实例， 就是一组可以重复使用的模板。例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

在这里插入图片描述

1、第一个Vue组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <xxx></xxx>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    //先注册组件
    Vue.component("xxx",{

        template:'<li>hello</li>'

    });
    //再实例化Vue
    var vm = new Vue({
        el:"#app",
    });
</script>

</body>
</html>

  • 语法：Vue.component(“组件名”,{template:组件组成})；

  • 相当于提前定制好一个前端页面的组件，可以增强代码的复用性，使前端页面更加简洁

  • Vue.component()：注册组件

  • template：组件的模板

2、组件传参
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <xxx v-bind:property="message"></xxx>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    //先注册组件
    Vue.component("xxx",{
        props:["property"],
        template:'<li>{{property}}</li>'

    });
    //再实例化Vue
    var vm = new Vue({
        el:"#app",
        data:{
            message: "hello",
        }
    });
</script>

</body>
</html>
  • 语法：Vue.component(“组件名”,{props:[“内置属性”],template:组件组成})；
  • 对应使用组件时，需要用v-bind绑定内置属性，v-bind:内置属性名=Vue对象的数据中的属性名
  • 组件中的内置属性名与组件中取值{{}}的属性名要一致

四、Axios异步通信[mounted属性]

Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能， 为了解决通信问题， 作者单独开发了一个名为vue-resource的插件， 不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。

Axios：易用、简洁且高效的http库(内部就是ajax)

1、第一个Axios程序

创建一个json数据

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂神说Java",
      "url": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

编写Axios程序

<!DOCTYPE html>
<html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="vue">
    <div>地名：{{info.name}}</div>
    <div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
    <div>链接：<a v-binf:href="info.url" target="_blank">{{info.url}}</a> </div>
</div>

<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#vue",
        data(){
            return{
                info:{
                    name:null,
                    address:{
                        country:null,
                        city:null,
                        street:null
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数
            axios
                .get('data.json')
                .then(response=>(this.info=response.data));
        }
    });
</script>
</body>
</html>
  • <script src="https://unpkg.com/axios/dist/axios.min.js"></script>:导入axios在线依赖
  • 通过mounted属性去获取axio，通过get方法获取json数据，通过then去绑定要渲染的Vue的data中info的属性值（链式函数）
  • 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
  • 我们在data中的数据结构必须和Ajax响应回来的数据格式匹配！

语法补充：

==get请求==
axios.get(地址).then(function(response){},function(err){});

==post请求==
axios.post(地址,参数对象).then(function(response){},function(err){});

五、计算属性[methods属性]

1、计算属性（Vue特色）

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"pan"
        },
        methods:{
            currentTime1:function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2:function(){//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>

注意：methods和computed里的东西不能重名
说明：

  • methods：定义方法， 调用方法使用currentTime1()， 需要带括号

  • computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化

  • 如果在方法中的值发生了变化，则缓存就会刷新。

结论：
  调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

未来村村长
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
开发博客系统SpringBoot+Vue教程
fhzmWJ的博客
05-15 1387
个人的开发挑战计划1
vue+springboot最佳项目实践源码
03-28
`fruit_vue.zip`和`fruit_springboot.zip`分别包含了Vue.js前端和Spring Boot后端的源代码。Vue.js项目可能包含`src`目录，里面包括`components`（存放可复用组件）、`views`（视图组件）、`router`（路由配置）、`...
给后端程序员看的 Vue 快速入门教程
形势所逼，不进则退
04-09 770
Vue 是近两年极为火热的前端框架。作为一个后端，你是否曾经想要去了解一下 Vue？是否使用过 Vue 来完成自己的 Side Project。在这篇文章中，我将向你分享...
2024最新最详细保姆教程！SpringBoot+Vue前后端分离项目部署运行教程文档。
06-18 830
如果过程中遇到任何报错问题，不要担心，一步一步跟着我的视频，我的笔记来排查。相信你最终也一定可以运行出来项目，能够独立运行出来这个项目是个非常有成就感的事情。能够这么认真仔细教你如何安装软件，部署项目的up主你还见过第二个吗？这么宝藏的up还不来个一键三连+关注！
springboot_vue知识点
weixin_38226321的博客
11-23 245
1.跨域问题，后端common里面加一个CorsConfig.javaimport org// 1 设置访问源地址 corsConfiguration . addAllowedHeader("*");// 2 设置访问源请求头 corsConfiguration . addAllowedMethod("*");// 3 设置访问源请求方法 source . registerCorsConfiguration("/**" , corsConfiguration);
后端程序员的 VUE 入门上手笔记
码农UP2U
09-13 480
目录 一、Vue 的开始 二、单向绑定 三、双向绑定 四、事件绑定 五、条件指令 六、循环指令 七、Vue 生命周期 八、axios 和vue-resource 库 九、总结 现在的各种开源项目中使用 Vue 的越来越多了，作为一个后端程序员不会点 Vue 也都玩不转了。所以抽空学习了一下 Vue 的简单用法，整理成笔记，方便有需要的同学一起学习。 Vue 是一个前端的框架，被称作是 渐进式 JavaScript 框架。在进入 Vue 的官网时即可...
后端小菜鸟对Vue的简单入门---了解
一个爱运动的程序员的博客
09-21 496
学习目的： 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 能够使用vue常见指令 能使用vue计算属性和watch监控 能够编写vue组件 能够使用axios发送异步请求获取数据 一、Vue的概述 中文文档：https://cn.vuejs.org/v2/guide/syntax.html MVVM通过视图与模型的双向绑定，简化前端操作。 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅
Java大型CRM源码带小程序 vue+springboot
10-26
【Java大型CRM源码带小程序 vue+springboot】是一个综合性的项目，主要涵盖了前端、后端和移动端小程序的开发技术。下面将详细讲解这个项目所涉及的知识点。 1. **前端技术 - Vue.js** Vue.js 是一个轻量级的前端...
Springboot+Vue实现小区物业管理系统（源码资料+视频教程）.rar
05-08
本资源是一套完整的小区物业管理系统开发教程，采用Springboot作为后端框架，Vue作为前端技术，提供源码资料和视频教学。教程内容从系统需求分析开始，逐步引导至数据库设计、前后端交互、用户界面开发，直至最终...
springboot基础篇-源码
11-13
在本教程中，我们将深入探讨SpringBoot的基础知识，并通过一个实际的SSMP项目（SpringBoot、SpringMVC、MyBatis、MySQL）进行实践。这个项目结合了Vue.js和Element UI前端框架，为开发者提供了一个全面的Web应用开发...
SpringBoot3+Vue3开发项目 视频教程 下载 视频教程 百度网盘链接2.zip
最新发布
06-20
6. **Vue3与SpringBoot3整合**：讲解如何在SpringBoot后端提供RESTful API，以及Vue3如何消费这些API进行数据交互，实现前后端分离。 7. **实战项目**：通过一个完整的案例，演示如何从零开始构建一个集成了...
springboot+vue 前后端分离如何整合教程
07-17
springboot+vue 前后端分离 整合教程额外补充 详情请查看文档资料 2020年11月12日10:25:51
springboot+vue33333333.pdf
08-05
spring boot+vue非常实用的一个框架文档，可以清楚的了解底层以及框架结构
后端 学习 前端 Vue 框架基础知识
rain67的博客
10-01 2692
Vue . component() // 使用Vue直接注册根实例组件，属于所有组件共有的Vuex 是一个状态管理模式的库，集中存储所有组件的状态。说到这里可能还有人不明白，什么叫做状态管理？在之前我们见到父子组件传递参数的时候，使用prop进行声明接收，但是只能单向传递，父传给子，子组件要想改变参数的值无法影响到父组件以及其他组件的。一个例子，有用户组件、员工组件、部门组件，在开发过程中，有一个数据count，三个组件中都要用到。
spring boot + vue知识点总结
NPCS_JQ的博客
08-11 1245
脚本语言需要一个解析器才能运行，JavaScript是脚本语言，在不同的位置有不一样的解析器，如写入html的js语言，浏览器是它的解析器角色。而对于需要独立运行的JS，nodejs就是一个解析器。
Springboot+Vue简单Demo教程
愿你拥有大风与烈酒,也能享受孤独与自由
03-07 2556
技术实现 根据 楠哥 项目做得笔记… Springboot + Vue (用的Mybatis) 使用Springboot进行后端应用开发,使用Vue进行前端应用开发 创建Vue工程 cmd命令行创建vue工程 vue ui 如果没有反应 可以查看 vue -h是否有vue ui命令 如果没有说明版本太低进行脚手架的升级 cnpm i -g @vue/cli 选择目录新建项目 创建项目名–关闭初始化git仓库–手动配置项目–Router、Vuex打开以及Linter/Formatter关闭–Use
没想到Spring Boot + Vue 竟如此简单！
java思维导图
01-15 648
其实做一个 SpringBoot + vue 项目并不难，大概可以分为几个步骤：决定技术选型，比如常见组合：springboot、mybaits plus、vue、es、redis等搭建项...
SpringBoot+Vue入门
honor2的博客
02-28 6448
Spring+Vue+Mybatis入门
Vue3后端程序员极速入门
qq_53324833的博客
10-10 3484
前言 因为我就是主攻后端的程序员，前端感觉就是知道个大概就行，所以就是自己学着些皮毛罢了，想掌握Vue的同学们建议看其他人的文章嗷。 Vue基本使用 我感觉这个很基础了，我就随便贴两张图，这些不是重点。 ...
springboot+vue音乐网站代码讲解
05-22
这个问题比较大，涉及到前后端的代码讲解。不过，我可以简单介绍一下 SpringBoot 和 Vue.js 的基础知识，并给出一些学习资源，供你参考。 SpringBoot 是一个基于 Spring 框架的快速开发框架，它可以让你快速搭建一个 Web 应用程序。Vue.js 是一个流行的 JavaScript 框架，它可以帮助你构建动态的 Web 用户界面。 要构建一个音乐网站，你需要使用 SpringBoot 构建后端 API，同时使用 Vue.js 构建前端用户界面。具体来说，你可以使用 SpringBoot 来处理用户认证、数据库访问和数据验证等后端任务，同时使用 Vue.js 来构建用户界面、处理用户输入和与后端 API 通信等前端任务。 以下是一些学习资源，供你参考： - SpringBoot 官方文档：https://spring.io/projects/spring-boot - Vue.js 官方文档：https://vuejs.org/ - Vue.js 教程：https://www.runoob.com/vue2/vue-tutorial.html - SpringBoot 教程：https://www.yiibai.com/spring-boot/ 希望这些资源可以帮助你开始构建你的音乐网站。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未来村村长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值