【项目实践】SpringBoot+vue家教平台项目添加登录功能

已于 2024-09-11 09:30:38 修改
阅读量1k 收藏 29
点赞数 41
文章标签： spring boot vue.js 状态模式
于 2024-08-27 12:50:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77613763/article/details/141596437
版权

一.概述

要为家教平台添加登录功能，建议先从后端开始，因为这样可以确保前端有一个明确的 API 进行交互，从而在开发前端时更容易进行调试和验证。

后端开发：

  1. 创建登录接口：

    • 在后端创建一个 RESTful API，用于处理用户登录请求。
    • 验证用户提交的登录号码和密码是否与数据库中的记录匹配。

  2. 后端验证流程：

    • 接收请求：通过 POST 请求接收用户提交的登录号码和密码。
    • 查询数据库：在数据库中查找对应的用户记录（通常使用 MyBatis 或 JPA）。
    • 密码验证：比较提交的密码和数据库中存储的密码（注意：存储密码时应使用哈希加密，如 bcrypt）。
    • 生成令牌：如果验证成功，生成并返回一个 JWT（JSON Web Token）或其他形式的令牌，用于后续的身份验证。
    • 返回响应：返回登录结果（成功或失败）以及令牌（如果成功）。

  3. 后端代码：

    • UserService 负责用户查询和密码验证逻辑。
    • JWTTokenProvider 负责生成 JWT。

前端开发：

  1. 创建登录页面：

    • 创建一个简单的登录页面，用户可以输入他们的登录号码和密码。
    • 在用户点击“登录”按钮后，前端会向后端的登录接口发送请求。

  2. 前端验证流程：

    • 表单验证：在提交之前，前端可以先进行简单的表单验证（例如，检查号码格式是否正确，密码是否为空等）。
    • 发送请求：使用 axios 或 fetch 向后端发送登录请求（POST 请求）。
    • 处理响应：根据后端返回的响应，决定登录是否成功。如果成功，将收到的令牌存储在 localStorage 或 sessionStorage 中，并重定向到主页面。
    • 错误处理：如果登录失败，显示适当的错误信息给用户。

  3. 前端代码

验证：

  • 后端验证：使用 Postman 或 cURL 来测试后端登录接口，确保它能够正确处理请求并返回预期的响应。
  • 前端验证：在浏览器中测试登录页面，输入有效和无效的登录号码及密码，检查前端如何响应。

综合建议：

  1. 先写后端：确保后端登录逻辑和 API 接口正常工作，并返回正确的响应。
  2. 再写前端：开发登录页面并连接到后端 API，处理响应和错误显示。

 

二.后端编写：

User实体类：

package com.example.entity;

import lombok.Data;

@Data
public class User {
    private Integer userId;
    private String userPhone;
    private String userPassword;
}

UserMapper接口：

package com.example.mapper;

import com.example.entity.User;

public interface UserMapper {
    User selectByPhone1(String userPhone);
}

UserMapper.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--对应接口-->
<mapper namespace="com.example.mapper.UserMapper">
    <select id="selectByPhone1" resultType="com.example.entity.User">
        select * from user_view where user_phone=#{userPhone}
    </select>
</mapper>

UserService接口：

package com.example.service;

import com.example.entity.User;

public interface UserService {

    User selectByPhone2(String userPhone);

    //比较用户输入的密码和数据库中的密码
    boolean checkPassword(String rawPassword, String storedPassword);
}

UserServiceImpl实现类：

package com.example.service.impl;

import com.example.entity.User;
import com.example.mapper.UserMapper;
import com.example.service.UserService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

@Service
public class UserServiceImpl implements UserService {

    @Resource
    private UserMapper userMapper;

    @Override
    public User selectByPhone2(String userPhone) {
        User user = userMapper.selectByPhone1(userPhone);
        return user;
    }

    @Override
    public boolean checkPassword(String rawPassword, String storedPassword) {
        return rawPassword.equals(storedPassword);
    }
}

UserController实现类：

package com.example.controller;
//登录验证类

import com.example.config.ApiResponse;
import com.example.entity.User;
import com.example.service.UserService;
import lombok.Data;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/auth")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public ResponseEntity<ApiResponse<?>> login(@RequestBody LoginRequest loginRequest) {
        User user = userService.selectByPhone2(loginRequest.getPhoneNumber());
        if (user != null && userService.checkPassword(loginRequest.getPassword(), user.getUserPassword())) {
            // 在实际应用中，你可能会生成并返回一个 JWT 或 session token
            return ResponseEntity.ok(ApiResponse.success("登录成功",user));
        } else {
            return ResponseEntity.status(401).body(ApiResponse.error("登录失败"));
        }
    }

    // 登录请求的内部类
    @Data
    public static class LoginRequest {
        private String phoneNumber;
        private String password;
    }


}

三.使用postman进行后端验证：

24b29c60d8624b32aaaf44bc8ae88648.png

四.前端代码编写:

Login.vue:

<template>
  <div class="login-container">
    <h2>登录界面</h2>
    <form @submit.prevent="login">
      <div class="form-group">
        <label for="phoneNumber">账号：</label>
        <input
            type="text"
            id="phoneNumber"
            v-model="phoneNumber"
            placeholder="请输入登录账号"
            required
        />
      </div>
      <div class="form-group">
        <label for="password">密码：</label>
        <input
            type="password"
            id="password"
            v-model="password"
            placeholder="请输入密码"
            required
        />
      </div>
      <button type="submit">登录</button>
    </form>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      phoneNumber: '',
      password: '',
      errorMessage: null,
    };
  },
  methods: {
    async login() {
      try {
        // console.log('发送的手机号:', this.phoneNumber);
        // console.log('发送的密码:', this.password);
        const response = await axios.post('http://localhost:8081/api/auth/login', {
          phoneNumber: this.phoneNumber,
          password: this.password,
        });
        // console.log('后端返回的响应:', response.data);
        if (response.data.success) {
          // 登录成功，触发父组件的登录成功事件
          this.$emit('login-success');
          alert(response.data.message);
        } else {
          this.errorMessage = response.data.message;
        }
      } catch (error) {
        this.errorMessage = '登录失败，请检查账号和密码。';
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.error {
  color: red;
  margin-top: 15px;
  text-align: center;
}
</style>

App.vue:

 

<template>
 <div>
   <el-container v-if="isLoggedIn" style="height: 100%;">
     <el-header style="width: 100% ;padding: 0">
       <Header />
     </el-header>
     <div class="divider"></div> <!-- 分割线 -->
     <el-container style="width: 100%">
       <el-aside width="200px">
         <Sidebar @select="updateContent" />
       </el-aside>
       <el-main>
         <Content :selectedSection="selectedSection" />
       </el-main>
     </el-container>
   </el-container>

   <div v-else>
     <Login @login-success="handleLoginSuccess" />
   </div>
 </div>



</template>

<script>
import Header from './components/Header.vue';
import Sidebar from './components/Sidebar.vue';
import Content from './components/Content.vue';
import Login from './components/Login.vue';

export default {
  components: {
    Header,
    Sidebar,
    Content,
    Login,
  },
  data() {
    return {
      selectedSection: '1',
      isLoggedIn: false, // 登录状态
    };
  },
  methods: {
    updateContent(index) {
      this.selectedSection = index;
    },
    handleLoginSuccess() {
      this.isLoggedIn = true; // 登录成功后更新状态
    }
  }
};
</script>

<style>
body, html, #app {
  margin: 0;
  padding: 0;
  height: 100%;
}
.divider {
  height: 1px;
  background-color: #e0e0e0; /* 分割线颜色，可以根据需要调整 */
  margin: 0;
}

</style>

出现的问题及学到的方法：

1.一直显示登录失败，原因是前端url选择错误（应使用http://localhost:/api/auth/login'）完整路径

2.可以在前后端输出数据进行错误检验：

86c79b31a5ca4c5c94b4e07301370a78.png

3548be5e8417484d96581d43ad718a36.png

3.侧边栏及主体大小不固定，添加CSS样式进行修改：

<style>
.sidebar {
  height: 100vh;
  border-right: none;
  display: flex;
  flex-direction: column;
}
.el-menu {
  flex: 1;
  border-right: none !important; /* 强制移除右侧边框 */
}
</style>

 

小菜不菜。
关注
用vue写一个登陆页面
weixin_42577243的博客
02-10 1031
在 Vue 中，您可以使用 Vue 组件和 Vuex 状态管理库来创建登录页面。 首先，您可以在 Vue 组件的模板中使用 HTML 表单元素来创建登录表单。然后，您可以使用 Vue 绑定来将用户输入的数据与组件的数据绑定在一起。 下面是一个简单的示例： <template> <form @submit.prevent="handleLogin"> <la...
vue登陆页面
qq_45179361的博客
02-11 1万+
vue登陆页面实现。
.Vue创建简单的登录页面
ZSR1126的博客
12-27 2358
el-input placeholder="请输入密码" v-model="pwd" show-password class="input_style"></el-input><el-input placeholder="请输入用户名" v-model="name" clearable class="input_style"></el-input>1、创建登录界面和主页 2、配置路由 3、配置main.js 4、配置App.vue 5、登录界面 6、主页面。一、创建登录界面和主页。
写一个VUE的登录页
weixin_35750483的博客
12-19 137
好的，下面是一个简单的 Vue 登录页示例： <template> <div> <form @submit.prevent="login"> <label> 用户名: <input v-model="username" type="text" /> </label&...
用vue编写一个登录页面
weixin_42610671的博客
02-15 201
以下是一个简单的用Vue编写的登录页面的示例： <template> <div class="login-page"> <h2>登录</h2> <form @submit.prevent="login"> <label> 用户名： <input type="...
基于Java的家教信息网站，java+springboot+vue开发的家教预约平台系统-毕业设计-课程设计.zip
09-26
该压缩包文件“基于Java的家教信息网站，java+springboot+vue开发的家教预约平台系统-毕业设计-课程设计.zip”包含了使用Java、SpringBoot和Vue.js技术栈开发的一个家教预约平台的完整项目源代码。这是一个常见的...
基于springBoot的简单家教管理系统.zip
02-22
以上是基于SpringBoot的简单家教管理系统可能涉及的一些关键知识点，实际项目中可能还会有更多定制化的功能和优化措施。这个系统不仅展示了SpringBoot的强大能力，也反映了现代化Web应用的开发趋势。通过学习和实践...
大学生家教平台的设计与实现
最新发布
老高的博客
07-22 1377
而在该系统中注册过的教师，同样也能够在系统上发布各种任教信息，或是搜索感兴趣的学员求教信息，抑或在系统里进行教学教法方面的学习。家教系统服务网主要功能模块包括用户管理、家教信息管理、家长信息管理、订单管理、家教老师管理、公告管理、教育动态管理，采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作，采取MySQL作为后台数据的主要存储单元，采用SSM技术、MyBatis技术进行业务系统的编码及其开发，实现了本系统的全部功能。
计算机毕业设计springboot基于java的家教管理系统mka109【附源码+数据库+部署+LW】
一念计算机毕设源码程序
07-28 468
选题背景： 随着社会的发展和人们对教育的重视，家教行业逐渐兴起。越来越多的家长选择为孩子找一位合适的家教来辅导学习，以提高孩子的学习成绩和能力。然而，传统的家教管理方式存在信息不对称、匹配困难等问题，需要一个高效、便捷的管理系统来解决这些问题。基于Java的家教管理系统的设计与实现，正是为了满足这一需求而提出的。 选题意义： 首先，基于Java的家教管理系统可以提供更加便捷和高效的家教服务。传统的家教寻找方式往往需要家长通过各种渠道广泛搜索并筛选家教，过程繁琐且耗费时间。而通过家教管理系统，家长可以在线上
(springboot+mysql)校园兼职系统 毕业设计源码论文+答辩PPT
TOT_dddd的博客
12-13 1017
本文以java为开发技术，实现了一个校园兼职系统。校园兼职系统的主要使用者分为管理员、学生和辅导员；管理员功能分为：首页、站点管理（公告栏、轮播图）用户管理（管理员、注册用户）内容管理（交流论坛、论坛分类、招聘资讯、资讯分类）更多管理（兼职分类、兼职信息）。注册用户分为：首页、交流论坛、公告消息、招聘资讯、兼职信息、我的等功能。
使用Vue.js和Element-UI做一个简单登录页面的实例
10-18
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue的一个简单的登录界面设计.rar
07-04
此代码是vue框架搭建完成后，设计的一个简单的登录界面。vue的框架是vue-cli2.0
vue网页登录界面
12-21
这个demo是在webstrom运行的vue网页静态登录界面，工具应该不是问题。关于vue的配置和运行这里没有说明，自己可以配置一下。
使用vue3做的一个比较满意漂亮好看的登陆页面
06-07 6832
页面展示：分为三部分，账号登陆页，token登陆页，账号注册页。
vue实现登录注册
weixin_64443786的博客
08-18 2416
vue
详细介绍从零开始打造vue的登录页面（2022.7）
呼啦啦啦啦啦的博客
07-12 8329
最新版保姆级教程，都来看一眼吧
Vue案例详解(七):制作登录页面
柳老师的博客
07-08 5228
本篇文章写于2023年7月8日,使用的包和工具基本上都是最新的(Vue3, VS code),如果你查看的时间比较晚,请注意版本的区别.前面几篇文章介绍了Vue的使用,项目的搭建和一些基本信息.Vue3案例详解(一)_flame.liu的博客-CSDN博客Vue3案例详解(二)_flame.liu的博客-CSDN博客Vue3案例详解(三)_flame.liu的博客-CSDN博客Vue3案例详解(四)_flame.liu的博客-CSDN博客Vue3案例详解(五)_flame.liu的博客-CSDN博客。
快速上手vue的登录界面(最新版)
热门推荐
呼啦啦啦啦啦的博客
07-22 3万+
快速上手vue的登录界面(最新版)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值