SpringBoot+Vue前后端分离的 HelloWorld案例

前言

关于 Vue 项目的创建，请参考：

1. Vue UI 创建并运行前端项目
2. idea 导入 Vue 项目并运行（超级详细步骤）
3. Vue项目中创建vue文件并运行（开发工具：idea）

前台页面部分

当您参考完这前面的 3 篇博客，里边的 User.vue 文件的内容，和这次练习的内容相差不大。只是做了些许更改。

User.vue

<template>
    <div>
      <table>
        <tr>
          <th>编号th>
          <th>姓名th>
          <th>生日th>
          <th>备注th>
        tr>
        
          <td>{{user.id}}td>
          <td>{{user.name}}td>
          <td>{{user.birthday}}td>
          <td>{{user.note}}td>
        tr>
      table>
    div>
template>

<script>
// vue add axios 先增加插件，使用命令行操作
// 导入
import axios from 'axios'
export default {
  data () {
    return {
      users: [
        {
          id: '1001',
          name: '小冯',
          birthday: '2020-02-24',
          note: '太帅了'
        },
        {
          id: '1002',
          name: '小王',
          birthday: '2019-03-23',
          note: '漂亮'
        }
      ]
    }
  },
  created () {
  	// 将当前对象赋值给 _this
    const _this = this;
    // 发出请求：这里的 URL 是 SpringBoot项目的一个可用路径
  	axios.get('http://localhost:8088/user/findAll').then(function (resp) {
  	// 响应结果：将返回的数据赋值给 users 这个变量
      _this.users = resp.data
    })
  }
}
script>

<style scoped>
  table {
    border: 1px solid red;
    color: forestgreen;
    background-color: burlywood;
  }
style>

后台部分

yml 文件

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/vue?serverTimezone=UTC
    username: root
    password: root

  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8088

pom.xml

<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.0modelVersion>
    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.2.4.RELEASEversion>
        <relativePath/> 
    parent>
    <groupId>org.fenggroupId>
    <artifactId>springboot_vue_demoartifactId>
    <version>0.0.1-SNAPSHOTversion>
    <name>springboot_vue_demoname>
    <description>Demo project for Spring Bootdescription>

    <properties>
        <java.version>1.8java.version>
    properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-data-jpaartifactId>
        dependency>
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>

        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
            <optional>trueoptional>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
            <scope>testscope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintagegroupId>
                    <artifactId>junit-vintage-engineartifactId>
                exclusion>
            exclusions>
        dependency>
    dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
            plugin>
        plugins>
    build>

project>

java 类

CorsConfig

package org.feng.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Created by Feng on 2020/3/4 16:40
 * CurrentProject's name is springboot_vue_demo
 * 解决跨域问题
 * @author Feng
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

User

package org.feng.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.Id;
import java.time.LocalDate;

/**
 * Created by Feng on 2020/3/4 14:01
 * CurrentProject's name is springboot_vue_demo
 * 实体类
 * @author Feng
 */
@Entity
@Data
public class User {
    @Id
    private Integer id;
    private String name;
    private LocalDate birthday;
    private String note;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public LocalDate getBirthday() {
        return birthday;
    }

    public void setBirthday(LocalDate birthday) {
        this.birthday = birthday;
    }

    public String getNote() {
        return note;
    }

    public void setNote(String note) {
        this.note = note;
    }
}

UserRepository

package org.feng.repository;

import org.feng.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

/**
 * Created by Feng on 2020/3/4 14:19
 * CurrentProject's name is springboot_vue_demo
 * @author Feng
 */
public interface UserRepository extends JpaRepository<User, Integer> {
}

UserController

package org.feng.controller;

import org.feng.entity.User;
import org.feng.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * Created by Feng on 2020/3/4 14:31
 * CurrentProject's name is springboot_vue_demo
 * @author Feng
 */
@RestController
@RequestMapping("/user")
public class UserController {

    private final UserRepository userRepository;


    @Autowired
    public UserController(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

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

SpringbootVueDemoApplication

package org.feng;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringbootVueDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootVueDemoApplication.class, args);
    }
}

案例测试

user 表的信息

启动步骤

先启动 Vue 项目；

启动 SpringBoot 项目；
直接运行。

然后是访问 User 页面，查看结果。

至此，一个前后端分离的 HelloWorld就完成了！