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

vue3 Springboot mybatis MySQL проект практика — реализация простых функций входа и регистрации

2024-07-12

한어Русский язык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:

  1. <template>
  2. <div class="container">
  3. <div class="login-box" v-if="loginShow">
  4. <!-- 菱形群-->
  5. <div class="decoration1 decoration"></div>
  6. <div class="decoration2 decoration"></div>
  7. <div class="decoration3 decoration"></div>
  8. <div class="decoration4 decoration"></div>
  9. <div class="decoration5 decoration"></div>
  10. <div class="decoration decoration4 decoration6"></div>
  11. <div class="decoration decoration7 decoration2"></div>
  12. <div class="decoration decoration8 decoration3"></div>
  13. <div class="login-title">
  14. <h1>Login</h1>
  15. </div>
  16. <div class="login-part">
  17. <input class="login-input" v-model="username" placeholder="Username" />
  18. <input class="login-input" type="password" v-model="password" placeholder="Password" />
  19. <button class="login-button" @click="login">Login</button>
  20. <div>
  21. 还未注册?点击<a class="change-link" @click="changeToRegister">这里</a>注册
  22. </div>
  23. </div>
  24. </div>
  25. <div class="login-box" v-if="registerShow">
  26. <!-- 菱形群-->
  27. <div class="decoration1 decoration"></div>
  28. <div class="decoration2 decoration"></div>
  29. <div class="decoration3 decoration"></div>
  30. <div class="decoration4 decoration"></div>
  31. <div class="decoration5 decoration"></div>
  32. <div class="decoration decoration4 decoration6"></div>
  33. <div class="decoration decoration7 decoration2"></div>
  34. <div class="decoration decoration8 decoration3"></div>
  35. <div class="login-title">
  36. <h1>Register</h1>
  37. </div>
  38. <div class="login-part">
  39. <input class="login-input" v-model="username" placeholder="Username" />
  40. <input class="login-input" type="password" v-model="password" placeholder="Password" />
  41. <button class="login-button" @click="register">Register</button>
  42. <span class="change-link" @click="changeToLogin">返回登录</span>
  43. </div>
  44. </div>
  45. <!-- <div class="decoration decoration1"></div>-->
  46. <!-- <div class="decoration decoration2"></div>-->
  47. <!-- <div class="decoration decoration3"></div>-->
  48. <!-- <div class="decoration decoration4"></div>-->
  49. </div>
  50. </template>
  51. <script>
  52. import { ref } from 'vue'
  53. import { useRouter } from 'vue-router' // 导入 useRouter
  54. import '../style/Login.css' // 导入css
  55. export default {
  56. name: 'LoginVue',
  57. setup () {
  58. const username = ref('')
  59. const password = ref('')
  60. const phone = ref('')
  61. const loginShow = ref(true)
  62. const registerShow = ref(false)
  63. const router = useRouter()
  64. const changeToRegister = async () => {
  65. loginShow.value = false
  66. registerShow.value = true
  67. }
  68. const changeToLogin = async () => {
  69. loginShow.value = true
  70. registerShow.value = false
  71. }
  72. const login = async () => {
  73. console.log('Login with:', username.value, password.value)
  74. try {
  75. const formData = new FormData()
  76. formData.append('username', username.value)
  77. formData.append('password', password.value)
  78. const response = await fetch('http://localhost:8081/api/user/login', {
  79. method: 'POST',
  80. body: formData
  81. })
  82. const data = await response.json()
  83. if (response.ok) {
  84. console.log('Link success', data)
  85. if (data.code === 200) {
  86. // 登录成功
  87. alert('登录成功!')
  88. await router.push('/home')
  89. } else {
  90. alert(data.msg)
  91. }
  92. } else {
  93. console.error('Link failed', data)
  94. }
  95. } catch (error) {
  96. console.error('Error login', error)
  97. }
  98. }
  99. const register = async () => {
  100. console.log('Register with:', username.value, password.value)
  101. try {
  102. const formData = new FormData()
  103. formData.append('username', username.value)
  104. formData.append('password', password.value)
  105. const response = await fetch('http://localhost:8081/api/user/register', {
  106. method: 'POST',
  107. body: formData
  108. })
  109. const data = await response.json()
  110. if (response.ok) {
  111. if (data.code === 200) {
  112. console.log('Register success', data)
  113. alert('注册成功!')
  114. await changeToLogin()
  115. } else {
  116. console.log('Register failed', data)
  117. alert(data.msg)
  118. }
  119. } else {
  120. console.error('Register failed', data)
  121. }
  122. } catch (error) {
  123. console.error('Error during register', error)
  124. }
  125. }
  126. return { username, password, phone, login, loginShow, registerShow, changeToRegister, register, changeToLogin }
  127. }
  128. }
  129. </script>
  130. <style>
  131. </style>

2) Главная.vue

Home.vue — это главная страница, на которую осуществляется переход после успешного входа в систему.

Главная.vue:

  1. <template>
  2. 首页<br><br>
  3. <button class="login-button" @click="signOut">退出登录</button>
  4. </template>
  5. <script>
  6. import { useRouter } from 'vue-router'
  7. export default {
  8. name: 'HomeVue',
  9. setup () {
  10. const router = useRouter()
  11. const signOut = async () => {
  12. await router.push('/')
  13. }
  14. return { signOut }
  15. }
  16. }
  17. </script>
  18. <style scoped>
  19. </style>

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

Конфигурация маршрутизации страниц, перенаправление на страницу входа, если путь равен /, /login — это страница входа, а /home — домашняя страница.

индекс.js:

  1. import { createRouter, createWebHistory } from 'vue-router'
  2. import Login from '../components/LoginAndRegister.vue'
  3. import Home from '../views/Home.vue'
  4. const routes = [
  5. {
  6. path: '/',
  7. redirect: '/login'
  8. },
  9. {
  10. path: '/login',
  11. name: 'Login',
  12. component: Login
  13. },
  14. {
  15. path: '/home',
  16. name: 'Home',
  17. component: Home
  18. }
  19. ]
  20. const router = createRouter({
  21. history: createWebHistory(process.env.BASE_URL),
  22. routes
  23. })
  24. export default router

4) Логин.css

CSS-дизайн страницы входа и регистрации.

