SpringBoot+Vue入門：項目前後端分離之實現簡單登錄demo

前言

此demo是參考某位大佬的demo，我覺得他寫的不錯，便寫下來了

1.demo功能描述

輸入 http://localhost:8080，回車瀏覽器自動跳轉到http://localhost:8008/login登錄頁面。輸入用戶名、密碼，點擊登錄功能實現效果如下：

1. 輸入正確的用戶名（zzc）和密碼（123），則服務器驗證正確後，前端頁面自動跳轉到首頁http://localhost:8008/index
2. 若輸入不正確的用戶名和密碼，則會在輸入框顯示後端驗證後的錯誤信息

2.demo技術棧描述

1. 前端技術棧：

編程語言：html、css、js
開發工具：Atom
發開框架：vue + axios + router
包管理工具：npm
打包工具：webpack

2. 後端技術棧

編程語言：java
開發工具：Eclipse
發開框架：springboot
包管理工具：maven資源庫
打包工具：maven

3.demo開發流程概要

1. 前端開發流程概要

安裝node.js並初始化Vue項目
在Vue項目中開發頁面頭、頁面尾公共組件
開發登錄界面組件
開發首頁界面組件
網絡請求（跨域：由後臺實現）、頁面路由開發

2. 後臺開發流程概要

安裝jdk8並配置好環境變量
創建springboot項目
開發登錄控制器
支持跨域

3. 運行項目流程

使用webpack將Vue項目打包
將打包的Vue項目集成到springboot項目中
使用maven將springboot打包成jar文件
使用jdk運行jar包來啓動demo項目服務，訪問地址查看效果

4.demo開發流程詳情

前端開發內容

結構預覽

安裝node.js並初始化Vue項目

查看文章https://blog.csdn.net/Lucky_Boy_Luck/article/details/96509513,按照步驟操作即可。使用Axios前，先安裝它。執行命令：cnpm install --save axios

開發頁面頭、頁面尾公共組件

Header.vue頁面頭代碼

<template>
  <div class="header">
    頁面頭部
  </div>
</template>

<script>
export default {
  name: 'Header'
  }
}
</script>

Footer.vue頁面尾代碼

<template>
  <div class="footer">
    頁面尾部
  </div>
</template>

<script>
export default {
  name: 'Footer'
}
</script>

開發登錄頁面組件

Login.Vue登錄頁面代碼

<template>
  <div class="login">
    <Header />
    <hr>
    <div>
      用戶名：<input type="text" v-model="username" placeholder="請輸入用戶名" />{{username}}<br>
      密碼：<input type="password" v-model="password" placeholder="請輸入密碼" />{{password}}<br>
      <button @click="login">登錄</button><br>
      登錄驗證情況：<input type="text" v-model="result" />{{result}}
    </div>
    <hr>
    <Footer />
  </div>
</template>

<script>
import Footer from '@/components/commons/Footer'
import Header from '@/components/commons/Header'
import qs from 'qs'

export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: '',
      result: ''
    }
  },
  components: {
    Footer,
    Header
  },
  methods: {
    login () {
      if (this.username === '') {
        alert('用戶名不能爲空')
        return
      }
      if (this.password === '') {
        alert('密碼不能爲空')
      }

      var url = 'http://localhost:80/login'
      console.log(url)
      this.$axios.post(url, qs.stringify({
        username: this.username,
        password: this.password
      }))
        .then(res => {
          console.log(res)
          console.log(res.data)
          if (res.data.data === '登陸成功') {
            this.$router.replace({path: '/index'})
          } else {
            this.result = res.data.data
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

請求路由，頁面路由開發

main.js主入口代碼

import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from 'axios'
Vue.prototype.$axios = Axios

Vue.config.productionTip = false

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

router/index.js 頁面路由代碼

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/home/Index'
import Login from '@/components/manager/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

單獨運行Vue項目查看效果

訪問地址：http://localhost:8080

後臺開發內容

結構預覽

開發登錄控制器，支持跨域

@Controller
@CrossOrigin
public class SystemController {
	
	@RequestMapping(value="/login", method=RequestMethod.POST)
	@ResponseBody
	public Map<String, Object> login(String username, String password){
		Map<String, Object> map = new HashMap<String, Object>();
		if(null != username && null != password) {
			if("zzc".equalsIgnoreCase(username)) {
				if("123".equalsIgnoreCase(password)) {
					map.put("data", "登陸成功");
				} else {
					map.put("data", "用戶名或者密碼錯誤");
				}
			} else {
				map.put("data", "用戶名或者密碼錯誤");
			}
		} else {
			map.put("data", "用戶名或者密碼不能爲空");
		}
		return map;
	}
}

配置服務器端口（80）

application.yml

server:
  port: 80

啓動springboot項目

運行完整項目

前端服務啓動，後臺服務啓動，然後輸入用戶名和密碼

1.運行失敗

2.運行成功

集成前後端代碼，運行完整項目流程

前端代碼打包

在Vue項目目錄項，運行命令：npm run build 會打包，自動生成的打包後的dist目錄文件

把dist文件夾下所有的文件複製到springboot項目中的static文件夾下

然後重新啓動springboot項目瀏覽器訪問後臺服務地址http://localhost:80，會發現頁面顯示的是就是vue開發的前端頁面

通過上面步驟集成前後端完畢，然後把完整的項目打包成jar包後使用jdk命令運行完整項目即可。

1. 右擊項目—>點擊DebugAS ----->點擊 Maven install進行編譯,編譯成功後如圖(要出現success字樣編譯纔算成功)
   
2. 右擊項目—>點擊Debug as ---->點擊 Maven build。然後彈出一個對話框如下圖所示，在Goals中輸入clean compile package，然後點擊debug等到完成
   
3. 如果出現success打包成功後，打過的jar包可以控制檯上面提示的目錄裏找，也可以在當前工程下的target文件夾下直接複製jar包
4. 把此包粘貼複製到桌面上，然後用命令行啓動命令先跳到當前路徑，再使用命令：java -jar jar名
   
5. 瀏覽器訪問
6. 手機訪問：
   修改配置文件index.js
   
   瀏覽器訪問/手機瀏覽器訪問：192.168.31.139:8080