手把手教你实现 SpringBoot与Vue整合开发前后端分离简单例子详解

目录 1. 搭建vue的环境安装node.js 2. 利用IDEA搭建前端vue项目3. 利用IDEA搭建后端SpringBoot项目4. 测...

黑板与粉笔

4010人浏览 · 2020-01-30 18:52:57

黑板与粉笔 · 2020-01-30 18:52:57 发布

1. 搭建vue的环境安装node.js

2. 利用IDEA搭建前端vue项目

3. 利用IDEA搭建后端SpringBoot项目

4. 测试前后端交互

PART

安装node.js

安装Node.js，到Node.js官网（https://nodejs.org/en/）下载Node.js后安装Node.js。安装Node.js时就已经自带了包管理器npm。

下载Node.js如上操作下载完成后安装（直接按默认方式安装就行）

安装完成后打开cmd 输入下面的命令查看是否成功安装

node -v
npm -v

如果显示版本号即证明Node.js安装成功

PART

利用IDEA搭建前端vue项目

1 .打开idea,新建项目
Create New Project > Static Web>填写project name和选择保存的工作空间>Finish

2.安装vue脚手架工具

首先安装cnpm，打开idea的Terminal 如下图，类似cmd窗口

3.输入以下的命令

npm i -g cnpm --registry=https://registry.npm.taobao.org

4.等待下载完成以后，继续安装vue的脚手架工具，在Terminal内继续输入以下命令

npm i -g vue-cli
测试是否安装成功：
vue -V

5.脚手架安装完成后，初始化包结构,继续输入其中vuedemo为项目的名称

vue init webpack vuedemo

输入以上的命令后需要对项目进行初始化方式如下图

6.安装与使用axios

vue.js官方推荐我们使用axios来发送异步请求。
安装axios
在命令行内输入
npm install axios -S
进行安装。
安装完成后在main.js中使用axios，

在main.js中加入以下代码
import axios from 'axios'
Vue.prototype.$axios = axios
这样就可以在全局中使用axios做请求了。
我们例子就可以使用axios来请求后台了。

7.前后端分离解决跨域问题

在config目录下的index.js中配置proxyTable

上图箭头中的代码配置成以下

proxyTable: {
      '/login': {
        target: 'http://localhost:8081',//这里是后端SpringBoot的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '/login': '/login'
        }
      }
},

8.安装iview （iview是一套基于Vue.js的高质量 UI 组件库）

npm install --save iview

9.在main.js中加入iview

加入的代码为

import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)

如果main.js代码报错，是因为没有支持ES6的语法，（alt+回车可以转换为ES6的语法）

10.在components下创建index.vue 代码如下里面应用了iview的组件与axios来向后端发送异步请求

<template>
  <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
    <FormItem prop="username">
      <Input type="text" v-model="formInline.username" placeholder="Username">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="formInline.password" placeholder="Password">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
    </FormItem>
  </Form>
</template>
<script>
    export default {
        data() {
            return {
                formInline: {
                    username: '',
                    password: ''
                },
                ruleInline: {
                    username: [
                        {required: true, message: 'Please fill in the user name', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: 'Please fill in the password.', trigger: 'blur'},
                        {
                            type: 'string',
                            min: 6,
                            message: 'The password length cannot be less than 6 bits',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let data = { 'username':String(this.formInline.username), 'password':String(this.formInline.password)};
                        this.$axios({
                            url: '/login',//请求的地址
                            method: 'post',//请求的方式
                            params: data//请求的表单数据
                        }).then(res => {
                            alert(res.data);
                            console.info('后台返回的数据', res.data);
                        }).catch(err => {
                            console.info('报错的信息', err.response.message);
                        });
                    } else {
                        this.$Message.error('表单校验失败!');
                    }
                })
            }
        }
    }
</script>

11. 创建index.vue完成后去修改app.vue文件。话不多说，直接上代码。当然，代码内具体的语法需要你自己去了解。

<template>
  <div id="app">
    <index></index>
  </div>
</template>
<script>
    import index from '@/components/index'
    export default {
        name: 'App',
        components: {
            'index': index
        },
        data() {
            return {}
        }
    }
</script>
<style>
  #app {
    text-align: center;
    margin-top:400px ;
  }
</style>

12.现在前端的所有任务已经完成接下来启动vue项目

输入以下命令启动vue项目
cd vuedemo
npm install
npm run dev

PART

利用IDEA搭建后端

1. 新建一个新的spring initializr工程，设置项目名如图下 在第三步的时候选择web

具体的创建步骤如下图从左到右

2.配置端口号前端是8080端口为了避免冲突后端选8081端口在项目的application.properties中配置以下代码

server.port=8081

3.在java根目录下创建controller文件夹并创建index.class类如下图

在index.class的为以下代码

package com.heibanyufenbi.springbootvue.controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;


@Controller
public class index {


    @ResponseBody
    @PostMapping(value = "/login",produces = "application/json")
    public String Login(HttpServletRequest request) {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.printf("用户名   " + username+"\n");
        System.out.printf("用户密码    " + password+"\n");
        return "恭喜登录成功";
    }
}

4.启动SpringBoot项目

PART

测试前后端交互

前面都介绍了如何启动Vue项目与SpringBoot项目分别启动后就可以测试了

如上图前端提交数据后接收到了后端返回的“恭喜登录成功”

后端也接收到了前端发来的数据用户名与密码

SpringBoot与Vue整合开发最简单的例子就是这样啦。

回复获取资源

关注后回复整合前后端

获取本教程的前端Vue与后端SpringBoot源码

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^