SpringBoot项目整合Vue

一、首先需要安装vue所需环境以及基本项目架构（自行百度）

vue项目架构如图：

 

二、需要改动的页面 

 App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
//此处需要新增
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 负责路由的js文件：index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test'
import loginUI from '@/components/login'
import success from '@/components/success'
import axios from 'axios'

Vue.prototype.$http = axios
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
    	path: '/test',
      name: 'test',
      component: test
    },
    {
    	path: '/login',
      name: 'login',
      component: loginUI
    },
    {
    	path: '/success',
      name: 'success',
      component: success
    }
  ]
})

HelloWorld页面：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="go">点我跳转</button>
    <button @click="login">点我登录</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg: '你好 vue'
    }
  },
  methods:{
    go(){
      console.log("这是测试")
      this.$router.push({
          path: '/test'
      })
    },
    login(){
      this.$router.push({ 
        path: '/login'
      })
    }
  }
}
</script>

<style>
</style>

test.vue

<template>
	<div>
    <h2>这是test测试页面</h2>
	<button @click="back">点我返回</button>
	</div>
	
</template>
 
<script>
export default {
  methods:{
  	back(){
  		this.$router.push('/')
  	}
  }
}
</script>

login.vue

<template>
    <table id="loginUI">
    <tr>
      <td>用户名</td>
      <td><input type="text" v-model="username"></td>
    </tr>
    <tr>
      <td>密码</td>
      <td><input type="password" v-model="password"></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" @click="login" value="提交"></td>
    </tr>
  </table>
</template>
 
<script>
import qs from 'qs'
export default {
  data(){
    return {
      username:"",
      password:""
    }
  },
  methods:{
    login(){
      var that=this;
      console.log(that.username+":"+that.password)  
      var user={
        username:that.username,
        password:that.password
      } 
      this.$http.post('http://localhost:8080/wx-job/user/login',qs.stringify(user))
      .then(function (params) {
        console.log(params)
        console.log(params.status)
        if(params.status===200){
          that.$router.push({
          path:'/success'
        })
        }
      })
      .catch(function (reason) {
        console.log(reason)
      })
    }
  }

}
</script>

<style>
#loginUI {
  margin:0 auto;
}
</style>

success.vue

<template>
	<div>
    成功！
    <router-link to="/">返回</router-link>
	</div>
	
</template>

三、启动

导入axios模块：npm install axios 

运行项目： npm run dev

四、后端准备

package com.wx.wxjob.controller;

import com.wx.wxjob.entity.User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * FileName: UserController
 * Author: pengyd
 * Date: 2019/12/31
 * function:
 */
@RequestMapping(value = "/user")
@RestController
public class UserController {


    @PostMapping("/login")
    public boolean login(User user){
        System.out.println(user);
        return true;
    }

    @GetMapping("/hello")
    public String hello(){
        return "hello";
    }
}

 五、拦截器

 

package com.wx.wxjob.Interceptors;

import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Component
public class ProcessInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
        httpServletResponse.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
        httpServletResponse.setHeader("X-Powered-By","Jetty");
        String method= httpServletRequest.getMethod();
        if (method.equals("OPTIONS")){
            httpServletResponse.setStatus(200);
            return false;
        }
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {
    }

    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
    }
}

package com.wx.wxjob.Interceptors;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new ProcessInterceptor()).addPathPatterns("/**");
    }
}