先建立一个前端vue项目：

然后在views下新建一个User.vue:
先手动填入一些假的数据

<template>
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>用户名</td>
                <td>密码</td>
                <td>权限</td>
            </tr>
            <tr v-for="item in user">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.pwd}}</td>
                <td>{{item.perms}}</td>
            </tr>
        </table>
        {{msg}}
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
                msg: 'hello vue',
                user: [
                    {
                        id: 1,
                        name: '清欢',
                        pwd: 123,
                        perms: 1
                    },
                    {
                        id: 2,
                        name: '本体',
                        pwd: 456,
                        perms: 2
                    },
                    {
                        id: 3,
                        name: '人间',
                        pwd: 789,
                        perms: 3
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>

然后在路由中（index.js）进行配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from "../views/User";

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
    /* {
       path: '/about',
       name: 'About',
      component: About
    },  下面是一种新的写法   新的写法不用在上面写 import
    */
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/user',
    component: User
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

---

创建一个springboot项目：

配置连接：
application.yml;

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/ssm
    username: benti
    password: 80238023
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
        #打印SQL语句  并且 格式化 让他换行  不会全部一行显示
server:
  port: 8181

创建实体类：
com.qinghuan.springboottest.entity.User：

package com.qinghuan.springboottest.entity;


import lombok.Data;

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

@Entity(name = "user")
@Data
//实现和表的绑定  name默认是把类名首字母小写 对应表名
public class User {

    @Id
    private Integer id;
    private String name;
    private String pwd;
    private String perms;
}

创建一个接口：

.继承JpaRepository<实体类类型，主键类型>

com.qinghuan.springboottest.repository.UserRepository：

package com.qinghuan.springboottest.repository;

import com.qinghuan.springboottest.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User,Integer> {
}

测试连接是否成功：
com.qinghuan.springboottest.repository.UserRepositoryTest：

@SpringBootTest
class UserRepositoryTest {

    @Autowired
    private UserRepository userRepository;

    @Test
    void findAll() {
        System.out.println(userRepository.findAll());
    }
}

成功后 就可以写控制类：
com.qinghuan.springboottest.controller.UserController；

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserRepository userRepository;

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

在vue中请求ajax：

安装axios组件：

vue add axios

在use.vue中使用初始化方法created()：

created() 
//这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。
  //一般可以在created函数中调用ajax获取页面初始化所需的数据。

<template>
    <div>
        <table>
           ..................
        </table>
        {{msg}}
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
               ..............
            }
        },
        created() {
   //这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。
   //一般可以在created函数中调用ajax获取页面初始化所需的数据。
   
			axios.get('http://localhost:8181/user/findAll').then(function (resq) {
		    console.log(resq);
 		 })
    }
</script>
<style scoped>
</style>

此时 console中报错 CORS 跨域问题

在springboot中添加配置类

com.qinghuan.springboottest.config.CrosConfig：

实现接口WebMvcConfigurer
重写addCorsMappings方法

//解决跨域问题 配置类
@Configuration
public class CrosConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

然后将数据赋予过去：

<template>
    <div>
        <table>
           ..................
        </table>
        {{msg}}
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
               ..............
            }
        },
        created() {
			// const _this = this 
	//方法一： 使用定义一个_this 获取当前this(当前vue对象) 然后 下面使用
            // axios.get('http://localhost:8181/user/findAll').then(function (resq) {
            //     console.log(resq);
            //     _this.user = resq.data
  //     //resq.data :就是我们的数据
            // })

   //方法二 使用箭头函数
            axios.get('http://localhost:8181/user/findAll').then((resq) => {
                console.log(resq);
                this.user = resq.data
            })
 		 })
    }
</script>
<style scoped>
</style>