学习vue3和springboot那肯定是少不了写项目的，在各个项目中肯定是离不开登录和注册的事情的，这也是一个项目起步的需求。
接下来我们来看看我们所写的项目起步。首先搭建vue3和springboot的项目环境，这些搭建大家自行完成即可，架子有了之后就得开始往里面装东西了。
首先 是登录页面的渲染情况，大家根据自己的设计来实现自己登录页面的样式，下面先给大家一个参考：
代码也给大家参考：
<template>
<div class="bgc">
<div class="modalbox">
<h2 style="text-align: center;font-family: '宋体';">系统登录</h2>
<el-input prefix-icon="User" class="name" v-model="input" placeholder="请输入用户登录账号" />
<el-input
class="password"
prefix-icon="Lock"
v-model="password"
type="password"
placeholder="请输入用户密码"
show-password
/>
<el-input prefix-icon="CircleCheck" class="verificationcode" v-model="verificationcode" placeholder="请输入验证码" />
<el-input class="code" v-model="code" placeholder="1569" disabled/>
<div class="register">
<el-text @click="register" class="mx-1" type="success">注册账号</el-text>
</div>
<el-button class="login" type="success" @click="login">登录</el-button>
</div>
</div>
</template>
//如果只考虑样式，那么script代码可以删掉
<script setup>
import { ref , onMounted} from 'vue';
import {useRouter} from "vue-router";
const router = useRouter();
const input = ref('');
const password = ref('');
const code = ref('');
const verificationcode = ref("");
import { ElMessage } from 'element-plus';
import axios from 'axios';
onMounted(()=>{
code.value = parseInt(Math.random()*10000);
})
const register = () => {
router.push('/register');
}
//下面这里的是登录验证，在只考虑样式的情况下，下面的代码可以不要
const login = () => {
axios({
url:`http://localhost:8080/user`,
method:"post",
data:{
username : input.value,
password : password.value
}
}).then(res=>{
let arr = res.data;
let flg = false;
console.log(res.data);
for(let i = 0 ; i < arr.length ; i++){
if(arr[i].username == input.value && arr[i].password == password.value && verificationcode.value == code.value){
ElMessage({
message: '登录成功',
type: 'success',
});
return ;
}
};
if(flg == false){
ElMessage.error('账号密码不正确，请重新输入');
return ;
}
})
}
</script>
<style scoped>
.bgc{
width: 100%;
height: 100%;
background-image: url(../assets/bj.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.modalbox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 35%;
height: 50%;
border-radius: 10px;
background-color: #fff;
}
.name{
margin-top: 5%;
margin-left: 10%;
width: 80%;
height: 40px;
}
.password{
margin-top: 5%;
margin-left: 10%;
width: 80%;
height: 40px;
}
.verificationcode{
margin-top: 5%;
margin-left: 10%;
width: 40%;
height: 45px;
}
.code{
margin-top: 5%;
margin-left: 4%;
width: 35%;
height: 40px;
}
.register{
width: 15%;
height: 5%;
cursor: pointer;
margin-top: 5%;
margin-left: 10%;
}
.login{
width: 80%;
height: 10%;
margin-top: 2%;
margin-left: 10%;
}
</style>样式有了之后我们还需要逻辑，前端的逻辑上面代码已经都给全了，现在给大家参考后端的处理以及数据库的一些情况：
控制类：
package com.example.vue3spring.controller;
import com.example.vue3spring.entity.User;
import com.example.vue3spring.mapper.user;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
public class Users {
@Autowired
private user user;
@RequestMapping(value = "/user",method = RequestMethod.POST)
@CrossOrigin
public List<User> user(@RequestBody User users){
System.out.println(users.getUsername());
System.out.println(users.getPassword());
List<User> list = user.users();
// for (int i = 0; i < list.size(); i++) {
// System.out.println(list.get(i));
// }
// System.out.println(list);
return list ;
}
}
实体类：
package com.example.vue3spring.entity;
public class User {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
@Override
public String toString() {
return "User{" +
"username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
public void setPassword(String password) {
this.password = password;
}
}
mybatis-plus接口：
package com.example.vue3spring.mapper;
import com.example.vue3spring.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
@Repository
public interface user {
@Select("select * from login")
public List<User> users();
}
在springboot使用mybatis-plus要在pom中加入以下依赖才可使用哦：
</dependency>
<!-- mybatis-plus依赖-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</version>
</dependency>
<!-- mysql驱动依赖-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.23</version>
</dependency>
<!-- 数据连接池-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.23</version>
</dependency>以及在properties文件中数据库连接的配置：
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/springboot?useSSL=false
spring.datasource.username=root
spring.datasource.password=w123456789
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl好了。以上就是所有的配置情况，仅供大家参考使用
