Teknologian jakaminen

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

Tässä on projektitoteutus vue3+springboot+mybatis+mysql, joka yksinkertaisesti toteuttaa sisäänkirjautumis- ja rekisteröintitoiminnot front-end ja back-end erottamiseen Tärkeimmät työkalut ovat: idea, navicat

Sisällysluettelo

1. Luo vue3-projekti ja alkukokoonpano

Luo vue3-projekti

2. Muokkaa projektin rakennetta

1) Alkuperäinen hakemistorakenne

2) Muokattu hakemistorakenne

Muokkaa ja kirjoita sisäänkirjautumissivua

1) LoginAndRegister.vue

2) Home.vue

3) reititin

4) Kirjaudu.css

5) Kirjautumisrekisteröintisivun näyttö

2. Luo springboot+mysql+mybatis-projekti ja muodosta yhteys tietokantaan

3. Kirjoita sisäänkirjautumisen ja rekisteröinnin taustatoiminnot

1. Kirjautumislogiikka

2. Rekisteröintilogiikka

3. Taustakoodin osa

4. Suorita projekti

---

1. Luo vue3-projekti ja alkukokoonpano

1. Luo vue3-projekti

Voit luoda projektin tutustumalla yhteen artikkeleistani:

Luo mukautettu vue3-projekti IDEA_idea vue3-CSDN-blogin avulla

Alkuperäinen hakemistorakenne luomisen jälkeen:

2. Muokkaa projektin rakennetta

Ensin sinun on muutettava alkuperäistä hakemistorakennetta

1) Alkuperäinen hakemistorakenne

omaisuuttalaita kuvia

komponentitVälikomponentit, yleensä uudelleenkäytettäviä

reititinon reitti, jolla kaikkien pääsivujen tiedostopolut on määritetty

tallentaaYleensä käytetään vuex-tilan hallintaan, kuten tokenien tallentamiseen jne.

näkymätKeskus on pääsivu

App.vueSe on Vue-sovelluksen juurikomponentti.

main.jsSe on sovelluksen syöttötiedosto, jota käytetään yleensä tuomaan käyttöön riippuvuuksia, kuten vue ja vue-reititin.

2) Muokattu hakemistorakenne

Kirjautumis- ja rekisteröintitoiminnon toteuttamiseksi muutettu hakemistorakenne on:

3. Kirjoita sisäänkirjautumissivu

1) LoginAndRegister.vue

Luo LoginAndRegister.vue komponenttien kansioon toteuttaaksesi sisäänkirjautumis- ja rekisteröintisivun ja toiminnot. Tässä luon vain .vue-tiedoston kirjautumista ja rekisteröintiä varten, jossa v-if:n avulla määritetään, ovatko kirjautumislohko- ja rekisteröintilohkoelementit. mukaan lukien, mikä vaikuttaa niiden näyttöön.

Alkuasetukset

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

Vaihtaa tosi ja epätosi, kun painiketta napsautetaan vaihtaaksesi.

Kun rekisteröinti on onnistunut, vaihda takaisin sisäänkirjautumisosioon.

Mukavuuden ja käyttötottumusten vuoksi, vaikka käyttäjämääritteinä ovat id, käyttäjätunnus, salasana, puhelin ja sukupuoli, rekisteröinnin yhteydessä täytetään vain käyttäjätunnus ja salasana, ja toiminto on yksinkertaisesti toteutettu. Salasanaa ei ole salattu ja se on ei ole tarpeeksi turvallinen Päivitän artikkelin uudelleen kirjoittaakseni turvallisemmasta kirjautumis- ja rekisteröintitavasta sekä siitä, kuinka henkilökohtaisia ​​tietoja täydennetään sisäänkirjautumisen jälkeen.

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

Home.vue on pääsivu, joka hyppää onnistuneen kirjautumisen jälkeen.

Home.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) reititin

Sivun reititysmääritykset, uudelleenohjaus kirjautumissivulle, kun polku on /, /login on kirjautumissivu ja /home on kotisivu.

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) Kirjaudu.css

CSS-suunnittelu kirjautumisrekisteröintisivulle.

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) Kirjautumisrekisteröintisivun näyttö

Timantin muotoiset lohkot on järjestetty satunnaisesti, ja alun perin ne näyttävät tältä:

Myöhemmin lisäsin muutaman vinoneliön muotoisen lohkon ja vaihdoin niiden paikkoja ja värejä.

