关于spring:VueSpring-Boot简单用户登录Demo

43次阅读

共计 7937 个字符，预计需要花费 20 分钟才能阅读完成。

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

本文由博客群发一文多发等经营工具平台 OpenWrite 公布

正文完
spring
发表至： spring
2020-11-12
 0
关于spring:要去面试先刷完这16道高频面试题阿里字节跳动美团任你选
关于spring:帮助-Java-开发人员进行-Bean-映射的-8-大框架
关于spring:Spring-Task-定时任务
关于spring:项目部署点一下按钮就可以全流程自动化