기술나눔

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

다음은 프런트엔드와 백엔드 분리의 로그인 및 등록 기능을 간단히 구현한 vue3+springboot+mybatis+mysql의 프로젝트 구현입니다. 주요 도구는 idea, navicat입니다.

목차

1. vue3 프로젝트 생성 및 초기 구성

vue3 프로젝트 생성

2. 프로젝트 구조 수정

1) 원래 디렉토리 구조

2) 디렉토리 구조 수정

​로그인 등록 페이지 편집 및 작성

1) 로그인 및 등록.vue

2) 홈.vue

3) 라우터

4) 로그인.css

5) 로그인 등록 페이지 표시

2. springboot+mysql+mybatis 프로젝트를 생성하고 데이터베이스에 연결

3. 로그인 및 등록 백엔드 기능 작성

1. 로그인 로직

2. 등록 로직

3. 백엔드 코드 부분

4. 프로젝트 실행

---

1. vue3 프로젝트 생성 및 초기 구성

1. vue3 프로젝트 생성

프로젝트를 만들려면 내 기사 중 하나를 참조하세요.

IDEA_idea vue3-CSDN 블로그를 사용하여 사용자 정의 vue3 프로젝트 만들기

생성 후 초기 디렉터리 구조:

2. 프로젝트 구조 수정

먼저 원래 디렉터리 구조를 수정해야 합니다.

1) 원래 디렉토리 구조

자산사진 게시

구성 요소일반적으로 재사용이 가능한 중간 구성 요소

라우터모든 메인 페이지의 파일 경로가 구성되는 경로입니다.

가게일반적으로 토큰 저장 등 vuex 상태 관리에 사용됩니다.

견해센터가 메인페이지입니다

앱뷰Vue 애플리케이션의 루트 구성요소입니다.

메인.js일반적으로 vue 및 vue router와 같은 종속성을 도입하는 데 사용되는 애플리케이션의 항목 파일입니다.

2) 디렉토리 구조 수정

로그인 및 등록 기능을 구현하기 위해 수정된 디렉터리 구조는 다음과 같습니다.

3. 로그인 등록 페이지 작성

1) 로그인 및 등록.vue

로그인 및 등록 페이지와 기능을 구현하기 위해 구성 요소 폴더 아래에 LoginAndRegister.vue를 생성합니다. 여기서는 로그인 및 등록을 위한 .vue 파일만 생성합니다. 여기서 v-if는 로그인 블록 및 등록 블록 요소가 있는지 확인하는 데 사용됩니다. 렌더링이 포함되어 디스플레이에 영향을 줍니다.

초기 설정

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

버튼을 클릭하여 전환하면 true와 false가 전환됩니다.

등록이 성공적으로 완료되면 로그인 섹션으로 다시 전환하세요.

편의와 사용자 습관을 위해 사용자 속성에는 ID, 사용자 이름, 비밀번호, 전화번호, 성별이 포함되어 있지만 등록 시 사용자 이름과 비밀번호만 입력되며 비밀번호는 암호화되지 않고 단순하게 기능이 구현됩니다. 보안이 충분하지 않습니다. 보다 안전한 로그인 및 등록 방법과 로그인 후 개인 정보를 작성하는 방법에 대해 다시 기사를 업데이트하겠습니다.

로그인앤레지스터.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) 홈.vue

Home.vue는 로그인 성공 후 이동하는 메인 페이지입니다.

홈.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) 라우터

페이지 라우팅 구성, 경로가 /인 경우 로그인 페이지로 리디렉션됩니다. /login은 로그인 페이지이고 /home은 홈 페이지입니다.

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) 로그인.css

로그인 등록 페이지의 CSS 디자인입니다.

로그인.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) 로그인 등록 페이지 표시

다이아몬드 모양의 블록은 무작위로 배열되어 있으며 처음에는 다음과 같습니다.

나중에 다이아몬드 모양의 블록을 몇 개 더 추가하고 위치와 색상을 변경했습니다. 최종 효과는 다음과 같습니다.

2. springboot+mysql+mybatis 프로젝트를 생성하고 데이터베이스에 연결

springboot, mysql, mybatis를 사용하여 간단히 백엔드 프로젝트를 빌드하고 데이터베이스에 연결하세요. 다음을 참조하세요.

