简单制作一个基于springboot的登录页面

最新推荐文章于 2024-03-07 16:23:18 发布

小唐丶编程

最新推荐文章于 2024-03-07 16:23:18 发布

阅读量935

点赞数 1

文章标签： spring boot java

本文链接：https://blog.csdn.net/tangfan__/article/details/130650010

版权

前端代码

前端的代码就不详细的解释了，直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>


</head>
<script>
    $(function () {
        $("#submit").click(function () {
            var username = $('#username').val();
            var password = $('#password').val();
            if(username.trim() == "" || password.trim() == ""){
                alert("请输入用户名或密码");
                return;
            }
            $.ajax({
                url: "user/login",
                data:{"username":username,"password":password},
                type:"POST",
                dataType:"json",
                success:function (data){
                    console.log(data)
                    if(data.status == 1){
                        // alert("...")
                        window.location.href="list.html";
                        // $("message").text("用户名或密码错误");
                    }else {
                        alert("请输入正确的用户名或密码");
                        $("#username").val("");
                        $("#password").val("");
                    }
                }
            })
        });
    });
</script>
<body>
<!-- 这是导航栏 -->

<div class="login-container">
        <div class="login-dialog">
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username" name="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password" name="password">
            </div>
            <div class="row">
                <!-- <button>提交</button> -->
                <input type="submit" id="submit" value="登录">
            </div>
            <div class="row1">
                没有账户？<a href="enroll.html">请先注册</a>
            </div>
        </div>
</div>
</body>
</html>

后端代码详解

直接已经讲过了如何用springboot框架创建项目，这个我们直接创建项目

先创建一个数据库来存放我们的登录账号和密码，然后我们先往数据库中存放两个数据


create database if not exists login;

use login;

create table user (
    userId int primary key auto_increment,
    username varchar(1024),
    password varchar(128)
);

insert into user values(null,"zhangsan","123456");
insert into user values(null,"lisi","654321");

在application中建立和数据库的连接以及设置端口号，这里的mapper的地址一定要写，不然会找不到文件导致报错

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/login?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=GMT%2B8
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver
server:
  port: 1111
  
mybatis:
  mapper-locations: classpath:mybatis/**Mapper.xml

建立User对象

package com.example.login.model;


import lombok.Data;

@Data
//lombok框架，可以直接生成对象的set和get
public class User {
    private String username;
    private String password;
    private int userId;
}

建立mapper接口：

package com.example.login.mapper;


import com.example.login.model.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper {
     User login(User user);
}

第五步：在resource下创建装**Mapper.xml的文件夹，并创建***Mapper.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.login.mapper.UserMapper">
    <select id="login" resultType="com.example.login.model.User">
        select * from user where username = #{username} and password = #{password}
    </select>
</mapper>

第六步，建立Controller类：

package com.example.login.controller;

import com.example.login.mapper.UserMapper;
import com.example.login.model.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

@RestController
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserMapper userMapper;

    @RequestMapping("/login")
    public User Login(@RequestParam String username, @RequestParam String password){

        User userLogin = new User();
        userLogin.setUsername(username);
        userLogin.setPassword(password);
        User user = userMapper.login(userLogin);
        if (user != null){
            return user;
        }else {
            return null;
        }

    }
}

最后输入网址查看效果

小唐丶编程

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
简单制作一个基于springboot的登录页面

在application中建立和数据库的连接以及设置端口号，这里的mapper的地址一定要写，不然会找不到文件导致报错。第五步：在resource下创建装**Mapper.xml的文件夹，并创建***Mapper.xml。先创建一个数据库来存放我们的登录账号和密码，然后我们先往数据库中存放两个数据。直接已经讲过了如何用springboot框架创建项目，这个我们直接创建项目。前端的代码就不详细的解释了，直接看代码。最后输入网址查看效果。
复制链接

扫一扫