Compartilhamento de tecnologia

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

Aqui está uma implementação de projeto de vue3+springboot+mybatis+mysql, que simplesmente implementa as funções de login e registro de separação de front-end e back-end. As principais ferramentas são: idea, navicat.

Índice

1. Crie o projeto vue3 e a configuração inicial

Criar projeto vue3

2. Modifique a estrutura do projeto

1) Estrutura de diretório original

2) Estrutura de diretório modificada

Edite e escreva a página de registro de login

1）LoginAndRegister.vue

2）Página inicial.vue

3）roteador

4）Login.css

5) Exibição da página de registro de login

2. Crie o projeto springboot+mysql+mybatis e conecte-se ao banco de dados

3. Escreva funções de back-end de login e registro

1. Lógica de login

2. Lógica de registro

3. Parte do código de back-end

4. Execute o projeto

---

1. Crie o projeto vue3 e a configuração inicial

1. Crie o projeto vue3

Para criar um projeto, você pode consultar um dos meus artigos:

Crie um projeto vue3 personalizado com o blog IDEA_idea vue3-CSDN

Estrutura de diretório inicial após a criação:

2. Modifique a estrutura do projeto

Primeiro você precisa modificar a estrutura de diretórios original

1) Estrutura de diretório original

ativospostar fotos

componentesComponentes intermediários, geralmente reutilizáveis

roteadoré a rota na qual os caminhos dos arquivos de todas as páginas principais são configurados

lojaGeralmente usado para gerenciamento de estado vuex, como armazenamento de tokens, etc.

VisualizaçõesCentro é a página principal

Aplicativo.vueÉ o componente raiz do aplicativo Vue.

principal.jsÉ o arquivo de entrada da aplicação, geralmente usado para introduzir dependências como vue e vue router.

2) Estrutura de diretório modificada

Para implementar a função de login e registro, a estrutura de diretórios modificada é:

3. Escreva a página de registro de login

1）LoginAndRegister.vue

Crie LoginAndRegister.vue na pasta de componentes para implementar a página e funções de login e registro. Aqui, eu apenas crio um arquivo .vue para login e registro, no qual v-if é usado para determinar se os elementos do bloco de login e do bloco de registro são. renderização incluída, afetando assim sua exibição.

Configurações iniciais

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

Alterna verdadeiro e falso quando o botão é clicado para alternar.

Após o registro bem-sucedido, volte para a seção de login.

Por uma questão de comodidade e hábitos do usuário, embora os atributos do usuário incluam id, nome de usuário, senha, telefone e sexo, apenas o nome de usuário e a senha são preenchidos durante o registro, e a função é simplesmente implementada. A senha não é criptografada e é. não é seguro o suficiente. Atualizarei o artigo novamente para escrever sobre um método de login e registro mais seguro, bem como como preencher informações pessoais após o login.

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）Página inicial.vue

Home.vue é a página principal que acessa após o login bem-sucedido.

Página inicial.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）roteador

Configuração de roteamento de página, redireciona para a página de login quando o caminho é /, /login é a página de login e /home é a página inicial.

í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）Login.css

Design CSS para página de registro de login.

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) Exibição da página de registro de login

Os blocos em forma de diamante estão dispostos aleatoriamente e inicialmente têm a seguinte aparência:

Posteriormente, adicionei mais alguns blocos em forma de diamante e mudei suas posições e cores. O efeito final é o seguinte:

2. Crie o projeto springboot+mysql+mybatis e conecte-se ao banco de dados

Use springboot, mysql, mybatis para simplesmente construir um projeto back-end e conectar-se ao banco de dados, referência:

ideia, projeto spring boot + MySQL + MyBatis cria e exibe o conteúdo da tabela do banco de dados na página da web_idea exibe o banco de dados na página da web-CSDN Blog

Suplemento ao artigo:

Se você achar difícil escrever métodos set e get sempre que criar uma classe de entidade, poderá adicionar as seguintes dependências em pom.xml:

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

Em seguida, use a anotação @Data na classe de entidade para omitir a gravação dos métodos set e get:

O processo é quase o mesmo, mas os dados que criei desta vez são diferentes. O principal motivo é que os atributos e dados da tabela do usuário mudaram (a diferença não é grande, então a sopa não altera o medicamento):

Encontrou um problema: o maven continua baixando dependências, mas não há resposta por muito tempo

No entanto, algo deu errado durante a criação do projeto. Desta vez, usei um novo computador para criar o projeto de back-end. Como resultado, depois que o Maven foi iniciado, ele continuou baixando várias dependências e plugando. -ins, e não houve resposta por muito tempo:

Solução:

Limpei o cache e reiniciei a ideia, mas surtiu pouco efeito.

Mais tarde, descobri que pode ser porque o Maven usa um armazém central estrangeiro por padrão, e eu estava usando a ideia do plug-in maven, então a velocidade de download seria muito lenta.

Então baixei o maven localmente, consulte o tutorial:

Tutorial de download e instalação do Maven (super detalhado)_maven Installation-CSDN blog

Baixe conforme o tutorial e modifique a URL da imagem no caminho de instalação do maven->conf->settings.xml Porém, não configurei as variáveis ​​de ambiente, configurei diretamente na ideia em arquivo->settings->. Build, Execution, Deployment->Build Tools-> No Maven, altere o caminho inicial do Maven para o caminho local:

Após a modificação, a velocidade de download é realmente muito mais rápida.

A estrutura de diretórios do projeto de back-end final é a seguinte:

3. Escreva funções de back-end de login e registro

1. Lógica de login

Obtenha as informações preenchidas passadas pelo front end, incluindo nome de usuário e senha, e consulte com base no nome de usuário e senha no banco de dados. Se o usuário for encontrado, significa que o usuário existe e o nome de usuário e a senha correspondem. . O login foi bem-sucedido, caso contrário, falhará.

2. Lógica de registro

Obtenha as informações de preenchimento passadas pelo front end, incluindo nome de usuário e senha. Após julgar que as informações de entrada não estão vazias, primeiro procure o usuário de acordo com o nome de usuário no banco de dados. falha e as informações de falha são retornadas. Se não for encontrado, os usuários podem registrar e inserir o registro no banco de dados. Após o registro bem-sucedido, o bloco de login será exibido e o bloco de registro será oculto.

3. Parte do código de back-end

Entre eles 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->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. Execute o projeto

Os front-ends e back-ends são executados e iniciados separadamente. Aqui alterei a porta de back-end para 8081 em application.properties, e o front-end é o padrão 8080. Portanto, depois que os projetos de front-end e back-end forem executados com sucesso, digite http:/. /localhost:8080 no navegador, verifique-o na rede das ferramentas do desenvolvedor, conecte-se com sucesso ao back-end e, ao fazer login e registrar-se para entrada de teste, diferentes informações de prompt e prompts pop-up podem ser retornados com sucesso:

Após login bem-sucedido: