Vue3 Springboot Mybatis MySQL-Projekt Praxis-Implementierung der einfachen Anmelde- und Registrierungsfunktion

vue3 Springboot Mybatis MySQL-Projekt Übung – Implementierung einfacher Anmelde- und Registrierungsfunktionen

2024-07-12

Hier ist eine Projektimplementierung von vue3+springboot+mybatis+mysql, die einfach die Anmelde- und Registrierungsfunktionen der Front-End- und Back-End-Trennung implementiert. Die Haupttools sind: Idee, Navicat

Inhaltsverzeichnis

1. Erstellen Sie ein Vue3-Projekt und eine Erstkonfiguration

Erstellen Sie ein vue3-Projekt

2. Ändern Sie die Projektstruktur

1) Ursprüngliche Verzeichnisstruktur

2) Geänderte Verzeichnisstruktur

Bearbeiten und schreiben Sie die Login-Registrierungsseite

1) LoginAndRegister.vue

2) Startseite.vue

3) Router

4) Login.css

5) Anzeige der Anmelderegistrierungsseite

2. Erstellen Sie ein Springboot+MySQL+Mybatis-Projekt und stellen Sie eine Verbindung zur Datenbank her

3. Schreiben Sie Anmelde- und Registrierungs-Backend-Funktionen

1. Anmeldelogik

2. Registrierungslogik

3. Backend-Codeteil

4. Führen Sie das Projekt aus

1. Erstellen Sie ein Vue3-Projekt und eine Erstkonfiguration

1. Erstellen Sie ein vue3-Projekt

Um ein Projekt zu erstellen, können Sie sich auf einen meiner Artikel beziehen:

Erstellen Sie ein benutzerdefiniertes Vue3-Projekt mit dem Blog IDEA_idea vue3-CSDN

Anfängliche Verzeichnisstruktur nach der Erstellung:

2. Ändern Sie die Projektstruktur

Zuerst müssen Sie die ursprüngliche Verzeichnisstruktur ändern

1) Ursprüngliche Verzeichnisstruktur

VermögenswerteBilder posten

KomponentenZwischenkomponenten, meist wiederverwendbar

Routerist die Route, in der die Dateipfade aller Hauptseiten konfiguriert werden

speichernWird im Allgemeinen für die Vuex-Statusverwaltung verwendet, z. B. zum Speichern von Token usw.

AnsichtenMitte ist die Hauptseite

App.vueEs ist die Stammkomponente der Vue-Anwendung.

Haupt-JSEs handelt sich um die Eintragsdatei der Anwendung, die normalerweise zum Einführen von Abhängigkeiten wie Vue und Vue-Router verwendet wird.

2) Geänderte Verzeichnisstruktur

Um die Anmelde- und Registrierungsfunktion zu implementieren, lautet die geänderte Verzeichnisstruktur:

3. Schreiben Sie die Login-Registrierungsseite

1) LoginAndRegister.vue

Erstellen Sie LoginAndRegister.vue im Komponentenordner, um die Anmelde- und Registrierungsseite und -funktionen zu implementieren. Hier erstelle ich nur eine .vue-Datei für die Anmeldung und Registrierung, in der v-if verwendet wird, um zu bestimmen, ob die Anmeldeblock- und Registrierungsblockelemente vorhanden sind enthalten.

Grundeinstellungen

v-if="loginShow"为true, v-if="registerShow"为false

Schaltet zwischen wahr und falsch um, wenn zum Umschalten auf die Schaltfläche geklickt wird.

Nach erfolgreicher Registrierung wechseln Sie zurück zum Login-Bereich.

Aus Gründen der Bequemlichkeit und Benutzergewohnheiten umfassen die Benutzerattribute zwar ID, Benutzername, Passwort, Telefonnummer und Geschlecht, bei der Registrierung werden jedoch nur der Benutzername und das Passwort eingegeben und die Funktion wird einfach implementiert. Das Passwort ist nicht verschlüsselt nicht sicher genug. Ich werde den Artikel erneut aktualisieren, um über eine sicherere Anmelde- und Registrierungsmethode sowie darüber zu schreiben, wie persönliche Daten nach der Anmeldung vervollständigt werden.

LoginAndRegister.vue:


<template>
  <div class="container">
    <div class="login-box" v-if="loginShow">
