Vue+Spring Boot簡單用戶登錄Demo

1 概述

前後端分離的一個簡單用戶登錄Demo。

2 技術棧

• Vue
• BootstrapVue
• Kotlin
• Spring Boot
• MyBatis Plus

3 前端

3.1 創建工程

使用vue-cli創建，沒安裝的可以先安裝：

sudo cnpm install -g vue @vue/cli

查看版本：

vue -V

出現版本就安裝成功了。

創建初始工程：

vue create bvdemo

由於目前Vue3還沒有發佈正式版本，推薦使用Vue2：

等待一段時間構建好了之後會提示進行文件夾並直接運行：

cd bvdemo
yarn serve

直接通過本地的8080端口即可訪問：

3.2 依賴

進入項目文件夾：

cd bvdemo

安裝依賴：

cnpm install bootstrap-vue axios jquery vue-router

應該會出現popper.js過期的警告，這是bootstrap-vue的原因，可以忽略：

依賴說明如下：

• bootstrap-vue：一個結合了Vue與Bootstrap的前端UI框架
• axios是一個簡潔易用高效的http庫，本項目使用其發送登錄請求
• jquery：一個強大的JS庫
• vue-router：Vue的官方路由管理器

3.3 開啓補全

在正式編寫代碼之前開啓對bootstrap-vue的補全支持，打開設置：

將項目路徑下的node_modules添加到庫中，把前面的勾給勾上，接着更新緩存並重啓（File->Invalidate Cache/Restart ）。

3.4 App.vue

去掉默認的HelloWorld組件，並修改App.vue如下：

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'App',
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

<router-view>是一個functional組件，渲染路徑匹配到的視圖組件，這裏使用<router-view>根據訪問路徑（路由）的不同顯示（渲染）相應的組件。

3.5 新建vue組件

刪除默認的HelloWorld.vue，新建Index.vue以及Login.vue：

3.6 添加路由

在main.js同級目錄下新建router.js，內容如下：

import Vue from "vue"
import VueRouter from "vue-router"
import Login from "@/components/Login"
import Index from "@/components/Index"

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        component: Login,
        props: true
    },
    {
        path:'/index/:val',
        name:'index',
        component: Index,
        props: true
    }
]

const router = new VueRouter({
    mode:'history',
    routes:routes
})

export default router

routes表示路由，其中包含了兩個路由，一個是Login組件的路由/，一個是Index組件的路由/index/:val，後者中的:val是佔位符，用於傳遞參數。router表示路由器，mode可以選擇hash或history：

• hash會使用URL的hash來模擬一個完整的URL，當URL改變時頁面不會重新加載
• history就是普通的正常URL

router中的routes參數聲明瞭對應的路由，最後要記得把router添加到main.js中。

3.7 vue.config.js

在package.json同級目錄下創建vue.config.js，內容如下：

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                options.transformAssetUrls = {
                    img: 'src',
                    image: 'xlink:href',
                    'b-img': 'src',
                    'b-img-lazy': ['src', 'blank-src'],
                    'b-card': 'img-src',
                    'b-card-img': 'src',
                    'b-card-img-lazy': ['src', 'blank-src'],
                    'b-carousel-slide': 'img-src',
                    'b-embed': 'src'
                }
                return options
            })
    }
}

使用該配置文件主要是因爲<b-img>的src屬性不能正常讀取圖片，添加了該配置文件後即可按路徑正常讀取。

3.8 main.js

添加依賴以及路由：

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

import {BootstrapVue, BootstrapVueIcons} from 'bootstrap-vue'
import router from "@/router";
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)
Vue.config.productionTip = false

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

引入BootstrapVue，並把路由註冊到Vue實例中（就是倒數第2行，作爲創建Vue實例的參數，注意這個很重要，不然路由功能不能正常使用）。

3.9 登錄組件

也就是Login.vue，內容如下：

<template>
    <div>
        <b-img src="../assets/logo.png"></b-img>
        <br>
        <b-container>
            <b-row>
                <b-col offset="3" cols="6">
                    <b-input-group size="lg">
                        <b-input-group-text>用戶名</b-input-group-text>
                        <b-form-input type="text" v-model="username"></b-form-input>
                    </b-input-group>
                </b-col>
            </b-row>
            <br>
            <b-row>
                <b-col offset="3" cols="6">
                    <b-input-group size="lg">
                        <b-input-group-text>密碼</b-input-group-text>
                        <b-form-input type="password" v-model="password"></b-form-input>
                    </b-input-group>
                </b-col>
            </b-row>
            <br>
            <b-row>
                <b-col offset="3" cols="6">
                    <b-button variant="success" @click="login">
                        一鍵註冊/登錄
                    </b-button>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import axios from 'axios'
import router from "@/router"

export default {
    name: "Login.vue",
    data:function (){
        return{
            username:'',
            password:''
        }
    },
    methods:{
        login:function(){
            axios.post("http://localhost:8080/login",{
                username:this.username,
                password:this.password
            }).then(function (res){
                router.push({
                    name:"index",
                    params:{
                        val:res.data.code === 1
                    }
                })
            })
        }
    }
}
</script>

<style scoped>

</style>

採用了網格系統佈局<b-row>+<b-col>，其他組件就不說了，大部分組件官網都有說明（可以戳這裏），發送請求採用了axios，參數包裝在請求體中，注意需要與後端（@RequestBody，寫在請求頭請使用@RequestParm）對應。

另外還需要注意的是跨域問題，這裏的跨域問題交給後端處理：

@CrossOrigin("http://localhost:8081")

（本地測試中後端運行在8080端口，而前端運行在8081端口）

