Condivisione della tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ecco un'implementazione del progetto vue3+springboot+mybatis+mysql, che implementa semplicemente le funzioni di accesso e registrazione della separazione front-end e back-end. Gli strumenti principali sono: idea, navicat

Sommario

1. Crea il progetto vue3 e la configurazione iniziale

Crea un progetto vue3

2. Modificare la struttura del progetto

1) Struttura delle directory originale

2) Struttura delle directory modificata

Modifica e scrivi la pagina di registrazione dell'accesso

1）LoginAndRegister.vue

2) Home.vue

3)router

4）Login.css

5) Visualizzazione della pagina di registrazione dell'accesso

2. Crea il progetto springboot+mysql+mybatis e connettiti al database

3. Scrivere funzioni back-end di login e registrazione

1. Logica di accesso

2. Logica di registrazione

3. Parte del codice backend

4. Eseguire il progetto

---

1. Crea il progetto vue3 e la configurazione iniziale

1. Crea un progetto vue3

Per creare un progetto puoi fare riferimento ad uno dei miei articoli:

Crea un progetto vue3 personalizzato con il blog IDEA_idea vue3-CSDN

Struttura della directory iniziale dopo la creazione:

2. Modificare la struttura del progetto

Per prima cosa devi modificare la struttura della directory originale

1) Struttura delle directory originale

risorsepubblicare foto

componentiComponenti intermedi, solitamente riutilizzabili

instradatoreè il percorso in cui sono configurati i percorsi dei file di tutte le pagine principali

negozioGeneralmente utilizzato per la gestione dello stato vuex, come la memorizzazione di token, ecc.

visualizzazioniIl centro è la pagina principale

App.vueÈ il componente root dell'applicazione Vue.

principale.jsÈ il file di ingresso dell'applicazione, solitamente utilizzato per introdurre dipendenze come vue e vue router.

2) Struttura delle directory modificata

Per implementare la funzione di login e registrazione, la struttura della directory modificata è:

3. Scrivere la pagina di registrazione dell'accesso

1）LoginAndRegister.vue

Crea LoginAndRegister.vue nella cartella dei componenti per implementare la pagina e le funzioni di registrazione dell'accesso In questo caso creo solo un file .vue per l'accesso e la registrazione, in cui v-if viene utilizzato per determinare se gli elementi del blocco di accesso e del blocco di registrazione sono inclusi. . rendering, influenzandone così la visualizzazione.

Impostazioni iniziali

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

Alterna vero e falso quando si fa clic sul pulsante per alternare.

Dopo aver effettuato con successo la registrazione, torna alla sezione di accesso.

Per comodità e abitudini dell'utente, sebbene gli attributi utente includano ID, nome utente, password, telefono e sesso, durante la registrazione vengono inseriti solo nome utente e password e la funzione viene semplicemente implementata. La password non è crittografata e lo è non abbastanza sicuro Aggiornerò nuovamente l'articolo per scrivere su un metodo di accesso e registrazione più sicuro, nonché su come migliorare le informazioni personali dopo l'accesso.

AccediERegistrati.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) Home.vue

Home.vue è la pagina principale a cui si passa dopo aver effettuato con successo l'accesso.

Home.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

Configurazione del routing della pagina, reindirizzamento alla pagina di accesso quando il percorso è /, /login è la pagina di accesso e /home è la home page.

indice.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

Progettazione CSS per la pagina di registrazione dell'accesso.

Accesso.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) Visualizzazione della pagina di registrazione dell'accesso

I blocchi a forma di diamante sono disposti in modo casuale e inizialmente si presentano così:

Successivamente, ho aggiunto altri blocchi a forma di diamante e ne ho modificato la posizione e i colori. L'effetto finale è il seguente:

2. Crea il progetto springboot+mysql+mybatis e connettiti al database

Utilizza springboot, mysql, mybatis per creare semplicemente un progetto back-end e connetterti al database, fai riferimento a:

idea, spring boot+MySQL+progetto MyBatis crea e visualizza il contenuto della tabella del database sulla pagina web_idea visualizza il database sulla pagina web-CSDN Blog

Supplemento all'articolo:

Se trovi problematico scrivere i metodi set e get ogni volta che crei una classe di entità, puoi aggiungere le seguenti dipendenze in pom.xml:

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

Quindi utilizza l'annotazione @Data nella classe entità per omettere la scrittura dei metodi set e get:

Il processo è quasi lo stesso, ma i dati che ho creato questa volta sono diversi. Il motivo principale è che gli attributi e i dati della tabella utente sono cambiati (la differenza non è grande e la zuppa non cambia la medicina):

Si è verificato un problema: Maven continua a scaricare le dipendenze, ma non riceve risposta per molto tempo

Tuttavia, qualcosa è andato storto durante la creazione del progetto. Questa volta ho utilizzato un nuovo computer per creare il progetto back-end. Di conseguenza, dopo l'avvio, Maven continuava a scaricare varie dipendenze e plug -ins, e non ci fu risposta per molto tempo:

Soluzione:

Ho svuotato la cache e riavviato l'idea, ma ha avuto scarso effetto.

Successivamente ho scoperto che potrebbe essere perché Maven utilizza per impostazione predefinita un magazzino centrale estero e stavo utilizzando l'idea del plug-in Maven, quindi la velocità di download sarebbe molto lenta.

Quindi ho scaricato Maven localmente, fai riferimento al tutorial:

Tutorial per il download e l'installazione di Maven (super dettagliato)_maven installazione-blog CSDN

Scarica secondo il tutorial e modifica l'URL dell'immagine nel percorso di installazione di Maven->conf->settings.xml Tuttavia, non ho configurato le variabili di ambiente, l'ho impostato direttamente nell'idea in file->settings-> Compilazione, esecuzione, distribuzione->Strumenti di creazione-> In Maven, modifica il percorso home di Maven nel percorso locale:

Dopo la modifica, la velocità di download è effettivamente molto più elevata.

La struttura delle directory del progetto backend finale è la seguente:

3. Scrivere funzioni back-end di login e registrazione

1. Logica di accesso

Ottenere le informazioni compilate passate dal front-end, inclusi nome utente e password, e query in base al nome utente e alla password nel database. Se l'utente viene trovato, significa che l'utente esiste e il nome utente e la password corrispondono L'accesso ha esito positivo, altrimenti fallisce.

2. Logica di registrazione

Ottenere le informazioni di riempimento passate dal front-end, inclusi nome utente e password. Dopo aver valutato che le informazioni di input non sono vuote, cercare prima l'utente in base al nome utente nel database. Se trovato, il nome utente esiste già fallisce e vengono restituite le informazioni sull'errore. Se non vengono trovate, gli utenti possono registrarsi e inserire il record nel database. Dopo aver effettuato correttamente la registrazione, verrà visualizzato il blocco di accesso e il blocco di registrazione verrà nascosto.

3. Parte del codice backend

Tra questi risorse->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->servizio->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->servizio->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. Eseguire il progetto

Il front-end e il back-end vengono eseguiti e avviati separatamente Qui ho modificato la porta back-end in 8081 in application.properties e il front-end è l'8080 predefinito. Quindi, dopo che i progetti front-end e back-end sono stati eseguiti correttamente, inserisci http://. /localhost:8080 nel browser, controllalo nella rete degli strumenti per sviluppatori, connettiti correttamente al back-end e restituisci con successo diverse informazioni sui prompt e messaggi popup quando accedi e ti registri per l'input di test:

Dopo aver effettuato l'accesso con successo: