vuejs之vue和springboot后端进行通信

<template>
  div id="app">
    ="nav">
      router-link to="/">Home</router-link> |
      ="/about">Aboutdivrouter-view/>
  >
>

style
#app {
  font-family: Avenir,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
>

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,store,render: h => h(App)
}).$mount('#app')

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',name: 'Home''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')
  }
]

const router =  VueRouter({
  mode: 'history'default router

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default  Vuex.Store({
  state: {
  },mutations: {
  },actions: {
  },modules: {
  }
})

class="about"h1>This is an about page>

="home"img alt="Vue logo" src="../assets/logo.png"HelloWorld msg="Welcome to Your Vue.js App"script
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',components: {
    HelloWorld
  }
}
>

<!--只允许有一个根节点-->
  ="test"tabletr>
        td>编号>姓名>年龄>性别>邮箱>爱好>自我介绍tr v-for="(item,index) in users"
          :key="index">{{item.id}}>{{item.username}}>{{item.age}} >{{item.gender}}>{{item.email}}>{{item.hobby}}>{{item.introduce}}
export default {
  name: "Book",data () {
    return {
      msg: "hello world",users: {},}
  },created () {
    const that = this;
    axios.get('http://localhost:8181/user/findAll/')
      .then(function (response) {
        console.log(response);
        that.users = response.data;
      })
  }
}
style scoped>

import Vue from 'vue'
import Home from '../views/Home.vue'
import Test from '../views/Test.vue' [
  {
    path: '/test',name: 'Test',component: Test,},
  {
    path: '/'default router

 |
      <router-link to="/test">Test</router-link>
    >

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test
    username: root
    password: 123456
    driver-class-name: com.mysql.jdbc.Driver
  jpa:
    #控制台显示SQL
    show-sql: true
    properties:
     hibernate:
      format_sql: true
server:
  port: 8181

package com.gong.springbootvue.entity;

import lombok.Data;

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

@Entity
@Data
public  User {
    @Id
    private Integer id;
     String username;
     Integer age;
     Integer gender;
     String email;
     String hobby;
     String introduce;

}

 com.gong.springbootvue.repository;

 com.gong.springbootvue.entity.User;
 org.springframework.data.jpa.repository.JpaRepository;

interface UserRepository  extends JpaRepository<User,Integer> {
}

 com.gong.springbootvue.controller;

 com.gong.springbootvue.repository.UserRepository;
 org.springframework.beans.factory.annotation.Autowired;
 org.springframework.stereotype.Controller;
 org.springframework.web.bind.annotation.RequestMapping;
 org.springframework.web.bind.annotation.ResponseBody;

 java.util.List;

@Controller
@RequestMapping("/user")
 UserController {

    @Autowired
    UserRepository userRepository;

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

}

 com.gong.springbootvue.config;

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

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