Para aprender vue3 y springboot es absolutamente necesario escribir proyectos, en cada proyecto el inicio de sesión y el registro deben ser inseparables, este también es un requisito para el inicio de un proyecto.
A continuación, veamos el proyecto que escribimos sobre cómo comenzar. En primer lugar, cree el entorno del proyecto de vue3 y springboot. Puede completar estas construcciones usted mismo. Una vez que tenga el estante, debe comenzar a cargar cosas en él.
El primero es la representación de la página de inicio de sesión. Puede implementar el estilo de su página de inicio de sesión de acuerdo con su propio diseño. Aquí tiene una referencia:
El código también es para su referencia:
<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>Una vez que el estilo esté disponible, todavía necesitamos lógica. Se ha proporcionado el código sobre la lógica del front-end. Ahora me referiré al procesamiento del back-end y algunas situaciones de la base de datos:
Clase de control :
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 ;
}
}
Clase de entidad :
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;
}
}
Interfaz 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();
}
Para usar mybatis-plus en springboot, se deben agregar las siguientes dependencias al pom antes de poder usarlo:
</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>Y la configuración de la conexión a la base de datos en el archivo de propiedades:
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.StdOutImplestá bien. Las anteriores son todas las configuraciones, solo para su referencia.