Spring Boot和Vue的学习(一)--开发环境的安装

本文介绍了使用SpringBoot+Vue进行前后端分离开发的步骤,包括Vue的安装、项目创建、数据交互及解决跨域问题。通过一个简单的例子展示了如何从零开始搭建并实现数据展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

闲来无事,想学一些框架,查了一些资料,说用前后端分离开发比较主流,同时比较热门的是Spring Boot+Vue开发,久仰大名,现在正好学习一下。

学习视频:4小时学会Spring Boot+Vue前后端分离开发

本文原创,创作不易,转载请注明!!!
本文链接
个人博客:https://ronglin.fun/?p=233
PDF链接:见博客网站
优快云: https://blog.youkuaiyun.com/RongLin02/article/details/117659135

Vue

官网:Vue.js 3.0
参考教程:Vue3 教程|菜鸟教程

安装Vue

菜鸟教程中给了很多的安装方法,我查阅的一些资料很多都是用的NPM安装,所以这里就用npm安装vue.js

安装nodejs与NPM

NPM :NPM 使用介绍
菜鸟的教程中,有很多很多有关NPM的用法,我这里不过多的说明,就说下如何用npm安装。
npm是Nodejs下的包管理器,功能非常强大,要想用npm,得先安装Nodejs,有关Nodejs的安装教程:Node.js 安装配置 我这里迅速过一下流程。
我们去官方下载Nodejs的安装包:Node.js 下载LTS(长期支持版本)版本的。
下载好后直接运行就行了。一直点击下一步就安装好了。中间有一个更改安装目录的,可以根据情况自行调整。
按照好之后,我们输入node -v可以查看安装的情况,如下图:
在这里插入图片描述
如果提示 node 不存在,就要去查看一下环境变量中是否存在:此电脑右键属性高级系统设置环境变量
找到path,点击编辑,找一下有没有nodejs的路径,如果没有可以重新安装一下,或者添加上。
在这里插入图片描述

安装Vue

安装完nodejs后,先来看一下npm能不能用,输入npm -v,查看版本。
在这里插入图片描述
然后,就可以安装Vue了,先用淘宝的镜像安装一下cnpm,然后 用cnpm更新一下npm,在命令行中输入以下代码:

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install npm -g

更新完之后,我们可以发现npm版本从6.14.13更新到了7.16.0,然后全局安装Vue。

cnpm install vue@next
cnpm install -g @vue/cli

输入vue --version如果可以看到版本就说明安装完成了。

创建项目

GUI界面

我们可以先调用GUI界面的vue(这个图形界面是3.0版本的,如果是2.0是不支持GUI版的)
关闭所有浏览器界面,在cmd中输入

npm config set registry https://registry.npm.taobao.org
vue ui

第一行代码是用来设置镜像源的,要不然会很慢,输入完第二句代码,会弹出来一个网页,如果没弹出来就用管理员权限运行cmd,然后再输入vue ui
网页出来之后,点击中上位置的创建,它会先读取文件目录结构,需要一些时间,稍等片刻。如果特别特别慢,可以重启一下电脑,然后再试一下。我喜欢把项目根目录放在F盘,所以我把项目根目录设置为F:\vue,然后点击下方的创建新项目
在这里插入图片描述
名称随意,把下方的Git关闭,点击下一步,然后选择手动,然后打开RouterVuex,关闭Linter/Formatter
在这里插入图片描述
然后点击下一步,这个界面中就一个选项,是询问是否打开 使用历实记录,打开它。然后下一步,然后创建项目,不保存预设
然后等它创建完就行了。
创建完成之后,我们还可以测试一下,点击左侧任务右侧点击运行。
在这里插入图片描述
运行完毕后,再点击右上角的输出,然后我们就可以看到两个网站,点击网站进入,如果界面是vue的欢迎页则说明成功。

IDEA

我的IDEA是IntelliJ IDEA 2020.1 x64版本的,我们打开IDEA,先安装vue插件 菜单栏FileSettingsPlugins搜索Vue,点击install,安装好之后重启IDEA。
在这里插入图片描述
重启完之后,导入刚才创建的项目FileClose Project关闭当前项目,然后在新界面中选择Open or Import,然后选择我们刚刚用GUI创建好的vue项目,路径是F:\vue\vuetest,导入。
vue是一个单页面,它的页面代码在srcapp.vue中,vue内置了一个服务器,我们可以用idea的终端启动它,打开IDEA的Terminal输入npm run serve然后弹出来两个网站,和我们用GUI点击启动之后的网站时一样的,想要退出,Ctrl+C就行了。

简单解释

vue是一个单页面,它只有一个页面,但是它会动态刷新app.vue界面的内容,我们看veiws文件夹下,有两个文件,一个是About.vue还有一个是Home.vue,这两个就对应主页面的两个小界面,当用户互交时,它会把小界面动态刷新到app.vue中,我们可以在<router-link to="/">Home</router-link>标签中查看小界面情况。to后面的就是映射的地址。
映射关系一般都是在routerindex.js下定义,简单的看一下语法:

  {
    path: '/',
    name: 'Home',
    component: Home
  }

