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

原创已于 2022-01-26 14:22:38 修改 · 2.5k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue #spring boot

于 2021-06-07 18:00:47 首次发布

WEB 专栏收录该内容

8 篇文章

订阅专栏

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

前言

闲来无事，想学一些框架，查了一些资料，说用前后端分离开发比较主流，同时比较热门的是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关闭，点击下一步，然后选择手动，然后打开Router和Vuex，关闭Linter/Formatter

然后点击下一步，这个界面中就一个选项，是询问是否打开使用历实记录，打开它。然后下一步，然后创建项目，不保存预设
然后等它创建完就行了。
创建完成之后，我们还可以测试一下，点击左侧任务右侧点击运行。
在这里插入图片描述
运行完毕后，再点击右上角的输出，然后我们就可以看到两个网站，点击网站进入，如果界面是vue的欢迎页则说明成功。

IDEA

我的IDEA是IntelliJ IDEA 2020.1 x64版本的，我们打开IDEA，先安装vue插件菜单栏File–Settings–Plugins搜索Vue，点击install，安装好之后重启IDEA。
在这里插入图片描述
重启完之后，导入刚才创建的项目File–Close Project关闭当前项目，然后在新界面中选择Open or Import，然后选择我们刚刚用GUI创建好的vue项目，路径是F:\vue\vuetest，导入。
vue是一个单页面，它的页面代码在src–app.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后面的就是映射的地址。
映射关系一般都是在router–index.js下定义，简单的看一下语法：

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

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

Spring Boot

创建项目

IDEA已经给我们封装好了Spring Boot框架的基本结构，我们直接创建就行了，菜单栏File–New–Project，然后选择左侧的Spring Initializr然后点击Next。
在这里插入图片描述
下一个界面是配置项目的组、名称与环境，根据自己情况设计就行了，然后点击Next
下一个界面比较重要，是配置要添加的依赖。我添加了 Developer Tools下的Lombok、Web下的Spring Web、SQL下的Spring Data JPA和MySQL Driver
在这里插入图片描述
然后在一个新的窗口打开，首先要修改的是配置文件，在src–main–resources下的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下右键，New–vue 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个假数据，为了更好的调试。
然后将这个界面配置到映射好
进入router–index.js下，加入以下代码

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

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

后端

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

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

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();
    }

}

然后我们找到java–testApplication类，右键运行就行了。
我们到浏览器中，输入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
            })
        }

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