vue3 springboot mybatis praktik proyek mysql-implementasi login dan registrasi sederhana function

vue3 springboot mybatis praktik proyek mysql-implementasi fungsi login dan registrasi sederhana

2024-07-12

Berikut adalah implementasi proyek vue3+springboot+mybatis+mysql, yang hanya mengimplementasikan fungsi login dan registrasi pemisahan front-end dan back-end. Alat utamanya adalah: idea, navicat

Daftar isi

1. Buat proyek vue3 dan konfigurasi awal

Buat proyek vue3

2. Memodifikasi struktur proyek

1) Struktur direktori asli

2) Struktur direktori yang dimodifikasi

Edit dan tulis halaman pendaftaran login

5) Tampilan halaman registrasi login

2. Buat proyek springboot+mysql+mybatis dan sambungkan ke database

3. Tulis fungsi back-end login dan registrasi

1. Logika masuk

2. Logika registrasi

3. Bagian kode backend

4. Jalankan proyeknya

1. Buat proyek vue3 dan konfigurasi awal

1. Buat proyek vue3

Untuk membuat proyek, Anda dapat merujuk ke salah satu artikel saya:

Buat proyek vue3 khusus dengan blog IDEA_idea vue3-CSDN

Struktur direktori awal setelah pembuatan:

2. Memodifikasi struktur proyek

Pertama, Anda perlu mengubah struktur direktori asli

1) Struktur direktori asli

aktivamemposting gambar

komponenKomponen perantara, biasanya dapat digunakan kembali

ruteradalah rute di mana jalur file dari semua halaman utama dikonfigurasi

tokoUmumnya digunakan untuk manajemen status vuex, seperti menyimpan token, dll.

pandanganTengah adalah halaman utama

Aplikasi.vueIni adalah komponen root dari aplikasi Vue.

utama.jsIni adalah file entri aplikasi, biasanya digunakan untuk memperkenalkan dependensi seperti vue dan vue router.

2) Struktur direktori yang dimodifikasi

Untuk mengimplementasikan fungsi login dan registrasi, struktur direktori yang dimodifikasi adalah:

3. Tulis halaman registrasi login

1）LoginDanDaftar.vue

Buat LoginAndRegister.vue di bawah folder komponen untuk mengimplementasikan halaman dan fungsi registrasi login. Di sini, saya hanya membuat file .vue untuk login dan registrasi, di mana v-if digunakan untuk menentukan apakah elemen blok login dan blok registrasi disertakan. . rendering, sehingga memengaruhi tampilannya.

Pengaturan awal

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

Beralih benar dan salah ketika tombol diklik untuk beralih.

Setelah registrasi berhasil, beralih kembali ke bagian login.

Demi kenyamanan dan kebiasaan pengguna, meskipun atribut pengguna meliputi id, nama pengguna, kata sandi, nomor telepon, dan jenis kelamin, hanya nama pengguna dan kata sandi yang diisi saat pendaftaran, dan fungsinya diterapkan secara sederhana tidak cukup aman. Saya akan memperbarui artikel lagi untuk menulis tentang metode login dan registrasi yang lebih aman, serta cara meningkatkan informasi pribadi setelah 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）Beranda.vue

Home.vue adalah halaman utama yang dituju setelah login berhasil.

Beranda.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)perute

Konfigurasi perutean halaman, alihkan ke halaman login ketika jalurnya adalah /, /login adalah halaman login, dan /home adalah halaman beranda.

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

Desain CSS untuk halaman registrasi 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) Tampilan halaman registrasi login

Balok-balok berbentuk berlian tersebut disusun secara acak, dan awalnya terlihat seperti ini:

Kemudian, saya menambahkan beberapa blok lagi berbentuk berlian dan mengubah posisi dan warnanya. Efek akhirnya adalah sebagai berikut:

2. Buat proyek springboot+mysql+mybatis dan sambungkan ke database

Gunakan springboot, mysql, mybatis untuk sekadar membangun proyek back-end dan terhubung ke database, referensi:

ide, proyek spring boot+MySQL+MyBatis membuat dan menampilkan konten tabel database di halaman web_idea menampilkan database di halaman web-Blog CSDN

Tambahan artikel:

Jika Anda merasa kesulitan untuk menulis metode set dan get setiap kali Anda membuat kelas entitas, Anda dapat menambahkan dependensi berikut di pom.xml:


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