2. Luo springboot+mysql+mybatis-projekti ja muodosta yhteys tietokantaan

Käytä springboot, mysql, mybatis rakentaaksesi taustaprojektin ja muodostaaksesi yhteyden tietokantaan, viittaus:

idea, spring boot+MySQL+MyBatis projekti luo ja näyttää tietokantataulukon sisällön verkkosivulla_idea näyttää tietokannan verkkosivulla-CSDN-blogi

Täydennys artikkeliin:

Jos set- ja get-menetelmien kirjoittaminen tuntuu hankalalta aina, kun luot entiteettiluokan, voit lisätä seuraavat riippuvuudet tiedostoon pom.xml:

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

Käytä sitten entiteettiluokan @Data-merkintää jättääksesi joukon kirjoittamatta ja hankkiaksesi menetelmät:

Prosessi on melkein sama, mutta tällä kertaa luomani tiedot ovat erilaisia. Pääsyynä on se, että käyttäjätaulukon attribuutit ja tiedot ovat muuttuneet (ero ei ole suuri, joten keitto ei muuta lääkettä):

Tapahtui ongelma: maven lataa jatkuvasti riippuvuuksia, mutta vastausta ei tule pitkään aikaan

Jotain meni kuitenkin pieleen projektin luomiseen. Tällä kertaa rakensin sen ensimmäistä kertaa -in, eikä vastausta tullut pitkään aikaan:

Ratkaisu:

Tyhjensin välimuistin ja käynnistin idean uudelleen, mutta sillä ei ollut juurikaan vaikutusta.

Myöhemmin huomasin, että se saattaa johtua siitä, että Maven käyttää oletuksena ulkomaista keskusvarastoa, ja käytin ideana maven-laajennusta, joten latausnopeus olisi erittäin hidas.

Joten latasin mavenin paikallisesti, katso opetusohjelma:

Mavenin lataus- ja asennusopastus (erittäin yksityiskohtainen)_maven-asennus-CSDN-blogi

Lataa ohjeen mukaan ja muokkaa kuvan URL-osoitetta kohdassa maven asennuspolku->conf->settings.xml. En kuitenkaan määrittänyt ympäristömuuttujia suoraan ideassa tiedosto->asetukset-> Build, Execution, Deployment-> Build Tools-> Muuta Mavenissa Mavenin kotipolku paikalliseksi poluksi:

Muutoksen jälkeen latausnopeus on todellakin paljon nopeampi.

Lopullisen taustaprojektin hakemistorakenne on seuraava:

3. Kirjoita sisäänkirjautumisen ja rekisteröinnin taustatoiminnot

1. Kirjautumislogiikka

Hanki käyttöliittymän lähettämät täytetyt tiedot, mukaan lukien käyttäjätunnus ja salasana, ja kysely tietokannan käyttäjätunnuksen ja salasanan perusteella. Jos käyttäjä löytyy, se tarkoittaa, että käyttäjä on olemassa ja käyttäjätunnus ja salasana vastaavat Kirjautuminen onnistui, muuten se epäonnistuu.

2. Rekisteröintilogiikka

Hanki käyttöliittymän välittämät täyttötiedot, mukaan lukien käyttäjätunnus ja salasana, kun olet päättänyt, että syötetyt tiedot eivät ole tyhjiä, etsi käyttäjä ensin tietokannasta käyttäjänimen mukaan epäonnistuu ja palautetaan tiedot, jos niitä ei löydy, käyttäjät voivat rekisteröityä ja lisätä tietueen onnistuneen rekisteröinnin jälkeen.

3. Taustakoodin osa

Niistä resurssit->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. Suorita projekti

Etu- ja takapäät ajetaan ja käynnistetään erikseen. Muutin takapään portiksi 8081:ksi Application.propertiesissa, ja etupää on oletusarvo 8080. Joten kun etu- ja takapään projektit on suoritettu onnistuneesti, kirjoita http:/. /localhost:8080 selaimessa , tarkista se kehittäjätyökalujen verkosta, muodosta yhteys taustajärjestelmään, ja kirjautuessasi sisään ja rekisteröityessäsi testisyöttöä varten, voit palauttaa onnistuneesti erilaisia ​​kehotteita ja ponnahduskehotteita:

Onnistuneen kirjautumisen jälkeen: