Vue Spring Boot用户登录功能如何实现长尾词优化？

本文共计2088个文字，预计阅读时间需要9分钟。

1. 简述前后端分离的一个简单用户登录Demo。

2.技术栈：Vue + BootstrapVue + Kotlin + Spring Boot + MyBatis Plus

3.前端：

3.1 创建工程：使用vue-cli创建，无需安装，可先安装： bash sudo cnpm install -g vue @vue/cli 查看

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 是一个简洁易用高效的 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(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("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 。

  到此这篇关于Vue+Spring Boot简单用户登录(附Demo)的文章就介绍到这了,更多相关Vue+Spring Boot 用户登录 内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！