zoukankan      html  css  js  c++  java
  • 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()方法在刷新页面时就发送请求。

  • 相关阅读:
    How to convert VirtualBox vdi to KVM qcow2
    (OK)(OK) adb -s emulator-5554 shell
    (OK)(OK) using adb with a NAT'ed VM
    (OK) How to access a NAT guest from host with VirtualBox
    (OK) Creating manually one VMs from an existing VDI file in CLI (VBoxManage) in Fedora 23
    (OK)(OK) Creating VMs from an existing VDI file in CLI (VBoxManage) in Fedora 23
    (OK) Creating_VMs_from_an_existing_VDI_file.txt
    (OK) Creating VMs from an existing VDI file —— in OS X
    (OK) install_IBM_SERVER.txt
    (OK) install chrome & busybox in android-x86_64 —— uninstall chrome
  • 原文地址:https://www.cnblogs.com/xiximayou/p/12336033.html
Copyright © 2011-2022 走看看