vuejs之vue和springboot后端进行通信

一、新建一个vue项目，建立好后的相关文件

查看一下新建好的vue项目的结构：

当前各个文件中的内容：

App.vue：主入口

<template>

  <div id="app">

    <div id="nav">

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link>

    </div>

    <router-view/>

  </div>

</template>

<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;

}

</style>

main.js：Vue.config.productionTip用于切换是生产环境还是开发环境。这里创建Vue对象的时候同时关联上了App.vue中的id名为app的div标签。引入路由router的js文件以及存储数据的store。

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')

router/index.js：这里定义路由对应的模板。有两种方式，一种是在开头先引入，例如Home.vue。另一种是先不引入，之后在component中引入。

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [

  {

    path: '/',

    name: 'Home',

    component: Home

  },

  {

    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')

  }

]

const router = new VueRouter({

  mode: 'history',

  base: process.env.BASE_URL,

  routes

})

export default router

store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

  },

  mutations: {

  },

  actions: {

  },

  modules: {

  }

})

views/About.vue

<template>

  <div class="about">

    <h1>This is an about page</h1>

  </div>

</template>

views/Home.vue：这里面可以将component中的vue文件进行引入。

<template>

  <div class="home">

    <img alt="Vue logo" src="../assets/logo.png">

    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

export default {

  name: 'Home',

  components: {

    HelloWorld

  }

}

</script>

当前效果是：

点击About：

就将内容切换到了About.vue。

二、自己定义页面并进行路由

在views下新建一个Test.vue

<template>

  <!--只允许有一个根节点-->

  <div class="test">

    <table>

      <tr>

        <td>编号</td>

        <td>姓名</td>

        <td>年龄</td>

        <td>性别</td>

        <td>邮箱</td>

        <td>爱好</td>

        <td>自我介绍</td>

      </tr>

      <tr v-for="(item, index) in users"

          :key="index">

        <td>{{item.id}}</td>

        <td>{{item.username}}</td>

        <td>{{item.age}} </td>

        <td>{{item.gender}}</td>

        <td>{{item.email}}</td>

        <td>{{item.hobby}}</td>

        <td>{{item.introduce}}</td>

      </tr>

    </table>

  </div>

</template>

<script>

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;

      })

  }

}

</script>

<style scoped>

</style>

在router/index.js中

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

import Test from '../views/Test.vue'

Vue.use(VueRouter)

const routes = [

  {

    path: '/test',

    name: 'Test',

    component: Test,

  },

  {

    path: '/',

    name: 'Home',

    component: Home

  },

  {

    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')

  }

]

const router = new VueRouter({

  mode: 'history',

  base: process.env.BASE_URL,

  routes

})

export default router

在App.vue中

<template>

  <div id="app">

    <div id="nav">

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link> |

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

    </div>

    <router-view/>

  </div>

</template>

<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;

}

</style>

三、新建一个springboot项目，勾选上lombok、web、jpa、mysql

（1）配置连接数据库以及jpa相关：后盾使用8181端口，前端使用8080端口。

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

（2）数据库相关设计

（3）新建一个entity包用于存放实体类、一个repository包用于存放jpa类，一个config包用于存放后端和前端跨域交互配置，一个controller。

User.java

package com.gong.springbootvue.entity;

import lombok.Data;

import javax.persistence.Entity;

import javax.persistence.Id;

@Entity

@Data

public class User {

    @Id

    private Integer id;

    private String username;

    private Integer age;

    private Integer gender;

    private String email;

    private String hobby;

    private String introduce;

}

Entity用于标识是一个实体类，Data用于自动生成getter和setter等方法，Id用于标识主键。

UserRepository.java

package com.gong.springbootvue.repository;

import com.gong.springbootvue.entity.User;

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository  extends JpaRepository<User,Integer> {

}

继承了JpaRepository之后就会有相应的增删改查方法了，不需要自己写，第一个泛型是实体类类型，第二个泛型是主键类型。

UserController.java

package com.gong.springbootvue.controller;

import com.gong.springbootvue.entity.User;

import com.gong.springbootvue.repository.UserRepository;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller

@RequestMapping("/user")

public class UserController {

    @Autowired

    UserRepository userRepository;

    @ResponseBody

    @RequestMapping("/findAll")

    public List<User> getAll(){

        return userRepository.findAll();

    }

}

VueConfig.java

package com.gong.springbootvue.config;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration

public class VueConfig implements WebMvcConfigurer{

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")

                .allowedOrigins("*")

                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")

                .allowCredentials(true)

                .maxAge(3600)

                .allowedHeaders("*");

    }

}

四、分别启动后端服务和前端服务

先看下后端是否能正确运行：

再看下前端：

说明前端与后端交互成功。

总结：

后端中要配置与前端不同的端口，同时定义一个配置类用于配置与Vue进行交互。

前端使用axios发送请求获取后端传过来的json格式的数据，相关数据可以赋给data中的数据。使用created()方法在刷新页面时就发送请求。

巴特西

vuejs之vue和springboot后端进行通信

最新文章

热门文章