❝「如果觉得文章好看,欢迎点赞。」「同时欢迎关注微信公众号:氷泠之路。」
❞
![a4bacbcbf57384e13cd47cffbff106e0.gif](https://i-blog.csdnimg.cn/blog_migrate/ef75bef86cf71785751842ae2f08ace1.gif)
这是一个前后端分离的简单用户登录Demo
。
技术栈
Vue
BootstrapVue
Kotlin
Spring Boot
MyBatis Plus
前端
创建工程
使用vue-cli
创建,没安装的可以先安装:
sudo cnpm install -g vue @vue/cli
查看版本:
vue -V
出现版本就安装成功了。
创建初始工程:
vue create bvdemo
由于目前Vue3
还没有发布正式版本,推荐使用Vue2
:
![a13582315c5cb0e68dfd58ad36dd2d46.png](https://i-blog.csdnimg.cn/blog_migrate/82bdb8c60dd751537a742ab0ef6de9d4.png)
等待一段时间构建好了之后会提示进行文件夹并直接运行:
![43bfd89d0844b523c5962e650994e8b9.png](https://i-blog.csdnimg.cn/blog_migrate/9759d0f259f16a0f2a9e9e824cb2ec7f.png)
cd bvdemo
yarn serve
直接通过本地的8080
端口即可访问:
![655b6e2f3376411b99adabfbd489446d.png](https://i-blog.csdnimg.cn/blog_migrate/0e3aac5e780a50740a81952def7fe20f.png)
![af6b0302d7e4ac4bac2ffcdc85c12663.png](https://i-blog.csdnimg.cn/blog_migrate/564d2d59c734611e926a953681267c46.png)
依赖
进入项目文件夹:
cd bvdemo
安装依赖:
cnpm install bootstrap-vue axios jquery vue-router
应该会出现popper.js
过期的警告,这是bootstrap-vue
的原因,可以忽略:
![f0d735678f223cf7b13af9d2607513d7.png](https://i-blog.csdnimg.cn/blog_migrate/a5290d0bbe35e3691cceb0e61bd7bcef.png)
依赖说明如下:
bootstrap-vue
:一个结合了Vue
与Bootstrap
的前端UI
框架axios
是一个简洁易用高效的http
库,本项目使用其发送登录请求jquery
:一个强大的JS
库vue-router
:Vue
的官方路由管理器
开启补全
在正式编写代码之前开启对bootstrap-vue
的补全支持,打开设置:
![500cec70775af80b61974abf3d36d617.png](https://i-blog.csdnimg.cn/blog_migrate/aea1e07751f8f731187b444136ae09d7.png)
将项目路径下的node_modules
添加到库中,把前面的勾给勾上,接着更新缓存并重启。
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>
是一个
functional
组件,渲染路径匹配到的视图组件,这里使用根据访问路径(路由)的不同显示(渲染)相应的组件。
新建vue
组件
删除默认的HelloWorld.vue
,新建Index.vue
以及Login.vue
:
![8181f502a3bba8deb6b8b9f403e2a198.png](https://i-blog.csdnimg.cn/blog_migrate/c49d1a4ba90d7e1b1f056ddc5e92bd09.png)
添加路由
在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
中。
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
})
}
}
使用该配置文件主要是因为的
src
属性不能正常读取图片,添加了该配置文件后即可按路径正常读取。
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
实例的参数,注意这个很重要,不然路由功能不能正常使用)。
登录组件
也就是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>
采用了网格系统布局+
,其他组件就不说了,大部分组件官网都有说明,发送请求采用了
axios
,参数包装在请求体中,注意需要与后端(@RequestBody
,写在请求头请使用@RequestParm
)对应。
另外还需要注意的是跨域问题,这里的跨域问题交给后端处理:
@CrossOrigin("http://localhost:8081")
(本地测试中后端运行在8080
端口,而前端运行在8081
端口)
发送请求后使用路由进行跳转,携带的是res.data.code
参数 ,其中res.data
是响应中的数据,后面的code
是后端自定义的数据,返回1
表示注册成功,返回2
表示登录成功。
首页组件
首页简单地显示了登录或注册成功:
<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
中进行条件渲染的参数。
这样前端就做好了。下面开始介绍后端。
后端
创建工程
采用Kotlin
+Gradle
+MyBatisPlus
构建,新建工程如下:
![9a47c9941f2b225d64a88ad84cbc070e.png](https://i-blog.csdnimg.cn/blog_migrate/f7c4fc1045151444baaf0fff5ffb27ac.png)
![4475977efff87378c6ef0e4382933830.png](https://i-blog.csdnimg.cn/blog_migrate/788c87a913bc65c124bc5902c38ee4fa.png)
![e2eb50dd9c6e0db30b717517de477f3a.png](https://i-blog.csdnimg.cn/blog_migrate/c5ce71f8863fb832f45c0fd0d2e8834c.png)
依赖
引入MyBatis Plus
依赖即可:
implementation("com.baomidou:mybatis-plus-boot-starter:3.4.0")
数据表
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 ''
)
配置文件
数据库用户名+密码+url
:
spring:
datasource:
url: jdbc:mysql://localhost:3306/test
username: root
password: 123456
新建包
新建如下六个包,分别表示配置类、控制层、持久层、实体类、响应类、业务层。
![7c3cc1aae670c16d7c2328f26e1a83b8.png](https://i-blog.csdnimg.cn/blog_migrate/ef7d3bcabbbdeb5e1f1e0c040435b6b3.png)
实体类
package com.example.demo.entity
class User(var username:String,var password:String)
持久层
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
}
@Mapper
表示给Mapper
接口生成一个实现类,并且不需要编写xml
配置文件。@Select
表示进行查询的sql
语句。
响应体
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
类生成。
业务层
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
。
控制层
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
,开发时请对应上前端的端口。
配置类
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
。
测试
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"))
}
}
测试通过后后端就算完成了。
总测试
先运行后端,Kotlin
不像Java
,生成工程时能自动配置了启动配置,需要手动运行启动类中的main
:
![d459b7c8fa8229d05f0bad8a54c3e43a.png](https://i-blog.csdnimg.cn/blog_migrate/b061a315f34fc81eb15e0fd34111b8e8.png)
再运行前端:
npm run serve
不想用命令行的话可以使用图形界面配置一下:
![7482b329ac512388f7cfd780ec63a47b.png](https://i-blog.csdnimg.cn/blog_migrate/7245e1f6741f67c4c472317870d7dda5.png)
根据控制台输出打开localhost:8081
:
![c45a86336206abac12244a5323284fb7.png](https://i-blog.csdnimg.cn/blog_migrate/777ce68a0f522ae42e5f56d18b870559.png)
![2ce5088fa964d84c0975d47de024bde1.png](https://i-blog.csdnimg.cn/blog_migrate/301beaafc4bfe8f62b18dbeeb52a4ac3.png)
随便输入用户名与密码,不存在则创建,存在则登录:
![72ae558242caea7be8058efb64b1fd12.png](https://i-blog.csdnimg.cn/blog_migrate/1d2abb2a28f5622ad2f0453797f3096d.png)
![dd0443b0c03dbacbf18a962bd3acd78c.png](https://i-blog.csdnimg.cn/blog_migrate/623ef97452c93125c264736b83bc02ca.png)
注册的同时后端数据库会生成一条记录:
![82312a9482f0680fab80e394312b08a9.png](https://i-blog.csdnimg.cn/blog_migrate/0e0dc56ae027c033b9082ad3e9360589.png)
再次输入相同的用户名和密码会显示登录成功:
![40f49ad779d489df02ab843467b301b4.png](https://i-blog.csdnimg.cn/blog_migrate/201de0fddd09c2bb09bc689ead6316de.png)
这样就正式完成了一个简单的前后端分离登录Demo
。
源码见原文链接。