path表示访问地址, component就表示项目中实际要映射的文件名,全称是Home.vue,同时注意最上边的导包问题。

Spring Boot

创建项目

IDEA已经给我们封装好了Spring Boot框架的基本结构,我们直接创建就行了,菜单栏FileNewProject,然后选择左侧的Spring Initializr然后点击Next。
在这里插入图片描述
下一个界面是配置项目的组、名称与环境,根据自己情况设计就行了,然后点击Next
下一个界面比较重要,是配置要添加的依赖。我添加了 Developer Tools下的LombokWeb下的Spring WebSQL下的Spring Data JPAMySQL Driver
在这里插入图片描述
然后在一个新的窗口打开,首先要修改的是配置文件,在srcmainresources下的application.properties文件,配置文件有两种格式一个是properties格式还有一个是yml格式。可以看这个博客了解差异:
application.properties与application.yml之间的区别
我这里用yml,将application.properties重命名为application.yml

spring:
  datasource:
    name: test  #数据库名
    url: jdbc:mysql://localhost:3306/test #url
    username: root  #用户名
    password: 123456  #密码
    driver-class-name: com.mysql.jdbc.Driver  #数据库链接驱动
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8181

配置了一些基本信息,然后项目创建到这里,前后端基本完成。

前后端交互

我在mysql中创建了一个person表,插入了3组数据,用来测试。
接下来实现前后端进行数据交互,将数据库中的数据显示出来,传到vue中。

前端

我们新建一个vue界面,在veiws下右键,Newvue components,起名为person,然后回车。
这里说一下,这个vue界面也可以创建在components文件夹下,最后能映射好就行。
vue代码:

<template>
    <div>
        <table>
            <tr>
                <td>学号</td>
                <td>姓名</td>
            </tr>
        </table>
        <tr v-for="item in people">
            <td>{{item.num}}</td>
            <td>{{item.name}}</td>
        </tr>
    </div>
</template>

<script>
    export default {
        name: "person",
        data(){
            return{
                msg:'10 粒子',
                people:[
                    {
                        num:1,
                        name:'麻子'
                    },
                    {
                        num:2,
                        name:'合流'
                    },
                    {
                        num:3,
                        name:'小莲'
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>

简单说明,<template>对应HTML代码,不一样的是,它其中只能有一个div作为根,

<script>对应js代码 ,<style>对应css代码。
我在js中创建了3个假数据,为了更好的调试。
然后将这个界面配置到映射好
进入routerindex.js下,加入以下代码

//导入
import person from '../views/person.vue'
//在const routes中加入
  {
    path: '/person',
    component: person
  }

然后就可以http://localhost:8080/person访问到效果了。

后端

前端搞定后,就可以让后端去访问数据了。
新建三个包controllerentityPersonRepositoty
在这里插入图片描述

第一个是用来和前端映射的,一个是用来和数据库的表格对接的,还有一个是用来接受查询结果的

Person类源代码

package com.ronglin.test.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.Id;

@Entity
@Data
public class Person {
    @Id
    private String Num;
    private String Name;

}

简单的解释一下,@Entity标签是表示它是一个数据库实体,@Data标签会自动设置getter和setter方法,@Id标签表示属性

再来看PersonRepository接口


package com.ronglin.test.repository;

import com.ronglin.test.entity.Person;
import org.springframework.data.jpa.repository.JpaRepository;


public interface PersonRepository extends JpaRepository<Person,Integer>  {

}

直接继承JpaRepository<T,T>接口就行了,第一个泛型是数据库类型,第二个泛型是索引key

然后就是PersonHandler类

package com.ronglin.test.controller;

import com.ronglin.test.entity.Person;
import com.ronglin.test.repository.PersonRepository;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

@RestController
@RequestMapping("/person")
public class PersonHandler {

    @Autowired
    private PersonRepository personRepository;

    @GetMapping("/findAll")
    public List<Person> findAll(){
        return personRepository.findAll();
    }

}

然后我们找到javatestApplication类,右键 运行就行了。
我们到浏览器中,输入http://localhost:8181/person/findAll就可以查到后端反馈的内容了。

对接

回到前端,先按Ctrl+C停掉Vue,然后在终端中输入vue add axios先安装一个组件
然后再回到后端,我们需要解决一下跨域问题,因为请求的是8181,而前端是8080.
在后端com.ronglin.test下新建一个包,叫config,新建一个类叫CorsConfig
代码如下

package com.ronglin.test.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry)
    {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");

    }
}

然后重新启动后端,前端在perso.vue中js代码中加入以下代码将数据显示出来。

created() {
            const _this = this
            axios.get('http://localhost:8181/person/findAll').then(function (resp) {
                _this.people = resp.data
            })
        }

在这里插入图片描述
成功了!!!

总结

有点难,框架不愧是框架,封装的太好了,用起来头昏眼花。=w=

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值