想快速搭建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

1. 百度nodejs,官網第一條進去 https://nodejs.org/en/
   
2. 第一個是穩定版，第二個是最新的，一般都是下載穩定版本，所以點擊第一個下載，下載完成後直接雙擊運行安裝
3. 一直下一步就好了，最後點擊這個Add to PATH，這樣你就不用自己去配置環境變量，不然還得自己配置環境變量，配置的話也不難，百度教程很多。最後Install，等待安裝完成，完成之後Finish，NODE就安裝完成了。檢驗一下是否可用，打開命令窗口，輸入node --version，檢驗npm是否可用，命令窗口輸入npm --version，這時候有版本號就表示安裝成功。
   

2.安裝VUE腳手架

1. cmd運行

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

2. 查看版本
   vue --version
   

3.VUE3.0介紹和優點

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

4.創建項目

1. 在命令行中執行vue ui,如果沒有問題會直接彈出操作界面，沒有彈出的話可以自己輸入http://localhost:8000/
2. 點擊左上角項目管理器
   
3. 可以創建也可以導入，我們這次新創建一個項目
   
4. 添加項目名，點擊下一步
   
5. 選擇默認配置，點擊創建完成
   
   6.稍等一會項目就創建完了
   

5.如何快速安裝插件

1. 選擇插件導航欄
2. 點擊添加插件，在搜索框中搜索需要的插件
   
3. 點擊安裝

6.如何啓動項目

1. 點擊任務，選擇第一個server，點擊運行就可以啓動項目
2. 點擊啓動app，就會自動彈出vue界面
   

SpringBoot部分

1. File------>New------>Project

2. spring Assistant------>選擇JDK版本------->Next
   

3. 填寫包名稱----->項目名稱--------->Next
   

4. 選擇web項目------>Next
   

5. 更改項目保存路徑
   

6. 第5步完成即可創建項目成功
   

7. 將src標註成sources
   

8. 編寫相關的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 !";
    }
}

9. 啓動主程序
   

10. 訪問localhost:8080/hello,如下圖
    

如何前後端分離開發

通過一個簡單的用戶驗證來講解如何開發

1.開發前端簡單界面

爲了方便開發，我們引入餓了嗎UI

1. 引入element ui
   
2. 引入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')

2. 前臺代碼

<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>

3. 效果圖
   

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;
        }
    }
}

5.效果圖

如果輸入錯誤的

成功