Partage de technologie

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

Voici une implémentation de projet de vue3+springboot+mybatis+mysql, qui implémente simplement les fonctions de connexion et d'enregistrement de séparation front-end et back-end. Les principaux outils sont : idea, navicat.

Table des matières

1. Créer un projet vue3 et une configuration initiale

Créer un projet vue3

2. Modifier la structure du projet

1) Structure de répertoire d'origine

2) Structure de répertoire modifiée

​Modifier et rédiger la page d'inscription de connexion

1)LoginAndRegister.vue

2)Accueil.vue

3) routeur

4)Login.css

5) Affichage de la page d'inscription de connexion

2. Créez le projet springboot+mysql+mybatis et connectez-vous à la base de données

3. Écrire les fonctions back-end de connexion et d'enregistrement

1. Logique de connexion

2. Logique d'inscription

3. Partie du code back-end

4. Exécutez le projet

---

1. Créer un projet vue3 et une configuration initiale

1. Créer un projet vue3

Pour créer un projet, vous pouvez vous référer à un de mes articles :

Créez un projet vue3 personnalisé avec le blog IDEA_idea vue3-CSDN

Structure de répertoire initiale après la création :

2. Modifier la structure du projet

Vous devez d’abord modifier la structure des répertoires d’origine

1) Structure de répertoire d'origine

actifsposter des photos

ComposantsComposants intermédiaires, généralement réutilisables

routeurest l'itinéraire dans lequel les chemins de fichiers de toutes les pages principales sont configurés

magasinGénéralement utilisé pour la gestion de l'état vuex, comme le stockage des jetons, etc.

vuesLe centre est la page principale

App.vueC'est le composant racine de l'application Vue.

main.jsC'est le fichier d'entrée de l'application, généralement utilisé pour introduire des dépendances telles que vue et vue router.

2) Structure de répertoire modifiée

Pour implémenter la fonction de connexion et d'enregistrement, la structure de répertoire modifiée est :

3. Rédigez la page d'inscription de connexion

1)LoginAndRegister.vue

Créez LoginAndRegister.vue dans le dossier des composants pour implémenter la page et les fonctions de connexion et d'enregistrement. Ici, je crée uniquement un fichier .vue pour la connexion et l'enregistrement, dans lequel v-if est utilisé pour déterminer si les éléments de bloc de connexion et de bloc d'enregistrement sont. inclus le rendu, affectant ainsi leur affichage.

Paramètres initiaux

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

Bascule entre vrai et faux lorsque vous cliquez sur le bouton pour basculer.

Après une inscription réussie, revenez à la section de connexion.

Pour des raisons de commodité et d'habitudes d'utilisation, bien que les attributs de l'utilisateur incluent l'identifiant, le nom d'utilisateur, le mot de passe, le téléphone et le sexe, seuls le nom d'utilisateur et le mot de passe sont renseignés lors de l'inscription et la fonction est simplement implémentée. Le mot de passe n'est pas crypté et est. pas assez sécurisé. Je mettrai à nouveau à jour l'article pour écrire sur une méthode de connexion et d'enregistrement plus sûre, ainsi que sur la manière de compléter les informations personnelles après la connexion.

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)Accueil.vue

Home.vue est la page principale à laquelle accéder après une connexion réussie.

Accueil.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) routeur

Configuration du routage des pages, redirection vers la page de connexion lorsque le chemin est /, /login est la page de connexion et /home est la page d'accueil.

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

Conception CSS pour la page d'enregistrement de connexion.

Connexion.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) Affichage de la page d'inscription de connexion

Les blocs en forme de losange sont disposés de manière aléatoire et ressemblent initialement à ceci :

Plus tard, j'ai ajouté quelques blocs supplémentaires en forme de losange et modifié leurs positions et leurs couleurs. L'effet final est le suivant :

2. Créez le projet springboot+mysql+mybatis et connectez-vous à la base de données

Utilisez springboot, mysql, mybatis pour simplement créer un projet back-end et vous connecter à la base de données, référence :

