想快速搭建VUE+SpringBoot前后端分离项目，看着一篇就对了（Windows）

VUE部分

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

1.安装Node

百度nodejs,官网第一条进去 https://nodejs.org/en/
第一个是稳定版，第二个是最新的，一般都是下载稳定版本，所以点击第一个下载，下载完成后直接双击运行安装
一直下一步就好了，最后点击这个Add to PATH，这样你就不用自己去配置环境变量，不然还得自己配置环境变量，配置的话也不难，百度教程很多。最后Install，等待安装完成，完成之后Finish，NODE就安装完成了。检验一下是否可用，打开命令窗口，输入node --version，检验npm是否可用，命令窗口输入npm --version，这时候有版本号就表示安装成功。

2.安装VUE脚手架

cmd运行

npm install -g @vue/cli 
or
yarn global add @vue/cli`

查看版本
vue --version

3.VUE3.0介绍和优点

vue3.0增加了UI界面，不用在敲命令行就可以快速的创建项目和添加插件，推荐新手使用3.0以上版本

4.创建项目

在命令行中执行vue ui,如果没有问题会直接弹出操作界面，没有弹出的话可以自己输入http://localhost:8000/
点击左上角项目管理器
可以创建也可以导入，我们这次新创建一个项目
添加项目名，点击下一步
选择默认配置，点击创建完成

6.稍等一会项目就创建完了

5.如何快速安装插件

选择插件导航栏
点击添加插件，在搜索框中搜索需要的插件
点击安装

6.如何启动项目

点击任务，选择第一个server，点击运行就可以启动项目
点击启动app，就会自动弹出vue界面

SpringBoot部分

File------>New------>Project
spring Assistant------>选择JDK版本------->Next
填写包名称----->项目名称--------->Next
选择web项目------>Next
更改项目保存路径
第5步完成即可创建项目成功
将src标注成sources
编写相关的Controller、Service

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloWorld {
    @RequestMapping("/hello")
    public String hello(){
        return "hello world !";
    }
}

启动主程序
访问localhost:8080/hello,如下图

如何前后端分离开发

通过一个简单的用户验证来讲解如何开发

1.开发前端简单界面

为了方便开发，我们引入饿了吗UI

引入element ui
引入Axios依赖

在main.js中引用axios

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import axios from 'axios'
Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

前台代码

<template>
  <el-form :rules="rules" class="login-container" label-position="left"
           label-width="0px" v-loading="loading">
    <h3 class="login_title">系统登录</h3>
    <el-form-item prop="account">
      <el-input type="text" v-model="loginForm.name" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>
    <el-form-item style="width: 100%">
      <el-button type="primary" @click.native.prevent="submitClick" style="width: 100%">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script>

  export default{
    data(){
      return {
        rules: {
          account: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          checkPass: [{required: true, message: '请输入密码', trigger: 'blur'}]
        },
        checked: true,
        loginForm: {
          name: '张三',
          password: '666666'
        },
        loading: false
      }
    },
    methods: {
      submitClick: function () {

        var _this = this;
        this.loading = true;
        this.$axios({
                        method:'post',

                        url:'/api/login?name='+this.loginForm.name+'&password='+this.loginForm.password,

                    }).then(resp=> {
          _this.loading = false;
          var data = resp.data;
          if (resp.status == 200) {
          // eslint-disable-next-line no-debugger
          debugger;
            //成功
            var code = data;
            if (code == true) {
              _this.$alert('登录成功!', '成功!');

            } else {
              _this.$alert('登录失败!', '失败!');
            }
          } else {
            //失败
            _this.$alert('登录失败!', '失败!');
          }
        });
      }
    }
  }
</script>
<style>
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
  }
</style>

效果图

2.解决跨域问题

vue3.0与1.0，2.0不同，需要自己创建配置文件，在根目录下创建vue.config.js,在启动时就会自动加载配置文件

module.exports = {
    devServer:{
    //所有通过'api'调用的请求都会转发到'http://localhost:8090/'下面
        proxy:{
            '/api':{
                target:'http://localhost:8090/',
                changeOrigin: true,
                 pathRewrite: {
                                    "^/api": ""
                                }
            }
        }
    }
}

3.通过Ajax调用后端接口

在这里插入图片描述

4.后台接口开发

创建用户VO

package com.example.demo;

public class user {
    private String name;
    private String password;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

创建Controller

package com.example.demo;

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

@RestController
public class login {
    @PostMapping(value = "/login")
    //@ApiImplicitParam(name = "id", value = "id值", paramType = "path", required = true, dataType = "Integer")
    public boolean login(user user) {
        System.out.println("name :"+user.getName()+"password :"+user.getPassword());
        //简单演示，直接把用户名和密码写死
        if("user".equals(user.getName())&&"user".equals(user.getPassword())){
            return true;
        }else{
            return false;
        }
    }
}