Kemudian gunakan anotasi @Data di kelas entitas untuk menghilangkan penulisan metode set dan get:

Prosesnya hampir sama, namun data yang saya buat kali ini berbeda. Alasan utamanya adalah atribut dan data tabel pengguna telah berubah (perbedaannya tidak besar, dan supnya tidak mengubah obatnya):

Mengalami masalah: maven terus mengunduh dependensi, tetapi tidak ada respons untuk waktu yang lama

Namun, ada yang tidak beres saat membuat proyek. Kali ini saya menggunakan komputer baru untuk membuat proyek back-end. Ini adalah pertama kalinya saya membuatnya. Akibatnya, setelah Maven dimulai, ia terus mengunduh berbagai dependensi dan plug -ins, dan tidak ada jawaban untuk waktu yang lama:

Larutan:

Saya membersihkan cache dan memulai kembali ide tersebut, tetapi pengaruhnya kecil.

Belakangan saya mengetahui bahwa itu mungkin karena Maven menggunakan gudang pusat asing secara default, dan saya menggunakan ide plug-in maven, sehingga kecepatan unduh akan sangat lambat.

Jadi saya mengunduh maven secara lokal, lihat tutorialnya:

Tutorial pengunduhan dan instalasi Maven (super detail)_instalasi maven-blog CSDN

Unduh sesuai tutorial dan ubah URL gambar di jalur instalasi maven->conf->settings.xml. Namun, saya tidak mengkonfigurasi variabel lingkungan. Saya langsung mengaturnya dalam ide di file->settings-> Build, Execution, Deployment->Build Tools-> Di Maven, ubah jalur beranda Maven ke jalur lokal:

Setelah dimodifikasi, kecepatan download memang jauh lebih cepat.

Struktur direktori proyek backend akhir adalah sebagai berikut:

3. Tulis fungsi back-end login dan registrasi

1. Logika masuk

Dapatkan informasi lengkap yang diteruskan oleh front end, termasuk nama pengguna dan kata sandi, dan kueri berdasarkan nama pengguna dan kata sandi dalam database. Jika pengguna ditemukan, berarti pengguna tersebut ada dan nama pengguna serta kata sandinya sesuai .Login berhasil, jika tidak maka gagal.

2. Logika registrasi

Mendapatkan informasi pengisian yang diteruskan oleh front end, termasuk nama pengguna dan kata sandi. Setelah menilai bahwa informasi yang dimasukkan tidak kosong, cari dulu pengguna sesuai dengan nama pengguna di database gagal dan informasi kegagalan dikembalikan. Jika tidak ditemukan, Pengguna dapat mendaftar dan memasukkan catatan ke dalam database. Setelah registrasi berhasil, blok login akan ditampilkan dan blok registrasi akan disembunyikan.

3. Bagian kode backend

Diantaranya sumber daya->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->layanan->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->layanan->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. Jalankan proyeknya

Ujung depan dan belakang dijalankan dan dimulai secara terpisah. Di sini saya mengubah port ujung belakang menjadi 8081 di properti aplikasi, dan ujung depan adalah default 8080. Jadi setelah proyek ujung depan dan belakang berhasil dijalankan, masukkan http:/ /localhost:8080 di browser. , periksa di jaringan alat pengembang, berhasil terhubung ke backend, dan berhasil mengembalikan informasi prompt dan pop-up yang berbeda saat masuk dan mendaftar untuk input pengujian:

Setelah berhasil login:

Berbagi teknologi

vue3 springboot mybatis praktik proyek mysql-implementasi fungsi login dan registrasi sederhana

1. Buat proyek vue3 dan konfigurasi awal

1. Buat proyek vue3

2. Memodifikasi struktur proyek

1) Struktur direktori asli

2) Struktur direktori yang dimodifikasi

3. Tulis halaman registrasi login

1）LoginDanDaftar.vue

2）Beranda.vue

3)perute

4）Login.css

5) Tampilan halaman registrasi login

2. Buat proyek springboot+mysql+mybatis dan sambungkan ke database

3. Tulis fungsi back-end login dan registrasi

1. Logika masuk

2. Logika registrasi

3. Bagian kode backend

4. Jalankan proyeknya

Profil pribadi

informasi kontak saya