моя контактная информация
Почтамезофия@protonmail.com
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Вот реализация проекта vue3+springboot+mybatis+mysql, который просто реализует функции входа и регистрации для разделения внешнего и внутреннего интерфейса. Основные инструменты: idea, navicat.
Оглавление
1. Создайте проект vue3 и первоначальную настройку.
2. Измените структуру проекта.
1) Исходная структура каталогов
2) Измененная структура каталогов.
Отредактируйте и напишите страницу входа и регистрации.
5) Отображение страницы регистрации входа в систему.
2. Создайте проект Springboot+mysql+mybatis и подключитесь к базе данных.
3. Напишите внутренние функции входа и регистрации.
Для создания проекта вы можете обратиться к одной из моих статей:
Создайте собственный проект vue3 с помощью блога IDEA_idea vue3-CSDN.
Исходная структура каталогов после создания:
Сначала вам нужно изменить исходную структуру каталогов.
ресурсыразмещать фотографии
компонентыПромежуточные компоненты, обычно многоразовые
маршрутизаторэто маршрут, по которому настраиваются пути к файлам всех главных страниц
магазинОбычно используется для управления состоянием Vuex, например для хранения токенов и т. д.
ПросмотрыЦентр — главная страница
Приложение.vueЭто корневой компонент приложения Vue.
main.jsЭто входной файл приложения, обычно используемый для введения таких зависимостей, как vue и vue router.
Для реализации функции входа и регистрации модифицированная структура каталогов:
Создайте 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>
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>
Конфигурация маршрутизации страниц, перенаправление на страницу входа, если путь равен /, /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
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;
- }
Ромбовидные блоки расположены хаотично и изначально выглядят так:
Позже я добавил еще несколько ромбовидных блоков и изменил их положение и цвет. Конечный эффект выглядит следующим образом:
Используйте Springboot, MySQL, Mybatis, чтобы просто создать серверный проект и подключиться к базе данных, ссылка:
Дополнение к статье:
Если вам сложно писать методы 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 на локальный путь:
После модификации скорость загрузки действительно стала намного выше.
Структура каталогов окончательного серверного проекта выглядит следующим образом:
Получите заполненную информацию, передаваемую внешним интерфейсом, включая имя пользователя и пароль, и выполните запрос на основе имени пользователя и пароля в базе данных. Если пользователь найден, это означает, что пользователь существует и имя пользователя и пароль соответствуют. . Вход успешен, иначе — неудачно.
Получите информацию для заполнения, передаваемую внешним интерфейсом, включая имя пользователя и пароль. Убедившись, что входная информация не пуста, сначала найдите пользователя по имени пользователя в базе данных. Если оно найдено, имя пользователя уже существует. происходит сбой, и возвращается информация об ошибке. Если он не найден, пользователи могут зарегистрироваться и вставить запись в базу данных. После успешной регистрации блок входа будет отображаться, а блок регистрации будет скрыт.
Среди них ресурсы->сопоставитель->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, "服务器异常");
- // }
- }
- }
- }
- }
Передняя и задняя части запускаются отдельно. Здесь я изменил внутренний порт на 8081 в application.properties, а для внешнего интерфейса используется порт по умолчанию 8080. Поэтому после успешного запуска внешнего и внутреннего проектов введите http:/. /localhost:8080 в браузере, проверьте его в сети инструментов разработчика, успешно подключитесь к серверной части и успешно верните различную информацию и всплывающие подсказки при входе в систему и регистрации для тестового ввода:
После успешного входа: