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 bvdemoyarn 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 = falsenew 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.entityclass User(var username:String,var password:String)

4.7 长久层

package com.example.demo.daoimport com.baomidou.mybatisplus.core.mapper.BaseMapperimport com.example.demo.entity.Userimport org.apache.ibatis.annotations.Mapperimport org.apache.ibatis.annotations.Select@Mapperinterface 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.responseclass DemoResponse{    var data = Any()    var code = 0    var message = ""}
package com.example.demo.responseclass 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.serviceimport com.demo.response.DemoResponseimport com.demo.response.DemoResponseBuilderimport com.example.demo.dao.DemoMapperimport com.example.demo.entity.Userimport org.springframework.beans.factory.annotation.Autowiredimport org.springframework.stereotype.Serviceimport org.springframework.transaction.annotation.Transactional@Service@Transactionalclass 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.controllerimport com.demo.response.DemoResponseimport com.example.demo.entity.Userimport com.example.demo.service.DemoServiceimport org.springframework.beans.factory.annotation.Autowiredimport 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.configimport org.mybatis.spring.annotation.MapperScanimport org.springframework.context.annotation.Configuration@Configuration@MapperScan("com.example.demo.dao")class MyBatisConfig

@MapperScan示意扫描对应包下的@Mapper。

4.12 测试

package com.example.demoimport com.example.demo.service.DemoServiceimport org.junit.jupiter.api.Testimport org.springframework.beans.factory.annotation.Autowiredimport org.springframework.boot.test.context.SpringBootTest@SpringBootTestclass 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 公布