發送請求後使用路由進行跳轉，攜帶的是res.data.code參數 ，其中res.data是響應中的數據，後面的code是後端自定義的數據，返回1表示註冊成功，返回2表示登錄成功。

3.10 首頁組件

首頁簡單地顯示了登錄或註冊成功：

<template>
    <div>
        <b-img src="../assets/logo.png"></b-img>
        <b-container>
            <b-row align-h="center">
                <b-col>
                    <b-jumbotron header="註冊成功" lead="歡迎" v-if="val"></b-jumbotron>
                    <b-jumbotron header="登錄成功" lead="歡迎" v-else></b-jumbotron>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
export default {
    name: "Index.vue",
    props:['val']
}
</script>

<style scoped>

</style>

props表示val是來自其他組件的參數，並將其作爲在v-if中進行條件渲染的參數。

這樣前端就做好了。下面開始介紹後端。

4 後端

4.1 創建工程

採用Kotlin+Gradle+MyBatisPlus構建，新建工程如下：

4.2 依賴

引入MyBatis Plus依賴即可：

implementation("com.baomidou:mybatis-plus-boot-starter:3.4.0")

4.3 數據表

create database if not exists test;
use test;
drop table if exists user;
create table user(
    id int auto_increment primary key ,
    username varchar(30) default '',
    password varchar(30) default ''
)

4.4 配置文件

數據庫用戶名+密碼+url：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test
    username: root
    password: 123456

4.5 新建包

新建如下六個包，分別表示配置類、控制層、持久層、實體類、響應類、業務層。

4.6 實體類

package com.example.demo.entity

class User(var username:String,var password:String)

4.7 持久層

package com.example.demo.dao

import com.baomidou.mybatisplus.core.mapper.BaseMapper
import com.example.demo.entity.User
import org.apache.ibatis.annotations.Mapper
import org.apache.ibatis.annotations.Select

@Mapper
interface DemoMapper :BaseMapper<User>{
    @Select("select * from user where username=#{username} and password = #{password}")
    fun selectByUsernameAndPassword(username:String,password:String):List<User>
}

@Mapper表示給Mapper接口生成一個實現類，並且不需要編寫xml配置文件。@Select表示進行查詢的sql語句。

4.8 響應體

package com.example.demo.response

class DemoResponse
{
    var data = Any()
    var code = 0
    var message = ""
}

package com.example.demo.response

class DemoResponseBuilder {
    private var response = DemoResponse()

    fun data(t:Any): DemoResponseBuilder
    {
        response.data = t
        return this
    }
    fun code(t:Int): DemoResponseBuilder
    {
        response.code = t
        return this
    }
    fun message(t:String): DemoResponseBuilder
    {
        response.message = t
        return this
    }
    fun build() = response
}

這裏響應體分爲：

• 響應碼
• 響應體數據
• 其他信息

與前端約定即可。生成響應體通過一個Builder類生成。

4.9 業務層

package com.example.demo.service

import com.demo.response.DemoResponse
import com.demo.response.DemoResponseBuilder
import com.example.demo.dao.DemoMapper
import com.example.demo.entity.User
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.stereotype.Service
import org.springframework.transaction.annotation.Transactional

@Service
@Transactional
class DemoService
{
    @Autowired
    lateinit var mapper: DemoMapper

    fun login(username:String, password:String): DemoResponse
    {
        val result = mapper.selectByUsernameAndPassword(username,password).size
        if(result == 0)
            mapper.insert(User(username,password))
        return DemoResponseBuilder().code(if(result == 0) 1 else 2).message("").data(true).build()
    }
}

@Service標記爲業務層，@Transactional表示添加了事務管理，持久層操作失敗會進行回滾。@Autowired表示自動注入，在Java 中可以使用直接使用@Autowired，而在Kotlin中需要使用lateinit var。

4.10 控制層

package com.example.demo.controller

import com.demo.response.DemoResponse
import com.example.demo.entity.User
import com.example.demo.service.DemoService
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.web.bind.annotation.*

@RestController
@RequestMapping("/")
@CrossOrigin("http://localhost:8081")
class DemoController {
    @Autowired
    lateinit var service: DemoService

    @PostMapping("login")
    fun login(@RequestBody user: User):DemoResponse
    {
        return service.login(user.username, user.password)
    }
}

主要就是添加了一個跨域處理@CrossOrigin，開發時請對應上前端的端口。

4.11 配置類

package com.example.demo.config

import org.mybatis.spring.annotation.MapperScan
import org.springframework.context.annotation.Configuration

@Configuration
@MapperScan("com.example.demo.dao")
class MyBatisConfig

@MapperScan表示掃描對應包下的@Mapper。

4.12 測試

package com.example.demo

import com.example.demo.service.DemoService
import org.junit.jupiter.api.Test
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.boot.test.context.SpringBootTest

@SpringBootTest
class DemoApplicationTests {

    @Autowired
    lateinit var service: DemoService

    @Test
    fun contextLoads() {
        println(service.login("123", "456"))
    }

}

測試通過後後端就算完成了。

5 總測試

先運行後端，Kotlin不像Java，生成工程時能自動配置了啓動配置，需要手動運行啓動類中的main：

再運行前端：

npm run serve

不想用命令行的話可以使用圖形界面配置一下：

根據控制檯輸出打開localhost:8081：

隨便輸入用戶名與密碼，不存在則創建，存在則登錄：

註冊的同時後端數據庫會生成一條記錄：

再次輸入相同的用戶名和密碼會顯示登錄成功：

這樣就正式完成了一個簡單的前後端分離登錄Demo。

5 源碼

• Github
• 碼雲
• CODE.CHINA