idea, spring boot+MySQL+MyBatis 프로젝트는 데이터베이스 테이블의 내용을 웹 페이지에 생성하고 표시합니다.idea는 웹 페이지에 데이터베이스를 표시합니다-CSDN 블로그

기사 보충:

엔터티 클래스를 생성할 때마다 set 및 get 메서드를 작성하는 것이 번거롭다면 pom.xml에 다음 종속성을 추가할 수 있습니다.

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

그런 다음 엔터티 클래스의 @Data 주석을 사용하여 set 및 get 메서드 작성을 생략합니다.

과정은 거의 동일하지만 이번에 생성한 데이터가 다릅니다. 주된 이유는 사용자 테이블 속성과 데이터가 변경되었기 때문입니다(차이가 크지 않아 국물이 약을 바꾸지는 않습니다).

문제 발생: Maven이 종속성을 계속 다운로드하지만 오랫동안 응답이 없습니다.

그런데 프로젝트를 생성하는 중에 문제가 발생했습니다. 이번에는 새 컴퓨터를 사용하여 백엔드 프로젝트를 처음 생성했습니다. 결과적으로 Maven을 시작한 후에도 계속해서 다양한 종속성 및 플러그를 다운로드했습니다. -ins, 오랫동안 응답이 없었습니다.

해결책:

캐시를 지우고 아이디어를 다시 시작했지만 효과가 거의 없었습니다.

나중에 Maven이 기본적으로 외국 중앙웨어 하우스를 사용하기 때문일 수도 있다는 것을 알게 되었고, 아이디어상 Maven 플러그인을 사용하고 있었기 때문에 다운로드 속도가 매우 느렸습니다.

그래서 Maven을 로컬로 다운로드했습니다. 튜토리얼을 참조하세요.

Maven 다운로드 및 설치 튜토리얼(매우 상세함)_maven 설치-CSDN 블로그

튜토리얼에 따라 다운로드하고 maven 설치 경로->conf->settings.xml에서 이미지의 URL을 수정합니다. 그러나 환경 변수는 file->settings->에서 직접 설정하지 않았습니다. 빌드, 실행, 배포->빌드 도구-> Maven에서 Maven 홈 경로를 로컬 경로로 변경합니다.

수정 후 다운로드 속도가 실제로 훨씬 빨라졌습니다.

최종 백엔드 프로젝트의 디렉터리 구조는 다음과 같습니다.

3. 로그인 및 등록 백엔드 기능 작성

1. 로그인 로직

사용자 이름과 비밀번호를 포함하여 프런트 엔드에서 전달한 채워진 정보를 얻고 데이터베이스의 사용자 이름과 비밀번호를 기반으로 쿼리합니다. 사용자가 발견되면 사용자가 존재하고 사용자 이름과 비밀번호가 일치한다는 것을 의미합니다. . 로그인이 성공하고, 그렇지 않으면 실패합니다.

2. 등록 로직

사용자 이름과 비밀번호를 포함하여 프런트 엔드에서 전달한 작성 정보를 얻습니다. 입력 정보가 ​​비어 있지 않다고 판단한 후 먼저 데이터베이스에서 사용자 이름에 따라 사용자를 검색합니다. 실패하고 실패 정보가 반환됩니다. 찾을 수 없으면 사용자는 등록하고 데이터베이스에 레코드를 삽입할 수 있습니다. 등록 블록은 숨겨집니다.

3. 백엔드 코드 부분

그중 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>

자바->com.example.demo->매퍼->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. 프로젝트 실행

프런트엔드와 백엔드는 별도로 실행되고 시작됩니다. 여기서는 application.properties에서 백엔드 포트를 8081로 변경했으며 프런트엔드는 기본 8080입니다. 따라서 프런트엔드와 백엔드 프로젝트가 성공적으로 실행된 후 http:/를 입력합니다. /localhost:8080 브라우저에서 개발자 도구의 네트워크에서 확인하고 백엔드에 성공적으로 연결한 후 로그인하고 테스트 입력을 등록하면 다양한 프롬프트 정보와 팝업 프롬프트가 성공적으로 반환될 수 있습니다.

로그인 성공 후: