Vue+SpringBoot实战 前后端联调 Demo

前端

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

1.创建vue项目（已安装node.js和vue的脚手架cli）

在D盘新建文件夹Vue-SpringBoot
在此处进入命令行
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191211153003220.png
输入命令vue init webpack vue_springboot_demo，

然后一路回车。

等待项目构建完毕
进入项目 cd D:\workspace\vue_springboot_demo
加载项目所需的依赖包，输入命令npm install
加载axios,输入npm install --save axios

启动项目：npm run dev

在浏览器输入localhost:8080 效果如下：
将vue_springboot_demo拖到hbuilderX中

2.访问后端

在HelloWord.vue增加访问后端内容

3.前端相关配置

(1)设置反向代理

修改 src\main.js 代码如下：

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

// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 注册axios
Vue.prototype.$axios = axios

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

(2)跨域支持

在 config\index.js 中，找到 proxyTable 位置，

添加以下内容

proxyTable: {
      '/api': {
        target: 'http://localhost:8443',
        changeOrigin: true
      }
    },

断开服务器Ctrl + C 然后Enter
运行服务器 npm run dev

后端

4.创建SpringBoot项目

创建一个springboot项目并运行起来
第一次创建需要等待下载jar依赖
在application.properties文件中添加 server.port=8443
运行项目：
浏览器输入：localhost:8443,成功页面如下：

5.开发后端

在com.xiaoruiit.springbootdemo下新建包package controller,在包下新建类TestConnectController。内容为：

package com.xiaoruiit.springbootdemo.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestConnectController {

    @GetMapping(value = "api/test")
    public String test(){
        return "hxr";
    }

	//@CrossOrigin 后端开启跨域访问
    @CrossOrigin
    @PostMapping(value = "/api/getdata")
    public String getdata(){
        return "hxr";
    }
}

浏览器输入localhost:8443/api/test，可获取hxr。

浏览器输入localhost:8080，点击获取数据，浏览器控制台打印出hxr