Логин.css:

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .container{
  6. height: 100vh;
  7. display: flex;
  8. justify-content: center;
  9. align-items: center;
  10. overflow: hidden;
  11. position: relative;
  12. }
  13. .login-box{
  14. background-color: white;
  15. padding: 40px 100px;
  16. border-radius: 8px;
  17. box-shadow: 0 0 5px 1px gainsboro;
  18. position: relative;
  19. }
  20. .login-part{
  21. display: flex;
  22. flex-direction: column;
  23. justify-content: center;
  24. margin-top: 20px;
  25. gap: 20px;
  26. }
  27. .login-input{
  28. width: 250px;
  29. height: 30px;
  30. border-radius: 8px;
  31. }
  32. .login-button{
  33. height: 40px;
  34. border-radius: 8px;
  35. background-color: #2c3e50;
  36. color: white;
  37. transition: 0.5s;
  38. }
  39. .login-button:hover{
  40. background-color: darkcyan;
  41. font-size: 15px;
  42. transition: 0.5s;
  43. }
  44. .login-button:active{
  45. background-color: darkslateblue;
  46. }
  47. .change-link{
  48. color: #00BFFF;
  49. text-decoration: underline;
  50. }
  51. .change-link:hover{
  52. color: cornflowerblue;
  53. }
  54. .decoration {
  55. position: absolute;
  56. width: 200px;
  57. height: 200px;
  58. background: linear-gradient(to left, #FDF5E6, #96CDCD );
  59. clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  60. z-index: 1;
  61. }
  62. .decoration1 {
  63. top: 150px;
  64. left: -210px;
  65. }
  66. .decoration2 {
  67. top: 20px;
  68. right: -20px;
  69. width: 100px; /* 第二个菱形的大小 */
  70. height: 100px;
  71. background: linear-gradient(to right, #FFF5EE, #E6E6FA);
  72. }
  73. .decoration3 {
  74. top: 50px;
  75. right: -180px;
  76. width: 200px; /* 第三个菱形的大小 */
  77. height: 200px;
  78. background: linear-gradient(to right, #7FFFD4, cadetblue);
  79. }
  80. .decoration4 {
  81. top: 200px;
  82. right: -200px;
  83. width: 500px; /* 第三个菱形的大小 */
  84. height: 500px;
  85. z-index: -1;
  86. clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  87. background: linear-gradient(to right, #FFFACD, #00BFFF);
  88. }
  89. .decoration5 {
  90. top: -100px;
  91. right: 200px;
  92. width: 400px; /* 第三个菱形的大小 */
  93. height: 400px;
  94. z-index: -1;
  95. clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  96. background: linear-gradient(to right, #AFEEEE, #00BFFF);
  97. }
  98. .decoration6 {
  99. top: 10px;
  100. right: -680px;
  101. }
  102. .decoration7 {
  103. top: -170px;
  104. right: -500px;
  105. }
  106. .decoration8 {
  107. top: -140px;
  108. right: -655px;
  109. }

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

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

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

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

Используйте Springboot, MySQL, Mybatis, чтобы просто создать серверный проект и подключиться к базе данных, ссылка:

идея, весенняя загрузка+проект MySQL+MyBatis создает и отображает содержимое таблицы базы данных на веб-странице_idea отображает базу данных на веб-странице — блог CSDN

Дополнение к статье:

Если вам сложно писать методы set и get каждый раз при создании класса сущности, вы можете добавить в pom.xml следующие зависимости:

  1. <dependency>
  2. <groupId>org.projectlombok</groupId>
  3. <artifactId>lombok</artifactId>
  4. </dependency>

Затем используйте аннотацию @Data в классе сущности, чтобы не писать методы set и get:

Процесс почти тот же, но данные, которые я создал на этот раз, другие. Основная причина в том, что изменились атрибуты и данные пользовательской таблицы (разница не большая, и суп не меняет лекарство):

Обнаружена проблема: maven продолжает скачивать зависимости, но ответа долго нет.

Однако при создании проекта что-то пошло не так. На этот раз я использовал новый компьютер для создания серверного проекта. Это был первый раз, когда я собирал его. В результате после запуска Maven продолжал загружать различные зависимости и подключаться. -ins, и долго не было ответа:

Решение:

Я очистил кеш и перезапустил идею, но эффекта мало.

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

Итак, я скачал maven локально, обратитесь к руководству:

Руководство по загрузке и установке Maven (суперподробное)_Установка Maven — блог CSDN

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

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

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

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

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

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

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

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

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

Среди них ресурсы-&gt;сопоставитель-&gt;UserMapper.xml:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  3. "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
  4. <mapper namespace="com.example.demo.mapper.UserMapper" >
  5. <resultMap id="result" type="com.example.demo.entity.User">
  6. <result property="id" column="id" />
  7. <result property="username" column="username" />
  8. <result property="password" column="password" />
  9. <result property="phone" column="phone" />
  10. <result property="gender" column="gender"/>
  11. </resultMap>
  12. <!-- 通过用户名和密码查找对应用户,用于登录-->
  13. <select id="findUserByNameAndPwd" resultMap="result" parameterType="User">
  14. select * from user
  15. where username = #{username}
  16. and password = #{password}
  17. </select>
  18. <!-- 通过用户名查找对应用户,用于注册检验用户名是否已存在-->
  19. <select id="findUserByName" resultMap="result" parameterType="User">
  20. select * from user
  21. where username = #{username}
  22. </select>
  23. <!-- 添加用户-->
  24. <insert id="addUser" parameterType="User">
  25. insert into user (username, password)
  26. values ( #{username}, #{password} )
  27. </insert>
  28. </mapper>

java-&gt;com.example.demo-&gt;mapper-&gt;UserMapper.java:

  1. package com.example.demo.mapper;
  2. import com.example.demo.entity.User;
  3. import org.apache.ibatis.annotations.Mapper;
  4. @Mapper
  5. public interface UserMapper {
  6. // 通过用户名和密码查找对应用户
  7. public User findUserByNameAndPwd(User user);
  8. // 通过用户名查找用户
  9. public User findUserByName(User user);
  10. // 添加用户
  11. public void addUser(User user);
  12. }

java-&gt;com.example.demo-&gt;service-&gt;UserService.java:

  1. package com.example.demo.service;
  2. import com.example.demo.entity.User;
  3. public interface UserService {
  4. // 通过用户名和密码查找对应id
  5. public User findUserByNameAndPwd(User user);
  6. // 通过用户名查找用户
  7. public User findUserByName(User user);
  8. // 添加用户
  9. public void addUser(User user);
  10. }

java-&gt;com.example.demo-&gt;service-&gt;UserServiceImpl.java:

  1. package com.example.demo.service;
  2. import com.example.demo.entity.User;
  3. import com.example.demo.mapper.UserMapper;
  4. import jakarta.annotation.Resource;
  5. import org.springframework.stereotype.Service;
  6. @Service
  7. public class UserServiceImpl implements UserService {
  8. @Resource
  9. private UserMapper userMapper;
  10. // 通过用户名和密码查找对应id
  11. @Resource
  12. public User findUserByNameAndPwd(User user){
  13. return userMapper.findUserByNameAndPwd(user);
  14. }
  15. // 通过用户名查找用户
  16. @Resource
  17. public User findUserByName(User user){
  18. return userMapper.findUserByName(user);
  19. }
  20. // 添加用户
  21. @Resource
  22. public void addUser(User user){
  23. userMapper.addUser(user);
  24. }
  25. }

java-&gt;com.example.demo-&gt;controller-&gt;UserController.java:

  1. package com.example.demo.controller;
  2. import com.example.demo.entity.User;
  3. import com.example.demo.result.Result;
  4. import com.example.demo.service.UserService;
  5. import jakarta.annotation.Resource;
  6. import org.springframework.web.bind.annotation.*;
  7. @RestController
  8. @RequestMapping("/api/user")
  9. public class UserController {
  10. @Resource
  11. UserService userService;
  12. // 登录
  13. @CrossOrigin
  14. @PostMapping(value = "/login")
  15. public Result login(@ModelAttribute("user") User user){
  16. String username=user.getUsername();
  17. String password=user.getPassword();
  18. System.out.println("Login received username: " + username);
  19. System.out.println("Login received password: " + password);
  20. User userCheck = new User();
  21. userCheck.setUsername(username);
  22. userCheck.setPassword(password);
  23. System.out.println(userCheck.getUsername() + " " + userCheck.getPassword());
  24. try{
  25. User findUser = userService.findUserByNameAndPwd(userCheck);
  26. if(findUser != null){
  27. return Result.success(findUser);
  28. }else {
  29. return Result.failure(401,"用户名或密码错误");
  30. }
  31. }catch (Exception e){
  32. return Result.failure(500,"服务器异常");
  33. }
  34. }
  35. // 注册
  36. @CrossOrigin
  37. @PostMapping(value = "/register")
  38. public Result register(@ModelAttribute("user") User user){
  39. // String username = "222";
  40. // String password = "222";
  41. User userCheck = new User();
  42. userCheck.setUsername(user.getUsername());
  43. userCheck.setPassword(user.getPassword());
  44. if(userCheck.getUsername() == null || userCheck.getUsername().isEmpty() || userCheck.getPassword() == null || userCheck.getPassword().isEmpty()){
  45. System.out.println("用户名或密码不可为空");
  46. return Result.failure(201,"用户名和密码不可为空");
  47. }else {
  48. System.out.println("Register received username: " + userCheck.getUsername());
  49. System.out.println("Register received password: " + userCheck.getPassword());
  50. try{
  51. // 先在数据库中查找是否已有用户名相同的用户
  52. User findUser = userService.findUserByName(userCheck);
  53. if(findUser != null){
  54. // 用户名已存在
  55. return Result.failure(202,"用户名已存在!");
  56. }
  57. else {
  58. // 新用户,数据库添加记录
  59. userService.addUser(userCheck);
  60. return Result.success(userCheck);
  61. }
  62. }catch (Exception e) {
  63. return Result.failure(500, "服务器异常");
  64. // }
  65. }
  66. }
  67. }
  68. }

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

Передняя и задняя части запускаются отдельно. Здесь я изменил внутренний порт на 8081 в application.properties, а для внешнего интерфейса используется порт по умолчанию 8080. Поэтому после успешного запуска внешнего и внутреннего проектов введите http:/. /localhost:8080 в браузере, проверьте его в сети инструментов разработчика, успешно подключитесь к серверной части и успешно верните различную информацию и всплывающие подсказки при входе в систему и регистрации для тестового ввода:

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