Обмен технологиями

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

Вот реализация проекта vue3+springboot+mybatis+mysql, который просто реализует функции входа и регистрации для разделения внешнего и внутреннего интерфейса. Основные инструменты: idea, navicat.

Оглавление

1. Создайте проект vue3 и первоначальную настройку.

Создать проект vue3

2. Измените структуру проекта.

1) Исходная структура каталогов

2) Измененная структура каталогов.

Отредактируйте и напишите страницу входа и регистрации.

1)LoginAndRegister.vue

2) Главная.vue

3) маршрутизатор

4) Логин.css

5) Отображение страницы регистрации входа в систему.

2. Создайте проект Springboot+mysql+mybatis и подключитесь к базе данных.

3. Напишите внутренние функции входа и регистрации.

1. Логика входа в систему

2. Логика регистрации

3. Часть внутреннего кода

4. Запустите проект

---

1. Создайте проект vue3 и первоначальную настройку.

1. Создайте проект vue3.

Для создания проекта вы можете обратиться к одной из моих статей:

Создайте собственный проект vue3 с помощью блога IDEA_idea vue3-CSDN.

Исходная структура каталогов после создания:

2. Измените структуру проекта.

Сначала вам нужно изменить исходную структуру каталогов.

1) Исходная структура каталогов

ресурсыразмещать фотографии

компонентыПромежуточные компоненты, обычно многоразовые

маршрутизаторэто маршрут, по которому настраиваются пути к файлам всех главных страниц

магазинОбычно используется для управления состоянием Vuex, например для хранения токенов и т. д.

ПросмотрыЦентр — главная страница

Приложение.vueЭто корневой компонент приложения Vue.

main.jsЭто входной файл приложения, обычно используемый для введения таких зависимостей, как vue и vue router.

2) Измененная структура каталогов.

Для реализации функции входа и регистрации модифицированная структура каталогов:

3. Напишите страницу входа и регистрации.

1)LoginAndRegister.vue

Создайте LoginAndRegister.vue в папке компонентов для реализации страницы и функций регистрации входа. Здесь я создаю только файл .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) Главная.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 — домашняя страница.

индекс.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, чтобы просто создать серверный проект и подключиться к базе данных, ссылка:

идея, весенняя загрузка+проект 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

Загрузите в соответствии с руководством и измените URL-адрес изображения в пути установки maven->conf->settings.xml. Однако я не настраивал переменные среды, я напрямую установил их в файле->settings->. Сборка, выполнение, развертывание->Инструменты сборки-> В Maven измените домашний путь Maven на локальный путь:

После модификации скорость загрузки действительно стала намного выше.

Структура каталогов окончательного серверного проекта выглядит следующим образом:

3. Напишите внутренние функции входа и регистрации.

1. Логика входа в систему

Получите заполненную информацию, передаваемую внешним интерфейсом, включая имя пользователя и пароль, и выполните запрос на основе имени пользователя и пароля в базе данных. Если пользователь найден, это означает, что пользователь существует и имя пользователя и пароль соответствуют. . Вход успешен, иначе — неудачно.

2. Логика регистрации

Получите информацию для заполнения, передаваемую внешним интерфейсом, включая имя пользователя и пароль. Убедившись, что входная информация не пуста, сначала найдите пользователя по имени пользователя в базе данных. Если оно найдено, имя пользователя уже существует. происходит сбой, и возвращается информация об ошибке. Если он не найден, пользователи могут зарегистрироваться и вставить запись в базу данных. После успешной регистрации блок входа будет отображаться, а блок регистрации будет скрыт.

3. Часть внутреннего кода

Среди них ресурсы->сопоставитель->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 в браузере, проверьте его в сети инструментов разработчика, успешно подключитесь к серверной части и успешно верните различную информацию и всплывающие подсказки при входе в систему и регистрации для тестового ввода:

После успешного входа: