le mie informazioni di contatto
Posta[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Ecco un'implementazione del progetto vue3+springboot+mybatis+mysql, che implementa semplicemente le funzioni di accesso e registrazione della separazione front-end e back-end. Gli strumenti principali sono: idea, navicat
Sommario
1. Crea il progetto vue3 e la configurazione iniziale
2. Modificare la struttura del progetto
1) Struttura delle directory originale
2) Struttura delle directory modificata
Modifica e scrivi la pagina di registrazione dell'accesso
5) Visualizzazione della pagina di registrazione dell'accesso
2. Crea il progetto springboot+mysql+mybatis e connettiti al database
3. Scrivere funzioni back-end di login e registrazione
Per creare un progetto puoi fare riferimento ad uno dei miei articoli:
Crea un progetto vue3 personalizzato con il blog IDEA_idea vue3-CSDN
Struttura della directory iniziale dopo la creazione:
Per prima cosa devi modificare la struttura della directory originale
risorsepubblicare foto
componentiComponenti intermedi, solitamente riutilizzabili
instradatoreè il percorso in cui sono configurati i percorsi dei file di tutte le pagine principali
negozioGeneralmente utilizzato per la gestione dello stato vuex, come la memorizzazione di token, ecc.
visualizzazioniIl centro è la pagina principale
App.vueÈ il componente root dell'applicazione Vue.
principale.jsÈ il file di ingresso dell'applicazione, solitamente utilizzato per introdurre dipendenze come vue e vue router.
Per implementare la funzione di login e registrazione, la struttura della directory modificata è:
Crea LoginAndRegister.vue nella cartella dei componenti per implementare la pagina e le funzioni di registrazione dell'accesso In questo caso creo solo un file .vue per l'accesso e la registrazione, in cui v-if viene utilizzato per determinare se gli elementi del blocco di accesso e del blocco di registrazione sono inclusi. . rendering, influenzandone così la visualizzazione.
Impostazioni iniziali
v-if="loginShow"为true, v-if="registerShow"为false
Alterna vero e falso quando si fa clic sul pulsante per alternare.
Dopo aver effettuato con successo la registrazione, torna alla sezione di accesso.
Per comodità e abitudini dell'utente, sebbene gli attributi utente includano ID, nome utente, password, telefono e sesso, durante la registrazione vengono inseriti solo nome utente e password e la funzione viene semplicemente implementata. La password non è crittografata e lo è non abbastanza sicuro Aggiornerò nuovamente l'articolo per scrivere su un metodo di accesso e registrazione più sicuro, nonché su come migliorare le informazioni personali dopo l'accesso.
AccediERegistrati.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>
Home.vue è la pagina principale a cui si passa dopo aver effettuato con successo l'accesso.
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>
Configurazione del routing della pagina, reindirizzamento alla pagina di accesso quando il percorso è /, /login è la pagina di accesso e /home è la home page.
indice.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
Progettazione CSS per la pagina di registrazione dell'accesso.
Accesso.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;
- }
I blocchi a forma di diamante sono disposti in modo casuale e inizialmente si presentano così:
Successivamente, ho aggiunto altri blocchi a forma di diamante e ne ho modificato la posizione e i colori. L'effetto finale è il seguente:
Utilizza springboot, mysql, mybatis per creare semplicemente un progetto back-end e connetterti al database, fai riferimento a:
Supplemento all'articolo:
Se trovi problematico scrivere i metodi set e get ogni volta che crei una classe di entità, puoi aggiungere le seguenti dipendenze in pom.xml:
- <dependency>
- <groupId>org.projectlombok</groupId>
- <artifactId>lombok</artifactId>
- </dependency>
Quindi utilizza l'annotazione @Data nella classe entità per omettere la scrittura dei metodi set e get:
Il processo è quasi lo stesso, ma i dati che ho creato questa volta sono diversi. Il motivo principale è che gli attributi e i dati della tabella utente sono cambiati (la differenza non è grande e la zuppa non cambia la medicina):
Si è verificato un problema: Maven continua a scaricare le dipendenze, ma non riceve risposta per molto tempo
Tuttavia, qualcosa è andato storto durante la creazione del progetto. Questa volta ho utilizzato un nuovo computer per creare il progetto back-end. Di conseguenza, dopo l'avvio, Maven continuava a scaricare varie dipendenze e plug -ins, e non ci fu risposta per molto tempo:
Soluzione:
Ho svuotato la cache e riavviato l'idea, ma ha avuto scarso effetto.
Successivamente ho scoperto che potrebbe essere perché Maven utilizza per impostazione predefinita un magazzino centrale estero e stavo utilizzando l'idea del plug-in Maven, quindi la velocità di download sarebbe molto lenta.
Quindi ho scaricato Maven localmente, fai riferimento al tutorial:
Scarica secondo il tutorial e modifica l'URL dell'immagine nel percorso di installazione di Maven->conf->settings.xml Tuttavia, non ho configurato le variabili di ambiente, l'ho impostato direttamente nell'idea in file->settings-> Compilazione, esecuzione, distribuzione->Strumenti di creazione-> In Maven, modifica il percorso home di Maven nel percorso locale:
Dopo la modifica, la velocità di download è effettivamente molto più elevata.
La struttura delle directory del progetto backend finale è la seguente:
Ottenere le informazioni compilate passate dal front-end, inclusi nome utente e password, e query in base al nome utente e alla password nel database. Se l'utente viene trovato, significa che l'utente esiste e il nome utente e la password corrispondono L'accesso ha esito positivo, altrimenti fallisce.
Ottenere le informazioni di riempimento passate dal front-end, inclusi nome utente e password. Dopo aver valutato che le informazioni di input non sono vuote, cercare prima l'utente in base al nome utente nel database. Se trovato, il nome utente esiste già fallisce e vengono restituite le informazioni sull'errore. Se non vengono trovate, gli utenti possono registrarsi e inserire il record nel database. Dopo aver effettuato correttamente la registrazione, verrà visualizzato il blocco di accesso e il blocco di registrazione verrà nascosto.
Tra questi risorse->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->servizio->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->servizio->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, "服务器异常");
- // }
- }
- }
- }
- }
Il front-end e il back-end vengono eseguiti e avviati separatamente Qui ho modificato la porta back-end in 8081 in application.properties e il front-end è l'8080 predefinito. Quindi, dopo che i progetti front-end e back-end sono stati eseguiti correttamente, inserisci http://. /localhost:8080 nel browser, controllalo nella rete degli strumenti per sviluppatori, connettiti correttamente al back-end e restituisci con successo diverse informazioni sui prompt e messaggi popup quando accedi e ti registri per l'input di test:
Dopo aver effettuato l'accesso con successo: