To learn vue3 and springboot, it is absolutely necessary to write projects. In each project, login and registration must be inseparable. This is also a requirement for the start of a project.
Next, let's look at the project we wrote about getting started. First of all, build the project environment of vue3 and springboot. You can complete these constructions by yourself. After you have the shelf, you have to start loading things into it.
The first is the rendering of the login page. You can implement the style of your login page according to your own design. Here is a reference for you:
The code is also for your reference:
<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>After the style is available, we still need logic. The code above the front-end logic has been given. Now I will refer to the processing of the back-end and some situations of the database:
Control class :
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 ;
}
}
Entity class :
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 interface :
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();
}
To use mybatis-plus in springboot, the following dependencies must be added to the pom before it can be used:
</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>And the configuration of the database connection in the properties file:
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.StdOutImplalright. The above are all configurations, for your reference only.