idea, le projet Spring Boot+MySQL+MyBatis crée et affiche le contenu de la table de base de données sur la page Web_idea affiche la base de données sur la page Web-CSDN Blog

Supplément à l'article :

Si vous trouvez difficile d'écrire des méthodes set et get à chaque fois que vous créez une classe d'entité, vous pouvez ajouter les dépendances suivantes dans pom.xml :

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

Utilisez ensuite l'annotation @Data dans la classe d'entité pour omettre d'écrire les méthodes set et get :

Le processus est presque le même, mais les données que j'ai créées cette fois sont différentes, la raison principale est que les attributs et les données de la table utilisateur ont changé (la différence n'est pas grande, donc la soupe ne change pas le médicament) :

Problème rencontré : maven continue de télécharger les dépendances, mais il n'y a pas de réponse pendant longtemps

Cependant, quelque chose s'est mal passé lors de la création du projet. Cette fois, j'ai utilisé un nouvel ordinateur pour créer le projet back-end. En conséquence, après le démarrage de Maven, il a continué à télécharger diverses dépendances et plug-ins. -ins, et il n'y a eu aucune réponse pendant longtemps :

Solution:

J'ai vidé le cache et relancé l'idée, mais cela a eu peu d'effet.

Plus tard, j'ai découvert que cela pouvait être dû au fait que Maven utilise par défaut un entrepôt central étranger et que j'utilisais l'idée du plug-in Maven, donc la vitesse de téléchargement serait très lente.

J'ai donc téléchargé maven en local, référez-vous au tutoriel :

Tutoriel de téléchargement et d'installation de Maven (super détaillé)_blog d'installation maven-CSDN

Téléchargez selon le tutoriel et modifiez l'URL de l'image dans le chemin d'installation de maven->conf->settings.xml. Cependant, je n'ai pas configuré les variables d'environnement, je l'ai directement définie dans l'idée dans file->settings->. Build, Execution, Deployment->Build Tools-> Dans Maven, remplacez le chemin d'accueil de Maven par le chemin local :

Après la modification, la vitesse de téléchargement est en effet bien plus rapide.

La structure des répertoires du projet backend final est la suivante :

3. Écrire les fonctions back-end de connexion et d'enregistrement

1. Logique de connexion

Obtenez les informations renseignées transmises par le front-end, y compris le nom d'utilisateur et le mot de passe, et effectuez une requête basée sur le nom d'utilisateur et le mot de passe dans la base de données. Si l'utilisateur est trouvé, cela signifie que l'utilisateur existe et que le nom d'utilisateur et le mot de passe correspondent. . La connexion est réussie, sinon elle échoue.

2. Logique d'inscription

Obtenez les informations de remplissage transmises par le front-end, y compris le nom d'utilisateur et le mot de passe. Après avoir jugé que les informations saisies ne sont pas vides, recherchez d'abord l'utilisateur en fonction du nom d'utilisateur dans la base de données. S'il est trouvé, le nom d'utilisateur existe déjà. échoue et les informations d'échec sont renvoyées. S'ils ne sont pas trouvés, les utilisateurs peuvent s'inscrire et insérer l'enregistrement dans la base de données. Après une inscription réussie, le bloc de connexion sera affiché et le bloc d'enregistrement sera masqué.

3. Partie du code back-end

Parmi eux ressources->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. Exécutez le projet

Les front-end et back-end sont exécutés et démarrés séparément. Ici, j'ai changé le port back-end en 8081 dans application.properties, et le front-end est le 8080 par défaut. Ainsi, une fois les projets front-end et back-end exécutés avec succès, entrez http:/ /localhost:8080 dans le navigateur. , vérifiez-le dans le réseau des outils de développement, connectez-vous avec succès au backend et lors de la connexion et de l'enregistrement pour la saisie de test, différentes informations d'invite et invites contextuelles peuvent être renvoyées avec succès :

Après une connexion réussie :