Compartir tecnología

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

Aquí hay una implementación del proyecto de vue3 + springboot + mybatis + mysql, que simplemente implementa las funciones de inicio de sesión y registro de separación de front-end y back-end. Las herramientas principales son: idea, navicat.

Tabla de contenido

1. Cree el proyecto vue3 y la configuración inicial.

Crear proyecto vue3

2. Modificar la estructura del proyecto.

1) Estructura de directorio original

2) Estructura de directorio modificada

​Edite y escriba la página de registro de inicio de sesión

1) Iniciar sesión y registrarse.vue

2) Inicio.vue

3) enrutador

4) Iniciar sesión.css

5) Visualización de la página de registro de inicio de sesión

2. Cree el proyecto springboot+mysql+mybatis y conéctese a la base de datos.

3. Escriba funciones de back-end de inicio de sesión y registro.

1. Lógica de inicio de sesión

2. Lógica de registro

3. Parte del código de backend

4. Ejecute el proyecto

---

1. Cree el proyecto vue3 y la configuración inicial.

1. Crear proyecto vue3

Para crear un proyecto, puedes consultar uno de mis artículos:

Cree un proyecto vue3 personalizado con el blog IDEA_idea vue3-CSDN

Estructura de directorio inicial después de la creación:

2. Modificar la estructura del proyecto.

Primero necesitas modificar la estructura del directorio original.

1) Estructura de directorio original

activospublicar fotos

componentesComponentes intermedios, normalmente reutilizables.

enrutadores la ruta en la que se configuran las rutas de archivos de todas las páginas principales

almacenarGeneralmente se utiliza para la gestión del estado de vuex, como el almacenamiento de tokens, etc.

puntos de vistaCentro es la página principal.

Aplicación.vueEs el componente raíz de la aplicación Vue.

principal.jsEs el archivo de entrada de la aplicación, generalmente utilizado para introducir dependencias como vue y vue router.

2) Estructura de directorio modificada

Para implementar la función de inicio de sesión y registro, la estructura de directorio modificada es:

3. Escriba la página de registro de inicio de sesión.

1) Iniciar sesión y registrarse.vue

Cree LoginAndRegister.vue en la carpeta de componentes para implementar la página y las funciones de inicio de sesión y registro. Aquí, solo creo un archivo .vue para el inicio de sesión y el registro, en el que se usa v-if para determinar si los elementos del bloque de inicio de sesión y del bloque de registro son. incluido el renderizado, afectando así su visualización.

Ajustes iniciales

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

Alterna entre verdadero y falso cuando se hace clic en el botón para alternar.

Después de registrarse exitosamente, regrese a la sección de inicio de sesión.

Por conveniencia y hábitos de usuario, aunque los atributos de usuario incluyen identificación, nombre de usuario, contraseña, teléfono y género, durante el registro solo se completan el nombre de usuario y la contraseña, y la función simplemente se implementa. La contraseña no está cifrada y está. no es lo suficientemente seguro. Actualizaré el artículo nuevamente para escribir sobre un método de inicio de sesión y registro más seguro, así como también sobre cómo completar la información personal después de iniciar sesión.

Iniciar sesión y registrarse.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) Inicio.vue

Home.vue es la página principal a la que salta después de iniciar sesión correctamente.

Inicio.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) enrutador

Configuración de enrutamiento de página, redirige a la página de inicio de sesión cuando la ruta es /, /login es la página de inicio de sesión y /home es la página de inicio.

índice.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) Iniciar sesión.css

Diseño CSS para la página de registro de inicio de sesión.

Inicio de sesión.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) Visualización de la página de registro de inicio de sesión

Los bloques en forma de diamante están dispuestos al azar e inicialmente se ven así:

Luego, agregué algunos bloques más en forma de diamante y cambié sus posiciones y colores. El efecto final es el siguiente:

2. Cree el proyecto springboot+mysql+mybatis y conéctese a la base de datos.

Utilice springboot, mysql, mybatis para simplemente crear un proyecto de back-end y conectarse a la base de datos, referencia:

idea, el proyecto spring boot + MySQL + MyBatis crea y muestra el contenido de la tabla de la base de datos en la página web_idea muestra la base de datos en la página web-Blog CSDN

Suplemento del artículo:

Si le resulta problemático escribir métodos set y get cada vez que crea una clase de entidad, puede agregar las siguientes dependencias en pom.xml:

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

Luego use la anotación @Data en la clase de entidad para omitir escribir los métodos set y get:

El proceso es casi el mismo, pero los datos que creé esta vez son diferentes. La razón principal es que los atributos y datos de la tabla de usuario han cambiado (la diferencia no es grande, por lo que la sopa no cambia el medicamento):

Encontré un problema: maven sigue descargando dependencias, pero no hay respuesta durante mucho tiempo

Sin embargo, algo salió mal al crear el proyecto. Esta vez usé una computadora nueva para crear el proyecto back-end. Como resultado, después de iniciar Maven, siguió descargando varias dependencias y complementos. -ins, y no hubo respuesta durante mucho tiempo:

Solución:

Borré el caché y reinicié la idea, pero tuvo poco efecto.

Más tarde descubrí que podría deberse a que Maven usa un almacén central externo de forma predeterminada y yo estaba usando la idea del complemento de Maven, por lo que la velocidad de descarga sería muy lenta.

Entonces descargué maven localmente, consulte el tutorial:

Tutorial de descarga e instalación de Maven (súper detallado)_instalación de Maven-blog CSDN

Descargue de acuerdo con el tutorial y modifique la URL de la imagen en la ruta de instalación de Maven->conf->settings.xml. Sin embargo, no configuré las variables de entorno, las configuré directamente en la idea en archivo->settings->. Compilación, ejecución, implementación->Herramientas de compilación-> En Maven, cambie la ruta de inicio de Maven a la ruta local:

Después de la modificación, la velocidad de descarga es mucho más rápida.

La estructura de directorios del proyecto final de backend es la siguiente:

3. Escriba funciones de back-end de inicio de sesión y registro.

1. Lógica de inicio de sesión

Obtenga la información completa pasada por el front-end, incluido el nombre de usuario y la contraseña, y realice una consulta basada en el nombre de usuario y la contraseña en la base de datos. Si se encuentra el usuario, significa que el usuario existe y el nombre de usuario y la contraseña corresponden. El inicio de sesión es exitoso; de lo contrario, falla.

2. Lógica de registro

Obtenga la información de llenado pasada por el front-end, incluido el nombre de usuario y la contraseña. Después de juzgar que la información de entrada no está vacía, primero busque el usuario según el nombre de usuario en la base de datos. falla y se devuelve información de falla. Si no se encuentra, los usuarios pueden registrarse e insertar el registro en la base de datos. Después del registro exitoso, se mostrará el bloque de inicio de sesión y se ocultará el bloque de registro.

3. Parte del código de backend

Entre ellos recursos->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->servicio->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->servicio->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->controlador->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. Ejecute el proyecto

El front-end y el back-end se ejecutan e inician por separado. Aquí cambié el puerto del back-end a 8081 en application.properties, y el front-end es el 8080 predeterminado. Entonces, después de que los proyectos del front-end y el back-end se hayan ejecutado correctamente, ingrese http:/. /localhost:8080 en el navegador, verifíquelo en la red de herramientas de desarrollador, conéctese exitosamente al backend y, al iniciar sesión y registrarse para la entrada de prueba, se pueden devolver con éxito diferentes mensajes emergentes e información:

Después de iniciar sesión correctamente: