前后端+数据库实现用户登录注册

置顶 已于 2022-05-22 16:00:52 修改
阅读量4.5k 收藏 109
点赞数 11
分类专栏： 前后端结合 小白学习记录 文章标签： 数据库 intellij-idea mysql vue
于 2022-05-20 11:16:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53298230/article/details/124757837
版权

资源学习教程博客
1.后端和数据库详细使用教程
2.前端详细教程

自用复盘学习

1.使用的软件

1.2 后端 IDEA；前端WebStrom；数据库 MySQL

2.过程要点

2.1 数据库

（1）在cmd面板里，启动，打开数据库
所使用的命令：

net start mysql //启动
mysql -u root -p // 打开

（2）新建，进入数据库 demo

create database demo
use demo

(3)创建用户信息数据表

CREATE TABLE user
(
    uid int(10) primary key NOT NULL AUTO_INCREMENT,
    uname varchar(30) NOT NULL,
    password varchar(255) NOT NULL,
    UNIQUE (uname)
);

（4）配置数据库

打开IDEA项目，找到src<-main<resources下的application.properties 写入

# 配置端口号
server.port=8081
#数据库驱动
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#其中demo是所建立的数据库名
spring.datasource.url=jdbc:mysql://localhost:3306/demo?serverTimezone=UTC
# Mysql用户
spring.datasource.username=root
# Mysql密码
spring.datasource.password=123456

2.2 后端

(1)创建注意
在这里插入图片描述
在这里插入图片描述
(2) 项目文件分布
在这里插入图片描述
（3）各文件作用及代码
User实体类：连接所用的数据表user,生成相关属性的get和set方法

package com.******.domain;
import javax.persistence.*;
@Table(name = "user") //连接的数据表
@Entity
public class User {
    public long getUid() { return uid;} 
    public void setUid(long uid) {  this.uid = uid;}
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long uid;
    public String getUname() { return uname;}
    public void setUname(String uname) { this.uname = uname;  }
    private String uname;
    public String getPassword() { return password;}
    public void setPassword(String password) { this.password = password; }
    private String password;
}

UserDao接口：通过用户名来访问数据库进行查询

package com.******.repository;
        import com.******.User;
        import org.springframework.data.jpa.repository.JpaRepository;
        import org.springframework.stereotype.Repository;
@Repository
public interface UserDao extends JpaRepository<User, Long> {
    User findByUname(String uname); 
    User findByUnameAndPassword(String uname, String password);
}

UserService接口：登录注册业务逻辑，传递参数

package com.******.service;
        import com.******.User;
public interface UserService {
    User loginService(String uname, String password);
    User registService(User user);
}

UserServiceImpl ：实现登录注册业务逻辑的方法

package com.******.serviceImpl;
import com.******.User;
import com.******.UserDao;
import com.******.UserService;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
@Service
public class UserServiceImpl implements UserService {
    @Resource
    private UserDao userDao;
    @Override
    public User loginService(String uname, String password) {
        User user = userDao.findByUnameAndPassword(uname, password);
        if(user != null){ user.setPassword(""); }
        return user;
    }
    @Override
    public User registService(User user) {
        if(userDao.findByUname(user.getUname())!=null){
             return null;
        }else{
            User newUser = userDao.save(user);
            if(newUser != null){ newUser.setPassword(""); }
            return newUser; }
    }
}

Result ：模板类，很多静态方法可以用类名.方法名调用

package com.******.utils;
public class Result<T> {
    private String code;
    private String msg;
    private T data;
    public String getCode() { return code;  }
    public void setCode(String code) {  this.code = code; }
    public String getMsg() {  return msg;  }
    public void setMsg(String msg) {  this.msg = msg;  }
    public T getData() { return data;  }
    public void setData(T data) { this.data = data;  }
    public Result() {  }
    public Result(T data) { this.data = data; }
    public static Result success() {
        Result result = new Result<>();
        result.setCode("0");
        result.setMsg("成功");
        return result;
    }
    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>(data);
        result.setCode("0");
        result.setMsg("成功");
        return result;
    }
    public static <T> Result<T> success(T data,String msg) {
        Result<T> result = new Result<>(data);
        result.setCode("0");
        result.setMsg(msg);
        return result;
    }
    public static Result error(String code, String msg) {
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }
}

UserController ：实现登录注册的控制，处理post请求方法@RequestMapping（“/user”）是控制器类的基路由

package com.******.controller;
        import com.******.User;
        import com.******.UserService;
        import com.******.Result;
        import org.springframework.web.bind.annotation.*;
        import javax.annotation.Resource;