<!--      菱形群-->
      <div class="decoration1 decoration"></div>
      <div class="decoration2 decoration"></div>
      <div class="decoration3 decoration"></div>
      <div class="decoration4 decoration"></div>
      <div class="decoration5 decoration"></div>
      <div class="decoration decoration4 decoration6"></div>
      <div class="decoration decoration7 decoration2"></div>
      <div class="decoration decoration8 decoration3"></div>
      <div class="login-title">
        <h1>Login</h1>
      </div>
      <div class="login-part">
        <input class="login-input" v-model="username" placeholder="Username" />
        <input class="login-input" type="password" v-model="password" placeholder="Password" />
        <button class="login-button" @click="login">Login</button>
        <div>
          还未注册？点击<a class="change-link" @click="changeToRegister">这里</a>注册
        </div>
      </div>
    </div>
    <div class="login-box" v-if="registerShow">
      <!--      菱形群-->
      <div class="decoration1 decoration"></div>
      <div class="decoration2 decoration"></div>
      <div class="decoration3 decoration"></div>
      <div class="decoration4 decoration"></div>
      <div class="decoration5 decoration"></div>
      <div class="decoration decoration4 decoration6"></div>
      <div class="decoration decoration7 decoration2"></div>
      <div class="decoration decoration8 decoration3"></div>
      <div class="login-title">
        <h1>Register</h1>
      </div>
      <div class="login-part">
        <input class="login-input" v-model="username" placeholder="Username" />
        <input class="login-input" type="password" v-model="password" placeholder="Password" />
        <button class="login-button" @click="register">Register</button>
        <span class="change-link" @click="changeToLogin">返回登录</span>
      </div>
    </div>
<!--    <div class="decoration decoration1"></div>-->
<!--    <div class="decoration decoration2"></div>-->
<!--    <div class="decoration decoration3"></div>-->
<!--    <div class="decoration decoration4"></div>-->
  </div>
</template>
 
<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router' // 导入 useRouter
 
import '../style/Login.css' // 导入css
export default {
  name: 'LoginVue',
  setup () {
    const username = ref('')
    const password = ref('')
    const phone = ref('')
    const loginShow = ref(true)
    const registerShow = ref(false)
    const router = useRouter()
 
    const changeToRegister = async () => {
      loginShow.value = false
      registerShow.value = true
    }
 
    const changeToLogin = async () => {
      loginShow.value = true
      registerShow.value = false
    }
 
    const login = async () => {
      console.log('Login with:', username.value, password.value)
      try {
        const formData = new FormData()
        formData.append('username', username.value)
        formData.append('password', password.value)
        const response = await fetch('http://localhost:8081/api/user/login', {
          method: 'POST',
          body: formData
        })
        const data = await response.json()
        if (response.ok) {
          console.log('Link success', data)
          if (data.code === 200) {
            // 登录成功
            alert('登录成功！')
            await router.push('/home')
          } else {
            alert(data.msg)
          }
        } else {
          console.error('Link failed', data)
        }
      } catch (error) {
        console.error('Error login', error)
      }
    }
 
    const register = async () => {
      console.log('Register with:', username.value, password.value)
      try {
        const formData = new FormData()
        formData.append('username', username.value)
        formData.append('password', password.value)
        const response = await fetch('http://localhost:8081/api/user/register', {
          method: 'POST',
          body: formData
        })
        const data = await response.json()
        if (response.ok) {
          if (data.code === 200) {
            console.log('Register success', data)
            alert('注册成功！')
            await changeToLogin()
          } else {
            console.log('Register failed', data)
            alert(data.msg)
          }
        } else {
          console.error('Register failed', data)
        }
      } catch (error) {
        console.error('Error during register', error)
      }
    }
 
    return { username, password, phone, login, loginShow, registerShow, changeToRegister, register, changeToLogin }
  }
}
</script>
 
<style>
 
</style>

2) Startseite.vue

Home.vue ist die Hauptseite, zu der nach erfolgreicher Anmeldung gesprungen wird.

Startseite.vue:


<template>
首页<br><br>
  <button class="login-button" @click="signOut">退出登录</button>
</template>
 
<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'HomeVue',
  setup () {
    const router = useRouter()
    const signOut = async () => {
      await router.push('/')
    }
    return { signOut }
  }
}
</script>
 
<style scoped>
 
</style>

3) Router

Konfiguration der Seitenweiterleitung: Umleitung zur Anmeldeseite, wenn der Pfad / lautet, /login die Anmeldeseite und /home die Startseite ist.

