Springboot+Vue整合笔记【超详细】

| 作者：江夏
| 微信公众号：1024笔记
| 知乎：https://www.zhihu.com/people/qing-ni-chi-you-zi-96
| GitHub：https://github.com/JiangXia-1024?tab=repositories

Part 1

目前很多公司的开发模式都是前后的分离的分工模式，这样能够做到各司其职，提高开发的效率。之前也有文章介绍了springboot项目和vue创建一个简单的前端项目，这篇文章则是将springboot和vue进行简单的整合，实现一个简单的登录页面。

最后本文的源码都会同步至github，欢迎下载使用和star！

Part 2

先介绍下本文的开发工具，后端使用的java的版本是jdk1.8，框架是springboot，开发工具是idea，前端则是使用vue.js，开发工具是vs code。

本文的前提条件是需要对springboot和vue.js 有个一定简单的了解。

关于如何使用idea创建一个springboot项目可以参考：SpringBoot入门：使用IDEA和Eclipse构建第一个SpringBoot项目。

如何创建一个vue前端项目可以参考:Vue学习笔记(一)：从零开始创建一个Vue前端项目。

一、后端Springboot项目开发：

这里先准备下数据，创建一个user表，并插入数据，sql如下：

CREATE TABLE `user` (
 `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
 `email` varchar(255) NOT NULL COMMENT '邮箱',
 `password` varchar(255) NOT NULL COMMENT '密码',
 `username` varchar(255) NOT NULL COMMENT '姓名',
 PRIMARY KEY (`id`),
 UNIQUE KEY `email` (`email`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;


INSERT INTO `user` VALUES ('1', '1@qq.com', '123456', '张三');
INSERT INTO `user` VALUES ('2', '2@qq.com', '234567', '李四');
INSERT INTO `user` VALUES ('3', '3@qq.com', '345678', '王五');

首先创建一个springboot项目，然后在pom文件中引入相关依赖：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.2.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.springboot</groupId>
    <artifactId>springbootdemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springbootdemo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>