@RestController
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;
    @PostMapping("/login")
    public Result<User> loginController(@RequestParam String uname, @RequestParam String password){
        User user = userService.loginService(uname, password);
        if(user!=null){  return Result.success(user,"登录成功！");
        }else{ return Result.error("123","账号或密码错误！");  }
    }
    @PostMapping("/register")
    public Result<User> registController(@RequestBody User newUser){
        User user = userService.registService(newUser);
        if(user!=null){  return Result.success(user,"注册成功！");
        }else{  return Result.error("456","用户名已存在！");  }
    }
}

GlobalCorsConfig ：全局跨域配置类，处理跨域问题，可有可无看具体运行是否报错，前后端分离

package com.******.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class GlobalCorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")   //添加映射路径，“/**”表示对所有的路径实行全局跨域访问权限的设置
                        .allowedOrigins("*") //开放哪些ip、端口、域名的访问权限
                        .allowCredentials(true)  //是否允许发送Cookie信息
                        .allowedMethods("GET", "POST", "PUT", "DELETE") //开放哪些Http方法，允许跨域访问
                        .allowedHeaders("*") //允许HTTP请求中的携带哪些Header信息
                        .exposedHeaders("*"); 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
            }
        };
    }
}

2.3 前端

（1）创建配置
config / index.js 中 更改以下部分，其中8081是后端设置好的端口号

 proxy: {
      '/api': {
        target: 'http://localhost:8081',
        ws: true,
        changeOrigin: true, 
        pathRewrite: {
          '^/api': ''  
        }
      }
  },

src / main.js 中 ，添加部分，引用element和axios

import axios from 'axios'
import VueAxios from 'vue-axios' 
Vue.use(ElementUI) // element ui 插件 
Vue.use(VueAxios, axios) // 使用 axios 插件

（2）文件目录在这里插入图片描述
（3）Login.vue 登录页面

<template>
  <div>
    <el-card class="box-card">
      <h2>登录</h2>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-position="left" label-width="70px" class="login-from">
        <el-form-item label="用户名" prop="uname">
          <el-input v-model="ruleForm.uname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="btnGroup">
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <router-link to="/register">
          <el-button style="margin-left: 10px">注册</el-button>
        </router-link>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        uname: "",
        password: "",
      },
      rules: {
        uname: [
          { required: true, message: "用户名不能为空！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空！", trigger: "blur" },
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      // 验证表单中的账号密码是否有效，因为在上面rules中定义为了必填 required: true
      this.$refs[formName].validate((valid) => {
        // 如果经过校验，账号密码都不为空，则发送请求到后端登录接口
        if (valid) {
           let _this = this;
          // 使用 axios 将登录信息发送到后端
          this.axios({
            url: "/user/login",               // 请求地址
            method: "post",                       // 请求方法
            headers: {                            // 请求头
              "Content-Type": "application/json",
            },
            params: {                             // 请求参数
              uname: _this.ruleForm.uname,
              password: _this.ruleForm.password,
            },
          })
            .then((res) => { // 当收到后端的响应时执行该括号内的代码，res 为响应信息，也就是后端返回的信息
            if (res.data.code === "0") {  // 当响应的编码为 0 时，说明登录成功
              // 将用户信息存储到sessionStorage中
              sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
              // 跳转页面到首页
              this.$router.push('/home');
            }
            else {  // 当响应的编码不为 0 时，说明登录失败
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            }
              return false;
          });
        } else {  // 如果账号或密码有一个没填，就直接提示必填，不向后端请求
          console.log("error submit!!");
          return false;
        }
        return false;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
/* 设置登录面板居中，宽度为400px */
.box-card {
  margin: auto auto;
  width: 400px;
}
/* 设置登录面板中的表单居中 */
.login-from {
  margin: auto auto;
}
</style>

（4）Register.vue 注册页面

<template>
  <div>
    <el-card class="box-card">
      <h2>注册</h2>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
               label-position="left" label-width="80px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="uname">
          <el-input v-model="ruleForm.uname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="btnGroup">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        uname: "",
        pass: "",
        password: "",
      },
      rules: {
        uname: [{ required: true, message: "用户名不能为空！", trigger: "blur" }],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        password: [{ required: true, validator: validatePass2, trigger: "blur" }],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          this.axios({     // axios 向后端发起请求
            url: "/user/register",  // 请求地址
            method: "post",             // 请求方法
            headers: {                  // 请求头
              "ContentType": "application/json",
            },
            data: { // 请求参数，为 data，与登录的 params 不太一样
              uname: _this.ruleForm.uname,
              password: _this.ruleForm.password,
            },
          }).then((res) => { // 当收到后端的响应时执行该括号内的代码，res 为响应信息，也就是后端返回的信息
            if (res.data.code === '0') {  // 当响应的编码为 0 时，说明注册成功
              // 显示后端响应的成功信息
              this.$message({
                message: res.data.msg,
                type: "success",
              });
            }
            else{  // 当响应的编码不为 0 时，说明注册失败
              // 显示后端响应的失败信息
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            }
            return false;
          });
        } else { // 如果账号或密码有一个没填，就直接提示必填，不向后端请求
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
/* 设置登录面板居中，宽度为400px */
.box-card {
  margin: auto auto;
  width: 400px;
}
/* 设置登录面板中的表单居中 */
.login-from {
  margin: auto auto;
}
</style>

router - index.js 配置路径

import Vue from 'vue'
import Router from 'vue-router' 
import Login from '../views/login/Login'
import Register from '../views/register/Register' 
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',          // 路径
      name:'login',
      redirect: '/login'  // 重定向
       component: Login  
    }, 
      {
      path: '/register',     // 路径
      name:'register',
      component: Register    // 跳转到的组件
    },
    {
      path: '/home', // 路径
      name:'Home',
      component: Home    // 跳转到的组件
    } 
  ]
})