index.js:


import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/LoginAndRegister.vue'
import Home from '../views/Home.vue'
 
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  }
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
 
export default router

4) Login.css

CSS-Design für die Login-Registrierungsseite.

Login.css:


*{
    margin: 0;
    padding: 0;
}
.container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.login-box{
    background-color: white;
    padding: 40px 100px;
    border-radius: 8px;
    box-shadow: 0 0 5px 1px gainsboro;
    position: relative;
}
.login-part{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
    gap: 20px;
}
.login-input{
    width: 250px;
    height: 30px;
    border-radius: 8px;
}
.login-button{
    height: 40px;
    border-radius: 8px;
    background-color: #2c3e50;
    color: white;
    transition: 0.5s;
}
.login-button:hover{
    background-color: darkcyan;
    font-size: 15px;
    transition: 0.5s;
}
.login-button:active{
    background-color: darkslateblue;
}
.change-link{
    color: #00BFFF;
    text-decoration: underline;
}
.change-link:hover{
    color: cornflowerblue;
}
 
.decoration {
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(to left, #FDF5E6, #96CDCD );
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    z-index: 1;
}
.decoration1 {
    top: 150px;
    left: -210px;
}
.decoration2 {
    top: 20px;
    right: -20px;
    width: 100px; /* 第二个菱形的大小 */
    height: 100px;
    background: linear-gradient(to right, #FFF5EE, #E6E6FA);
}
.decoration3 {
    top: 50px;
    right: -180px;
    width: 200px; /* 第三个菱形的大小 */
    height: 200px;
    background: linear-gradient(to right, #7FFFD4, cadetblue);
}
.decoration4 {
    top: 200px;
    right: -200px;
    width: 500px; /* 第三个菱形的大小 */
    height: 500px;
    z-index: -1;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: linear-gradient(to right, #FFFACD, #00BFFF);
}
.decoration5 {
    top: -100px;
    right: 200px;
    width: 400px; /* 第三个菱形的大小 */
    height: 400px;
    z-index: -1;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: linear-gradient(to right, #AFEEEE, #00BFFF);
}
.decoration6 {
    top: 10px;
    right: -680px;
}
 
.decoration7 {
    top: -170px;
    right: -500px;
}
 
.decoration8 {
    top: -140px;
    right: -655px;
}

5) Anzeige der Anmelderegistrierungsseite

Die rautenförmigen Blöcke sind zufällig angeordnet und sehen zunächst so aus:

Später habe ich noch ein paar rautenförmige Blöcke hinzugefügt und ihre Positionen und Farben geändert. Der Endeffekt ist wie folgt:

2. Erstellen Sie ein Springboot+MySQL+Mybatis-Projekt und stellen Sie eine Verbindung zur Datenbank her

Verwenden Sie Springboot, MySQL und Mybatis, um einfach ein Back-End-Projekt zu erstellen und eine Verbindung zur Datenbank herzustellen. Referenz:

Idee, Spring Boot + MySQL + MyBatis-Projekt erstellt und zeigt den Inhalt der Datenbanktabelle auf der Webseite an._idea zeigt die Datenbank auf der Webseite an – CSDN-Blog

Ergänzung zum Artikel:

Wenn Sie Schwierigkeiten haben, bei jeder Erstellung einer Entitätsklasse Set- und Get-Methoden zu schreiben, können Sie in pom.xml die folgenden Abhängigkeiten hinzufügen:


		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
		</dependency>

Verwenden Sie dann die Annotation @Data in der Entitätsklasse, um das Schreiben der Set- und Get-Methoden zu überspringen:

Der Prozess ist fast derselbe, aber die Daten, die ich dieses Mal erstellt habe, sind unterschiedlich. Der Hauptgrund ist, dass sich die Attribute und Daten der Benutzertabelle geändert haben (der Unterschied ist nicht groß, sodass die Suppe die Medizin nicht verändert):

Es ist ein Problem aufgetreten: Maven lädt weiterhin Abhängigkeiten herunter, aber es erfolgt lange Zeit keine Antwort

Beim Erstellen des Projekts ist jedoch ein Fehler aufgetreten. Diesmal habe ich das Back-End-Projekt zum ersten Mal erstellt. Infolgedessen wurden nach dem Start von Maven weiterhin verschiedene Abhängigkeiten heruntergeladen -ins, und es kam lange Zeit keine Antwort:

Lösung:

Ich habe den Cache geleert und die Idee neu gestartet, aber sie hatte kaum Wirkung.

Später stellte ich fest, dass es daran liegen könnte, dass Maven standardmäßig ein ausländisches Zentrallager verwendet und ich die Idee des Maven-Plug-Ins verwendet habe, sodass die Download-Geschwindigkeit sehr langsam wäre.

Also habe ich Maven lokal heruntergeladen, siehe Tutorial:

Maven-Download- und Installations-Tutorial (sehr detailliert)_Maven-Installation-CSDN-Blog

Laden Sie es gemäß dem Tutorial herunter und ändern Sie die URL des Bildes im Maven-Installationspfad->conf->settings.xml. Ich habe die Umgebungsvariablen jedoch nicht direkt in der Idee unter file->settings-> festgelegt Build, Execution, Deployment->Build Tools->Ändern Sie in Maven den Maven-Home-Pfad in den lokalen Pfad:

Nach der Änderung ist die Download-Geschwindigkeit tatsächlich viel schneller.

Die Verzeichnisstruktur des endgültigen Backend-Projekts ist wie folgt:

3. Schreiben Sie Anmelde- und Registrierungs-Backend-Funktionen

1. Anmeldelogik

Erhalten Sie die vom Frontend übergebenen ausgefüllten Informationen, einschließlich Benutzername und Passwort, und fragen Sie basierend auf dem Benutzernamen und dem Passwort in der Datenbank ab. Wenn der Benutzer gefunden wird, bedeutet dies, dass der Benutzer existiert und der Benutzername und das Passwort übereinstimmen . Die Anmeldung ist erfolgreich, andernfalls schlägt sie fehl.

2. Registrierungslogik

Erhalten Sie die vom Frontend übergebenen Füllinformationen, einschließlich Benutzername und Passwort. Nachdem Sie festgestellt haben, dass die Eingabeinformationen nicht leer sind, suchen Sie zunächst nach dem Benutzernamen in der Datenbank schlägt fehl und es werden Fehlerinformationen zurückgegeben. Benutzer können sich registrieren und den Datensatz in die Datenbank einfügen. Nach erfolgreicher Registrierung wird der Anmeldeblock angezeigt und der Registrierungsblock ausgeblendet.

3. Backend-Codeteil

Darunter resources->mapper->UserMapper.xml:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
 
<mapper namespace="com.example.demo.mapper.UserMapper" >
    <resultMap id="result" type="com.example.demo.entity.User">
        <result property="id" column="id" />
        <result property="username" column="username" />
        <result property="password" column="password" />
        <result property="phone" column="phone" />
        <result property="gender" column="gender"/>
    </resultMap>
 
    <!--    通过用户名和密码查找对应用户，用于登录-->
    <select id="findUserByNameAndPwd" resultMap="result" parameterType="User">
        select * from user
        where username = #{username}
        and password = #{password}
    </select>
 
 
    <!--    通过用户名查找对应用户，用于注册检验用户名是否已存在-->
    <select id="findUserByName" resultMap="result" parameterType="User">
        select * from user
        where username = #{username}
    </select>
 
    <!--    添加用户-->
    <insert id="addUser" parameterType="User">
        insert into user (username, password)
        values ( #{username}, #{password} )
    </insert>
 
</mapper>

java->com.example.demo->mapper->UserMapper.java:


package com.example.demo.mapper;
 
import com.example.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;
 
@Mapper
public interface UserMapper {
    // 通过用户名和密码查找对应用户
    public User findUserByNameAndPwd(User user);
    // 通过用户名查找用户
    public User findUserByName(User user);
    // 添加用户
    public void addUser(User user);
}

java->com.example.demo->service->UserService.java:


package com.example.demo.service;
 
import com.example.demo.entity.User;
 
public interface UserService {
    // 通过用户名和密码查找对应id
    public User findUserByNameAndPwd(User user);
    // 通过用户名查找用户
    public User findUserByName(User user);
//     添加用户
    public void addUser(User user);
}

java->com.example.demo->service->UserServiceImpl.java:


package com.example.demo.service;
 
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import jakarta.annotation.Resource;
import org.springframework.stereotype.Service;
 
@Service
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;
 
    // 通过用户名和密码查找对应id
    @Resource
    public User findUserByNameAndPwd(User user){
        return userMapper.findUserByNameAndPwd(user);
    }
 
    // 通过用户名查找用户
    @Resource
    public User findUserByName(User user){
        return userMapper.findUserByName(user);
    }
 
//     添加用户
    @Resource
    public void addUser(User user){
        userMapper.addUser(user);
    }
}

java->com.example.demo->controller->UserController.java:


package com.example.demo.controller;
 
 
import com.example.demo.entity.User;
import com.example.demo.result.Result;
import com.example.demo.service.UserService;
import jakarta.annotation.Resource;
import org.springframework.web.bind.annotation.*;
 
 
@RestController
@RequestMapping("/api/user")
public class UserController {
    @Resource
    UserService userService;
 
    // 登录
    @CrossOrigin
    @PostMapping(value = "/login")
    public Result login(@ModelAttribute("user") User user){
        String username=user.getUsername();
        String password=user.getPassword();
        System.out.println("Login received username: " + username);
        System.out.println("Login received password: " + password);
        User userCheck = new User();
        userCheck.setUsername(username);
        userCheck.setPassword(password);
        System.out.println(userCheck.getUsername() + " " + userCheck.getPassword());
        try{
            User findUser = userService.findUserByNameAndPwd(userCheck);
            if(findUser != null){
                return Result.success(findUser);
            }else {
                return Result.failure(401,"用户名或密码错误");
            }
        }catch (Exception e){
            return Result.failure(500,"服务器异常");
        }
    }
 
    // 注册
    @CrossOrigin
    @PostMapping(value = "/register")
    public Result register(@ModelAttribute("user") User user){
//        String username = "222";
//        String password = "222";
        User userCheck = new User();
        userCheck.setUsername(user.getUsername());
        userCheck.setPassword(user.getPassword());
        if(userCheck.getUsername() == null || userCheck.getUsername().isEmpty() || userCheck.getPassword() == null || userCheck.getPassword().isEmpty()){
            System.out.println("用户名或密码不可为空");
            return Result.failure(201,"用户名和密码不可为空");
        }else {
            System.out.println("Register received username: " + userCheck.getUsername());
            System.out.println("Register received password: " + userCheck.getPassword());
            try{
                // 先在数据库中查找是否已有用户名相同的用户
                User findUser = userService.findUserByName(userCheck);
                if(findUser != null){
                    // 用户名已存在
                    return Result.failure(202,"用户名已存在!");
                }
                else {
                    // 新用户，数据库添加记录
                    userService.addUser(userCheck);
                    return Result.success(userCheck);
                }
            }catch (Exception e) {
                return Result.failure(500, "服务器异常");
//            }
            }
        }
    }
}

4. Führen Sie das Projekt aus

Das Front-End und das Back-End werden separat ausgeführt und gestartet. Hier habe ich den Back-End-Port in application.properties auf 8081 geändert, und das Front-End ist der Standard 8080. Nachdem die Front- und Back-End-Projekte erfolgreich ausgeführt wurden, geben Sie http:/ ein. /localhost:8080 im Browser, überprüfen Sie es im Netzwerk der Entwicklertools, stellen Sie erfolgreich eine Verbindung zum Backend her, und beim Anmelden und Registrieren für die Testeingabe können verschiedene Eingabeaufforderungsinformationen und Popup-Eingabeaufforderungen erfolgreich zurückgegeben werden:

Nach erfolgreicher Anmeldung:

Technologieaustausch

vue3 Springboot Mybatis MySQL-Projekt Übung – Implementierung einfacher Anmelde- und Registrierungsfunktionen

1. Erstellen Sie ein Vue3-Projekt und eine Erstkonfiguration

1. Erstellen Sie ein vue3-Projekt

2. Ändern Sie die Projektstruktur

1) Ursprüngliche Verzeichnisstruktur

2) Geänderte Verzeichnisstruktur

3. Schreiben Sie die Login-Registrierungsseite

1) LoginAndRegister.vue

2) Startseite.vue

3) Router

4) Login.css

5) Anzeige der Anmelderegistrierungsseite

2. Erstellen Sie ein Springboot+MySQL+Mybatis-Projekt und stellen Sie eine Verbindung zur Datenbank her

3. Schreiben Sie Anmelde- und Registrierungs-Backend-Funktionen

1. Anmeldelogik

2. Registrierungslogik

3. Backend-Codeteil

4. Führen Sie das Projekt aus

Persönliches Profil

meine Kontaktdaten