처음하는 vue2 + spring boot conroller 연동 1

결과

아래와 같이 항목을 입력후 로그인 버튼 클릭시  vue 와 java 연동을 보여준다.

frontend => backend 연동

vue 와 springboot 기본 설치와 설정 되어 있어야 한다.

안되어 있으면 아래 클릭하여 vue 와 spring boot 연동 먼저.

https://trytoso.tistory.com/1579?category=988314 

인텔리제이(intellij) 스프링 부트(spring boot) vue.js 연동 8080 포트 방법

 

vue

router/index.js

/login 라우터 설정한다.

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'
        )
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(
        /* webpackChunkName: "login" */ '../views/Login.vue'
        )
  },
]

const router = new VueRouter({
  mode: "history",
  routes
})

export default router

/views/Login.vue

/login 접속시 화면에 보여줄 vue 설정 + submit 클릭시 backEnd 에 전달

<template>
    <v-container fluid fill-height>
        <v-layout align-center justify-center>
            <v-flex xs12 sm8 md4>
                <v-card class="elevation-12">
                    <v-toolbar dark color="primary" flat>
                        <v-toolbar-title>안녕하세요?</v-toolbar-title>
                        <v-spacer></v-spacer>
                    </v-toolbar>
                    <v-card-text>
                        <v-form ref="signForm">
                            <v-text-field
                                    prepend-icon="mdi-account"
                                    v-model="form.username"
                                    :rules="username_rule"
                                    label="아이디"
                                    type="text"
                            ></v-text-field>
                            <v-text-field
                                    prepend-icon="mdi-lock"
                                    v-model="form.password"
                                    :rules="password_rule"
                                    label="비밀번호"
                                    type="password"
                                    @keyup.enter="signIn"
                            ></v-text-field>
                        </v-form>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="primary" @click="signIn">로그인</v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    import http from "../http-common";

    export default {
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                },
                username_rule: [
                    v => !!v || '아이디를 입력해 주세요',
                    v => !(v && v.length <= 4) || '아이디를 입력해 주세요'
                ],
                password_rule: [
                    v => !!v || '비밀번호를 입력해 주세요',
                    v => !(v && v.length <= 4) || '비밀번호를 입력해 주세요'
                ]
            }
        },

        methods: {
            signIn() {
                const validate = this.$refs.signForm.validate()
                if (validate) {
                    http.post("/login", this.form)
                    .then(res=>{
                        console.log(res)
                    })
                    .catch(e=>{
                        console.log(e);
                    })
                 }
            }
        },

    }
</script>

User.java

package com.example.demo.domain;

import lombok.*;
import lombok.extern.java.Log;
import org.apache.ibatis.type.Alias;

@Data
@Alias("User")
public class User {
    private String username;
    private String password;
}

UserController.java

package com.example.demo.web;

import com.example.demo.domain.User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.Map;

@RestController
public class UserController {

    @PostMapping(value = "/login")
    public Map<String, Object> postLogin(@RequestBody User user, HttpSession session) {
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put(">>>result", "ok");
        //session.setAttribute(">>>username", user.getUsername() );
        resultMap.put(">>>username", user.getUsername() );
        return resultMap;
    }
}

결과