后记碎碎念：
完整的小项目，数据库，后端，前端一起配合完成登录和注册
前前后后经历了一个月多的时间。
作为一个前端学习者，后端还是比较难，完全根据网上的博客和报错查询，做出来
逻辑还是不太清晰，但是其中需要注意的点是比较熟悉了。
继续加油吧！

打怪升级&
关注
  • 11
    点赞
  • 踩
  • 109
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
SQLserver数据库制作注册登陆系统
01-15
SQLserver数据库制作注册登陆系统
Eclipse+sql做的用户登录注册系统
02-27
用户名：admin 密码：admin Eclipse+sql做的用户登录注册系统，简单的入门项目啊，拿来分享一下啊
基于Vue+ELement搭建登陆注册页面实现后端交互
热门推荐
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
09-23 1万+
博客介绍了如何使用Vue和Element UI搭建一个简单的登陆注册页面，并通过后端交互实现用户认证功能。文章详细讲解了Vue的基本概念和使用方法，以及如何使用Element UI库来构建页面布局和表单组件。同时还介绍了前后端交互的基本原理和使用Vue的axios库发送请求与后端API进行通信。通过这个示例项目，读者可以学会如何使用Vue和Element UI来构建实用的用户登录和注册功能，并与后端进行数据交互。
用户登录的完整实现（表、数据库视图、bean、dao、dao工厂、service、service工厂、servlet、Jsp登录页、页面效果）
曾小超的博客
02-20 764
oracle中建T_USER表 ID不得为空 主键 创建序列 create sequence SEQ_T_USER； 查看所有的序列中是否存在这条记录 select * from user_sequences； 数据库中T_USER表的视图 bean：存放用户数据 dao:单张表的增删改查 dao接口： 通过用户名和密码登录 dao实现类: ...
实现登陆注册基础功能——前后端
T030606的博客
05-14 455
基于Spring boot+Vue的一个前后端分离的登陆注册功能界面，仅实现一些简单基础的功能，用于学习和熟悉登陆注册功能的实现。
基于SpringBoot+HTML实现登录注册功能模块
a910247的博客
03-23 2917
登陆注册功能是Web应用程序中常见的基础功能，其主要作用包括：1. 用户身份验证：通过登录功能，验证用户输入的用户名和密码是否与系统中存储的信息匹配，从而确认用户的身份。2. 访问控制：通过用户的身份信息，可以对不同用户提供不同的访问权限，限制用户可以访问的资源或功能。3. 个性化服务：登录功能可以帮助系统记录用户的偏好和历史行为，从而提供个性化的服务和推荐。4. 数据安全性：注册功能可以确保用户信息的安全存储，密码通常会进行加密处理，从而提高数据安全性。
在Vue中通过ElementUI构建前端页面【登录，注册】，在IEDA构建后端实现前后端分离
lz17267861157的博客
09-24 6782
多样化的组件：Element UI 提供了众多常用的基础组件，如按钮、输入框、表格、弹窗等，同时还有更复杂的组件，如日期选择器、下拉选择框、分页器等。这些组件都经过精心设计和开发，具有统一的风格和交互体验。高度可定制性：Element UI 的组件都支持自定义样式和配置项，可以根据项目需求进行扩展和修改。开发者可以按照自己的设计要求进行样式定制，或者根据业务需求进行功能扩展。良好的文档和示例：Element UI 提供了详细的官方文档和丰富的示例代码，对组件的使用方法和配置进行了详细说明，开发者可以快速上手
springboot登录注册接口
m0_58467275的博客
07-27 1198
后台登录注册接口
从零开始搭建后端服务器，实现注册、登录功能
huye930610的博客
07-21 2242
文章目录前言一、下载需要的开发工具1.首先当然是IntelliJ IDEA编辑器：二、使用步骤1.引入库2.读入数据总结 前言 作为一个前端开发人员，对于后端服务器同样也是需要了解的，今天我就带大家从零开始搭建一个后端服务器，实现简单的注册、登录功能，后续会不断加入其它的功能，敬请期待！！！ 提示：以下是本篇文章正文内容，下面案例可供参考 一、下载需要的开发工具 1.首先当然是IntelliJ IDEA编辑器： 下载网址： 安装教程： 二、使用步骤 1.引入库 代码如下（示例）： import num.
使用httpServlet和数据库mysql实现用户登录注册
weixin_68683361的博客
02-17 459
使用httpServlet和数据库mysql实现用户登录
简单的登录功能--后端实现
qq_58545721的博客
03-06 107
实现简单的登录功能 引用到的依赖为sa-token的内容 <!-- Sa-Token 权限认证，在线文档：https://sa-token.cc --> <dependency> <groupId>cn.dev33</groupId> <artifactId>sa-token-spring-boot-starter</artifactId> <version>1.34.0</versio
JavaWeb连接数据库实现简单注册和登录功能
weixin_73056048的博客
09-27 2987
划分包，不同的包放不同的类。
Jquery+ajax+php+mysql数据库实现用户注册登录
04-06
用php+mysql+ajax+Jquery实现了登陆功能，参考了https://blog.csdn.net/hjw453321854/article/details/78810979?
使用springboot+mybatis+Vue2.0+elementUI实现简单的登录注册及用户信息获取。
07-09
本demo实现了简单的登录、注册、获取用户信息三个功能，其中包含密码加密，解决了前后端分离项目常见的跨域问题及session问题，界面清晰简单，后台分层清晰，逻辑清楚。 值得一看。 项目结构：ajax_test为后端项目，...
基于javaWeb+mysql实现网上书城前后端管理系统(源码+数据库+开题报告+论文+答辩技巧+项目功能文档说明+项目运行指导
08-30
本项目是一套基于JavaWeb和mysql实现网上书城前后端管理系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含：项目源码、项目文档、数据库脚本等，该项目附带全部源码可作为毕设...
基于Javaweb实现的个人博客系统（Java高分项目）(前后端源码+数据库+说明文档+).zip
最新发布
06-17
登录：注册用户可以登录系统。 用户信息管理：用户可以管理个人信息，如修改密码、修改个人资料等。 博客管理： 发表博文：注册用户可以发布新的博客文章，包括标题、内容、标签等。 编辑博文：用户可以编辑已发布...
Java毕业设计-基于vue+springboot实现的校园二手交易平台（前后端源码+数据库+说明文档）
06-13
用户注册和登录： 允许用户注册新账户，并提供登录功能。 可能包括邮箱验证或手机验证码等安全措施。 发布商品： 注册用户可以发布自己的二手商品信息，包括商品名称、描述、价格、照片等。 可能包括选择商品类别...
包含后端的登录与注册页面
jakelihua
01-05 1257
本文讲解含有前后端的，登录页面与注册页面怎么制作，本登录页面是一个前后端不分离的。
前端连接数据库登录界面
06-06
前端连接数据库通常需要使用后端语言（例如 PHP、Python、Java 等）来处理数据库的连接和操作，前端可以通过发送请求到后端来实现与数据库的交互。以下是一个使用 PHP 连接数据库并实现登录的例子： 1. 创建数据库表 首先，需要在数据库中创建一个用户表，包含用户名和密码两个字段。 CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 2. 创建登录页面 在前端创建一个登录页面，包含用户名和密码输入框以及登录按钮。 ``` <form method="post" action="login.php"> <label>Username:</label> <input type="text" name="username" required><br> <label>Password:</label> <input type="password" name="password" required><br> <input type="submit" value="Login"> </form> ``` 3. 创建后端处理登录请求的 PHP 文件 在后端创建一个 PHP 文件，处理登录请求，连接数据库，验证用户名和密码是否正确。如果登录成功，则跳转到首页。 ``` <?php $conn = mysqli_connect("localhost", "username", "password", "database"); if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } if ($_SERVER["REQUEST_METHOD"] == "POST") { $username = $_POST["username"]; $password = $_POST["password"]; $sql = "SELECT * FROM users WHERE username='$username' AND password='$password'"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) == 1) { header("Location: index.php"); exit(); } else { echo "Invalid username or password."; } } mysqli_close($conn); ?> ``` 以上是一个简单的前端连接数据库登录界面的实现例子。需要注意的是，为了安全考虑，密码应该使用加密方式存储在数据库中，且密码验证应该使用加密后的值进行比较。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值