springboot+vue+mysql实现前后端分离小白教程
后端向前端提供数据

1.创建vueproject 简单写一个展示页面

vue init webpack projectName
https://www.cnblogs.com/alizhi/p/12557224.html

2.MySQL创建数据库 表 插入数据

3.将idea与MySQL进行链接

参考链接:https://blog.csdn.net/plpldog/article/details/80683832

4.创建springproject

1.配置yml文件

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/jw
    username: root
    password:
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8181

添加实体package 添加实体类 用于绑定数据库表
@entity 默认类名小写后即为表名

3.
创建接口 继承 data jpa
使用该接口中方法

4.对写好的接口进行单元测试 junit5


5.创建controller

6.测试controller数据能否成功获取


此时前端页面,后端数据已经建好,只需要将二者链接即可

7.后端解决跨域

5.前端vueproject安装插件并访问后端接口数据

npm install axios
npm install --save axios vue-axios
这里楼主额外插入一个axios.js文件

"use strict";

import Vue from 'vue';
import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

Plugin.install = function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)

export default Plugin;

引入mian.js

2.前端访问数据