qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 数据库 › 分布式数据库 › vue3+springboot+mybatis+mysql项目实践--简朴登录注册 ...
vue3+springboot+mybatis+mysql项目实践--简朴登录注册功能实现 [复制链接]
发表于 2026-2-26 06:53:39 | 显示全部楼层 |阅读模式
这里是一次对vue3+springboot+mybatis+mysql的项目实现，简朴实现前后端分离的登录注册功能，重要工具：idea,navicat
  目次
一、创建vue3项目并初始设置
创建vue3项目
2.修改项目布局
1）原始目次布局
2）修改后目次布局
​编辑编写登录注册页面
1）LoginAndRegister.vue
2）Home.vue
3）router
4）Login.css
5）登录注册页面展示
二、创建springboot+mysql+mybatis项目并毗连数据库
三、编写登录注册后端功能
1.登录逻辑
2.注册逻辑
3.后端代码部门
四、运行项目

一、创建vue3项目并初始设置

1.创建vue3项目

创建项目可参考我的一篇文章：
用IDEA创建自界说vue3项目_idea vue3-CSDN博客
创建后的初始目次布局：

2.修改项目布局

起首必要修改原始目次布局
1）原始目次布局

assets放图片
components中放组件，通常可复用
router是路由，全部重要页面的文件路径在此中设置
store一样平常是用于vuex状态管理，如存储token等
views中是重要页面
App.vue是Vue应用的根组件。
main.js是应用的入口文件，通常用于引入vue和vue router等依靠。
2）修改后目次布局

要实现登录注册功能，修改后的目次布局：

3.编写登录注册页面

1）LoginAndRegister.vue

在components文件夹下创建LoginAndRegister.vue，用于实现登录注册页面及功能，这里我的登录和注册只创建一个.vue文件，在此中通过v-if来决定登录块和注册快的元素部门是否被渲染，从而影响它们的表现。
初始时设置
  1. v-if="loginShow"为true, v-if="registerShow"为false
复制代码
当点击按钮举行切换时，将true和false切换。
注册乐成后切换回登录部门。
这里为了方便以及用户风俗，固然用户的属性有id,username,password,phone,gender五个，但注册时只填写用户名和暗码，且只是简朴实现功能，未对暗码举行加密处理处罚不敷安全，之后大概会再更新文章，写写更安全的登录注册方式，以及登录后怎样完满个人信息。
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>
  52. <script>
  53. import { ref } from 'vue'
  54. import { useRouter } from 'vue-router' // 导入 useRouter
  56. import '../style/Login.css' // 导入css
  57. export default {
  58.   name: 'LoginVue',
  59.   setup () {
  60.     const username = ref('')
  61.     const password = ref('')
  62.     const phone = ref('')
  63.     const loginShow = ref(true)
  64.     const registerShow = ref(false)
  65.     const router = useRouter()
  67.     const changeToRegister = async () => {
  68.       loginShow.value = false
  69.       registerShow.value = true
  70.     }
  72.     const changeToLogin = async () => {
  73.       loginShow.value = true
  74.       registerShow.value = false
  75.     }
  77.     const login = async () => {
  78.       console.log('Login with:', username.value, password.value)
  79.       try {
  80.         const formData = new FormData()
  81.         formData.append('username', username.value)
  82.         formData.append('password', password.value)
  83.         const response = await fetch('http://localhost:8081/api/user/login', {
  84.           method: 'POST',
  85.           body: formData
  86.         })
  87.         const data = await response.json()
  88.         if (response.ok) {
  89.           console.log('Link success', data)
  90.           if (data.code === 200) {
  91.             // 登录成功
  92.             alert('登录成功！')
  93.             await router.push('/home')
  94.           } else {
  95.             alert(data.msg)
  96.           }
  97.         } else {
  98.           console.error('Link failed', data)
  99.         }
  100.       } catch (error) {
  101.         console.error('Error login', error)
  102.       }
  103.     }
  105.     const register = async () => {
  106.       console.log('Register with:', username.value, password.value)
  107.       try {
  108.         const formData = new FormData()
  109.         formData.append('username', username.value)
  110.         formData.append('password', password.value)
  111.         const response = await fetch('http://localhost:8081/api/user/register', {
  112.           method: 'POST',
  113.           body: formData
  114.         })
  115.         const data = await response.json()
  116.         if (response.ok) {
  117.           if (data.code === 200) {
  118.             console.log('Register success', data)
  119.             alert('注册成功！')
  120.             await changeToLogin()
  121.           } else {
  122.             console.log('Register failed', data)
  123.             alert(data.msg)
  124.           }
  125.         } else {
  126.           console.error('Register failed', data)
  127.         }
  128.       } catch (error) {
  129.         console.error('Error during register', error)
  130.       }
  131.     }
  133.     return { username, password, phone, login, loginShow, registerShow, changeToRegister, register, changeToLogin }
  134.   }
  135. }
  136. </script>
  138. <style>
  140. </style>
复制代码
2）Home.vue

Home.vue为登录乐成后跳转到的主页面。
Home.vue:
  1. <template>
  2. 首页<br><br>
  3.   <button class="login-button" @click="signOut">退出登录</button>
  4. </template>
  6. <script>
  7. import { useRouter } from 'vue-router'
  9. export default {
  10.   name: 'HomeVue',
  11.   setup () {
  12.     const router = useRouter()
  13.     const signOut = async () => {
  14.       await router.push('/')
  15.     }
  16.     return { signOut }
  17.   }
  18. }
  19. </script>
  21. <style scoped>
  23. </style>
复制代码
3）router

页面路由设置，路径为/时重定向到登录页，/login为登录页，/home为首页。
index.js：
  1. import { createRouter, createWebHistory } from 'vue-router'
  2. import Login from '../components/LoginAndRegister.vue'
  3. import Home from '../views/Home.vue'
  5. const routes = [
  6.   {
  7.     path: '/',
  8.     redirect: '/login'
  9.   },
  10.   {
  11.     path: '/login',
  12.     name: 'Login',
  13.     component: Login
  14.   },
  15.   {
  16.     path: '/home',
  17.     name: 'Home',
  18.     component: Home
  19.   }
  20. ]
  22. const router = createRouter({
  23.   history: createWebHistory(process.env.BASE_URL),
  24.   routes
  25. })
  27. export default router
复制代码
4）Login.css

对登录注册页面的css计划。
Login.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. }
  55. .decoration {
  56.     position: absolute;
  57.     width: 200px;
  58.     height: 200px;
  59.     background: linear-gradient(to left, #FDF5E6, #96CDCD );
  60.     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  61.     z-index: 1;
  62. }
  63. .decoration1 {
  64.     top: 150px;
  65.     left: -210px;
  66. }
  67. .decoration2 {
  68.     top: 20px;
  69.     right: -20px;
  70.     width: 100px; /* 第二个菱形的大小 */
  71.     height: 100px;
  72.     background: linear-gradient(to right, #FFF5EE, #E6E6FA);
  73. }
  74. .decoration3 {
  75.     top: 50px;
  76.     right: -180px;
  77.     width: 200px; /* 第三个菱形的大小 */
  78.     height: 200px;
  79.     background: linear-gradient(to right, #7FFFD4, cadetblue);
  80. }
  81. .decoration4 {
  82.     top: 200px;
  83.     right: -200px;
  84.     width: 500px; /* 第三个菱形的大小 */
  85.     height: 500px;
  86.     z-index: -1;
  87.     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  88.     background: linear-gradient(to right, #FFFACD, #00BFFF);
  89. }
  90. .decoration5 {
  91.     top: -100px;
  92.     right: 200px;
  93.     width: 400px; /* 第三个菱形的大小 */
  94.     height: 400px;
  95.     z-index: -1;
  96.     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  97.     background: linear-gradient(to right, #AFEEEE, #00BFFF);
  98. }
  99. .decoration6 {
  100.     top: 10px;
  101.     right: -680px;
  102. }
  104. .decoration7 {
  105.     top: -170px;
  106.     right: -500px;
  107. }
  109. .decoration8 {
  110.     top: -140px;
  111.     right: -655px;
  112. }
复制代码
5）登录注册页面展示

此中的菱形块是恣意排布的，一开始是如许的：

厥后多加了几个菱形块，改变他们的位置和颜色，终极效果如下:


二、创建springboot+mysql+mybatis项目并毗连数据库

用springboot,mysql,mybatis简朴建一个后端项目并毗连数据库，参考：
idea，spring boot+MySQL+MyBatis项目创建并在网页中表现数据库表中内容_idea将数据库表现到网页-CSDN博客
对文章增补：
以为创建实体类每次都要写set和get方法比力贫苦，可以在pom.xml中添加如下依靠：
  1.                 <dependency>
  2.                         <groupId>org.projectlombok</groupId>
  3.                         <artifactId>lombok</artifactId>
  4.                 </dependency>
复制代码
然后在entity的实体类中用@Data注解，就可省略写set和get方法：

过程差不多，不外此次创建我的数据不太一样，重要是user表属性和数据发生变革（差别不大，换汤不换药）：

碰到标题：maven不绝下载依靠，好久没反应
但是在创建项目途中还是出了点儿标题的，这次使用的是新电脑创建后端项目，第一次建，效果maven启动后不绝在下载各种依靠和插件，而且好久没有反应：

办理方式：
清空缓存重启idea，但效果不大。
厥后发现大概是由于Maven默认使用国外的中央堆栈，且我用的是idea中的maven插件，以是下载速率会很慢。
以是还是在本地下载了maven，参考教程：
maven的下载与安装教程（超具体）_maven安装-CSDN博客
按教程下载，在maven安装路径->conf->settings.xml中修改镜像的url，不外我没有设置情况变量，直接在idea中file->settings->Build,Execution,Deployment->Build Tools->Maven中，将Maven home path改为本地路径：



改完之后下载速率果然快了很多。
终极后端项目标目次布局如下：


三、编写登录注册后端功能

1.登录逻辑

获取前端通报的填写信息，包罗用户名和暗码，在数据库中根据用户名和暗码举行查询，如果找到用户，阐明用户存在且用户名与暗码对应，登录乐成，否则失败。
2.注册逻辑

获取前端通报的填写信息，包罗用户名和暗码，判断输入信息不为空后，在数据库中先根据用户名查找用户，如果找到了，即用户名已存在，注册失败，返回失败信息，如果未找到用户，则可以注册，向数据库中插入该条记载，而且注册乐成后展示登录块，埋伏注册块。
3.后端代码部门

此中resources->mapper->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" >
  5. <mapper namespace="com.example.demo.mapper.UserMapper" >
  6.     <resultMap id="result" type="com.example.demo.entity.User">
  7.         <result property="id" column="id" />
  8.         <result property="username" column="username" />
  9.         <result property="password" column="password" />
  10.         <result property="phone" column="phone" />
  11.         <result property="gender" column="gender"/>
  12.     </resultMap>
  14.     <!--    通过用户名和密码查找对应用户，用于登录-->
  15.     <select id="findUserByNameAndPwd" resultMap="result" parameterType="User">
  16.         select * from user
  17.         where username = #{username}
  18.         and password = #{password}
  19.     </select>
  22.     <!--    通过用户名查找对应用户，用于注册检验用户名是否已存在-->
  23.     <select id="findUserByName" resultMap="result" parameterType="User">
  24.         select * from user
  25.         where username = #{username}
  26.     </select>
  28.     <!--    添加用户-->
  29.     <insert id="addUser" parameterType="User">
  30.         insert into user (username, password)
  31.         values ( #{username}, #{password} )
  32.     </insert>
  34. </mapper>
复制代码
java->com.example.demo->mapper->UserMapper.java:
  1. package com.example.demo.mapper;
  3. import com.example.demo.entity.User;
  4. import org.apache.ibatis.annotations.Mapper;
  6. @Mapper
  7. public interface UserMapper {
  8.     // 通过用户名和密码查找对应用户
  9.     public User findUserByNameAndPwd(User user);
  10.     // 通过用户名查找用户
  11.     public User findUserByName(User user);
  12.     // 添加用户
  13.     public void addUser(User user);
  14. }
复制代码
java->com.example.demo->service->UserService.java:
  1. package com.example.demo.service;
  3. import com.example.demo.entity.User;
  5. public interface UserService {
  6.     // 通过用户名和密码查找对应id
  7.     public User findUserByNameAndPwd(User user);
  8.     // 通过用户名查找用户
  9.     public User findUserByName(User user);
  10. //     添加用户
  11.     public void addUser(User user);
  12. }
复制代码
java->com.example.demo->service->UserServiceImpl.java:
  1. package com.example.demo.service;
  3. import com.example.demo.entity.User;
  4. import com.example.demo.mapper.UserMapper;
  5. import jakarta.annotation.Resource;
  6. import org.springframework.stereotype.Service;
  8. @Service
  9. public class UserServiceImpl implements UserService {
  10.     @Resource
  11.     private UserMapper userMapper;
  13.     // 通过用户名和密码查找对应id
  14.     @Resource
  15.     public User findUserByNameAndPwd(User user){
  16.         return userMapper.findUserByNameAndPwd(user);
  17.     }
  19.     // 通过用户名查找用户
  20.     @Resource
  21.     public User findUserByName(User user){
  22.         return userMapper.findUserByName(user);
  23.     }
  25. //     添加用户
  26.     @Resource
  27.     public void addUser(User user){
  28.         userMapper.addUser(user);
  29.     }
  30. }
复制代码
java->com.example.demo->controller->UserController.java:
  1. package com.example.demo.controller;
  4. import com.example.demo.entity.User;
  5. import com.example.demo.result.Result;
  6. import com.example.demo.service.UserService;
  7. import jakarta.annotation.Resource;
  8. import org.springframework.web.bind.annotation.*;
  11. @RestController
  12. @RequestMapping("/api/user")
  13. public class UserController {
  14.     @Resource
  15.     UserService userService;
  17.     // 登录
  18.     @CrossOrigin
  19.     @PostMapping(value = "/login")
  20.     public Result login(@ModelAttribute("user") User user){
  21.         String username=user.getUsername();
  22.         String password=user.getPassword();
  23.         System.out.println("Login received username: " + username);
  24.         System.out.println("Login received password: " + password);
  25.         User userCheck = new User();
  26.         userCheck.setUsername(username);
  27.         userCheck.setPassword(password);
  28.         System.out.println(userCheck.getUsername() + " " + userCheck.getPassword());
  29.         try{
  30.             User findUser = userService.findUserByNameAndPwd(userCheck);
  31.             if(findUser != null){
  32.                 return Result.success(findUser);
  33.             }else {
  34.                 return Result.failure(401,"用户名或密码错误");
  35.             }
  36.         }catch (Exception e){
  37.             return Result.failure(500,"服务器异常");
  38.         }
  39.     }
  41.     // 注册
  42.     @CrossOrigin
  43.     @PostMapping(value = "/register")
  44.     public Result register(@ModelAttribute("user") User user){
  45. //        String username = "222";
  46. //        String password = "222";
  47.         User userCheck = new User();
  48.         userCheck.setUsername(user.getUsername());
  49.         userCheck.setPassword(user.getPassword());
  50.         if(userCheck.getUsername() == null || userCheck.getUsername().isEmpty() || userCheck.getPassword() == null || userCheck.getPassword().isEmpty()){
  51.             System.out.println("用户名或密码不可为空");
  52.             return Result.failure(201,"用户名和密码不可为空");
  53.         }else {
  54.             System.out.println("Register received username: " + userCheck.getUsername());
  55.             System.out.println("Register received password: " + userCheck.getPassword());
  56.             try{
  57.                 // 先在数据库中查找是否已有用户名相同的用户
  58.                 User findUser = userService.findUserByName(userCheck);
  59.                 if(findUser != null){
  60.                     // 用户名已存在
  61.                     return Result.failure(202,"用户名已存在!");
  62.                 }
  63.                 else {
  64.                     // 新用户，数据库添加记录
  65.                     userService.addUser(userCheck);
  66.                     return Result.success(userCheck);
  67.                 }
  68.             }catch (Exception e) {
  69.                 return Result.failure(500, "服务器异常");
  70. //            }
  71.             }
  72.         }
  73.     }
  74. }
复制代码
四、运行项目

前后端分别运行启动，这里我把后端的端口在application.properties中改为了8081，前端为默认的8080，以是在前后端项目都乐成运行后，在欣赏器输入http://localhost:8080即可，在开发者工具的network中查察，乐成毗连到后端，而且当登录注册举行测试输入时能乐成返回差别的提示信息并弹窗提示：


登录乐成之后：



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表
盛世宏图
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表