Κοινή χρήση τεχνολογίας

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

Εδώ είναι μια υλοποίηση έργου του vue3+springboot+mybatis+mysql, το οποίο απλώς υλοποιεί τις λειτουργίες σύνδεσης και εγγραφής διαχωρισμού front-end και back-end Τα κύρια εργαλεία είναι: idea, navicat

Πίνακας περιεχομένων

1. Δημιουργήστε το έργο vue3 και την αρχική διαμόρφωση

Δημιουργία έργου vue3

2. Τροποποιήστε τη δομή του έργου

1) Αρχική δομή καταλόγου

2) Τροποποιημένη δομή καταλόγου

​Επεξεργαστείτε και γράψτε τη σελίδα εγγραφής σύνδεσης

1）LoginAndRegister.vue

2) Home.vue

3) δρομολογητής

4) Login.css

5) Εμφάνιση σελίδας εγγραφής σύνδεσης

2. Δημιουργήστε έργο Springboot+mysql+mybatis και συνδεθείτε στη βάση δεδομένων

3. Γράψτε τις λειτουργίες σύνδεσης και εγγραφής back-end

1. Λογική σύνδεσης

2. Λογική εγγραφής

3. Τμήμα κώδικα υποστήριξης

4. Εκτελέστε το έργο

---

1. Δημιουργήστε το έργο vue3 και την αρχική διαμόρφωση

1. Δημιουργία έργου vue3

Για να δημιουργήσετε ένα έργο, μπορείτε να ανατρέξετε σε ένα από τα άρθρα μου:

Δημιουργήστε ένα προσαρμοσμένο έργο vue3 με το ιστολόγιο IDEA_idea vue3-CSDN

Αρχική δομή καταλόγου μετά τη δημιουργία:

2. Τροποποιήστε τη δομή του έργου

Πρώτα πρέπει να τροποποιήσετε την αρχική δομή καταλόγου

1) Αρχική δομή καταλόγου

περιουσιακά στοιχείαδημοσιεύστε φωτογραφίες

συστατικάΕνδιάμεσα εξαρτήματα, συνήθως επαναχρησιμοποιήσιμα

δρομολογητήείναι η διαδρομή στην οποία διαμορφώνονται οι διαδρομές αρχείων όλων των κύριων σελίδων

κατάστημαΧρησιμοποιείται γενικά για διαχείριση κατάστασης vuex, όπως αποθήκευση διακριτικών κ.λπ.

προβολέςΤο κέντρο είναι η κύρια σελίδα

App.vueΕίναι το ριζικό στοιχείο της εφαρμογής Vue.

main.jsΕίναι το αρχείο καταχώρισης της εφαρμογής, που χρησιμοποιείται συνήθως για την εισαγωγή εξαρτήσεων όπως το vue και ο δρομολογητής vue.

2) Τροποποιημένη δομή καταλόγου

Για την υλοποίηση της συνάρτησης σύνδεσης και εγγραφής, η τροποποιημένη δομή καταλόγου είναι:

3. Γράψτε τη σελίδα εγγραφής σύνδεσης

1）LoginAndRegister.vue

Δημιουργήστε LoginAndRegister.vue κάτω από το φάκελο components για την υλοποίηση της σελίδας σύνδεσης και εγγραφής και των συναρτήσεων Εδώ, δημιουργώ μόνο ένα αρχείο .vue για σύνδεση και εγγραφή, στο οποίο το v-if χρησιμοποιείται για να προσδιορίσει εάν τα στοιχεία μπλοκ σύνδεσης και εγγραφής είναι. συμπεριλαμβανομένης της απόδοσης, επηρεάζοντας έτσι την εμφάνισή τους.

Αρχικές ρυθμίσεις

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

Εναλλάσσει το true και false όταν κάνετε κλικ στο κουμπί για εναλλαγή.

Μετά την επιτυχή εγγραφή, επιστρέψτε στην ενότητα σύνδεσης.

Για λόγους ευκολίας και των συνηθειών του χρήστη, παρόλο που τα χαρακτηριστικά χρήστη περιλαμβάνουν αναγνωριστικό, όνομα χρήστη, κωδικό πρόσβασης, τηλέφωνο και φύλο, μόνο το όνομα χρήστη και ο κωδικός πρόσβασης συμπληρώνονται κατά την εγγραφή και η λειτουργία απλώς εφαρμόζεται δεν είναι αρκετά ασφαλές Θα ενημερώσω ξανά το άρθρο για να γράψω για μια ασφαλέστερη μέθοδο σύνδεσης και εγγραφής, καθώς και για τον τρόπο συμπλήρωσης προσωπικών στοιχείων μετά τη σύνδεση.

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 είναι η κύρια σελίδα στην οποία μεταβαίνει μετά την επιτυχή σύνδεση.

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) δρομολογητής

Διαμόρφωση δρομολόγησης σελίδας, ανακατεύθυνση στη σελίδα σύνδεσης όταν η διαδρομή είναι /, /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) Login.css

Σχεδιασμός CSS για σελίδα εγγραφής σύνδεσης.

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) Εμφάνιση σελίδας εγγραφής σύνδεσης

Τα μπλοκ σε σχήμα διαμαντιού είναι διατεταγμένα τυχαία και αρχικά μοιάζουν με αυτό:

Αργότερα, πρόσθεσα μερικά ακόμη μπλοκ σε σχήμα ρόμβου και άλλαξα τη θέση και τα χρώματα τους. Το τελικό αποτέλεσμα είναι το εξής:

2. Δημιουργήστε έργο Springboot+mysql+mybatis και συνδεθείτε στη βάση δεδομένων

Χρησιμοποιήστε Springboot, mysql, mybatis για να δημιουργήσετε απλώς ένα έργο back-end και να συνδεθείτε στη βάση δεδομένων, αναφορά:

ιδέα, Spring boot+MySQL+MyBatis έργο δημιουργεί και εμφανίζει τα περιεχόμενα του πίνακα βάσης δεδομένων στην ιστοσελίδα page_idea εμφανίζει τη βάση δεδομένων στην ιστοσελίδα-CSDN Blog

Συμπλήρωμα του άρθρου:

Εάν θεωρείτε ότι είναι δύσκολο να γράφετε set και να λαμβάνετε μεθόδους κάθε φορά που δημιουργείτε μια κλάση οντοτήτων, μπορείτε να προσθέσετε τις ακόλουθες εξαρτήσεις στο pom.xml:

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

Στη συνέχεια, χρησιμοποιήστε τον σχολιασμό @Data στην κλάση οντοτήτων για να παραλείψετε να γράψετε το σύνολο και να λάβετε μεθόδους:

Η διαδικασία είναι σχεδόν η ίδια, αλλά τα δεδομένα που δημιούργησα αυτή τη φορά είναι διαφορετικά. Ο κύριος λόγος είναι ότι τα χαρακτηριστικά και τα δεδομένα του πίνακα χρηστών έχουν αλλάξει (η διαφορά δεν είναι μεγάλη, επομένως η σούπα δεν αλλάζει το φάρμακο).

Αντιμετώπισε πρόβλημα: το maven συνεχίζει να κατεβάζει εξαρτήσεις, αλλά δεν υπάρχει απάντηση για μεγάλο χρονικό διάστημα

Ωστόσο, κάτι πήγε στραβά κατά τη δημιουργία του έργου. Αυτή τη φορά χρησιμοποίησα έναν νέο υπολογιστή για να δημιουργήσω το έργο back-end -ins, και δεν υπήρξε απάντηση για μεγάλο χρονικό διάστημα:

Λύση:

Εκκαθάριση την προσωρινή μνήμη και επανεκκίνησα την ιδέα, αλλά είχε μικρό αποτέλεσμα.

Αργότερα ανακάλυψα ότι μπορεί να οφείλεται στο ότι η Maven χρησιμοποιεί μια ξένη κεντρική αποθήκη από προεπιλογή, και εγώ χρησιμοποιούσα την προσθήκη maven στην ιδέα, οπότε η ταχύτητα λήψης θα ήταν πολύ αργή.

Έτσι, κατέβασα το maven τοπικά, ανατρέξτε στο σεμινάριο:

Οδηγός λήψης και εγκατάστασης του Maven (εξαιρετικά λεπτομερής)_ιστολόγιο εγκατάστασης του Maven-CSDN

Κατεβάστε σύμφωνα με το σεμινάριο και τροποποιήστε τη διεύθυνση URL της εικόνας στη διαδρομή εγκατάστασης maven->conf->settings.xml, ωστόσο, δεν διαμόρφωσα τις μεταβλητές περιβάλλοντος, το έθεσα απευθείας στην ιδέα στο file->settings-> Build, Execution, Deployment->Build Tools-> Στο Maven, αλλάξτε την αρχική διαδρομή Maven στην τοπική διαδρομή:

Μετά την τροποποίηση, η ταχύτητα λήψης είναι πράγματι πολύ μεγαλύτερη.

Η δομή καταλόγου του τελικού έργου υποστήριξης είναι η εξής:

3. Γράψτε τις λειτουργίες σύνδεσης και εγγραφής back-end

1. Λογική σύνδεσης

Λάβετε τις συμπληρωμένες πληροφορίες που διαβιβάζονται από το μπροστινό μέρος, συμπεριλαμβανομένων του ονόματος χρήστη και του κωδικού πρόσβασης, και το ερώτημα με βάση το όνομα χρήστη και τον κωδικό πρόσβασης στη βάση δεδομένων, αυτό σημαίνει ότι ο χρήστης υπάρχει και το όνομα χρήστη και ο κωδικός πρόσβασης αντιστοιχούν Η σύνδεση είναι επιτυχής, διαφορετικά αποτυγχάνει.

2. Λογική εγγραφής

Λάβετε τις πληροφορίες συμπλήρωσης που έχουν περάσει από το μπροστινό μέρος, συμπεριλαμβανομένου του ονόματος χρήστη και του κωδικού πρόσβασης Αφού κρίνετε ότι οι πληροφορίες εισόδου δεν είναι κενές, αναζητήστε πρώτα το όνομα χρήστη στη βάση δεδομένων αποτυγχάνει και επιστρέφονται οι πληροφορίες αποτυχίας, οι χρήστες μπορούν να εγγραφούν και να εισαγάγουν την εγγραφή στη βάση δεδομένων.

3. Τμήμα κώδικα υποστήριξης

Μεταξύ αυτών πόροι->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. Εκτελέστε το έργο

Το μπροστινό και το πίσω άκρο εκτελούνται και ξεκινούν χωριστά Εδώ άλλαξα τη θύρα πίσω άκρου σε 8081 στο application.properties και το μπροστινό μέρος είναι το προεπιλεγμένο 8080. Έτσι, αφού τα έργα του μπροστινού και του πίσω άκρου εκτελεστούν με επιτυχία, πληκτρολογήστε http:/. /localhost:8080 στο πρόγραμμα περιήγησης, ελέγξτε το στο δίκτυο των εργαλείων προγραμματιστή, συνδεθείτε με επιτυχία στο backend και κατά τη σύνδεση και την εγγραφή για είσοδο δοκιμής, μπορούν να επιστραφούν με επιτυχία διαφορετικές πληροφορίες προτροπής και αναδυόμενα μηνύματα:

Μετά την επιτυχή είσοδο: