java+springboot+jsp实现用户登录注册

苏柒258

已于 2024-05-07 19:11:54 修改

阅读量992

点赞数 28

文章标签： java spring boot 开发语言

于 2024-05-07 13:43:09 首次发布

本文链接：https://blog.csdn.net/weixin_65201086/article/details/138527883

版权

1.编译工具：

idea

2.所用技术：

java+springboot+jsp

数据库：mysql

3.登录页面的jsp（可以自己调整属性，仅供参考）

<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>

<body style="background: url(../img/登录壁纸.jpg)">

<div id="divlogin" >
    <h1 style="margin-top: 200px;margin-left: 620px">登录页面</h1>
    <div >
        <div class="login">
            <div style="margin-top: 10px">
                <a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px;font-family: Calibri">请输入账号:</a><input   id="account" placeholder="账号" style="height: 30px;border-radius: 10%">
            </div>
            <div style="margin-top: 10px">
                <a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入密码:</a><input    id="password" placeholder="密码" style="height: 30px;border-radius: 10%">
            </div>

            <div style="margin-top: 10px">
                <a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入身份:</a><input   id="identity" placeholder="1.学生/2.教师/3.管理员" style="height: 30px;border-radius: 10%">
            </div>
            <div style="margin-top: 30px">
                <button  οnclick="login()" id="login" style="align-content: center;margin-left: 666px;font-size: 18px;background-color: #b2b2b2"> 登录</button>
                未注册账号？点击<a href="./register">注册</a>
            </div>

        </div>

    </div>

    <script src="../js/jquery-3.3.1.min.js"></script>
<!--注：url是本地端口，我就不展示我的了->
    <script>
        url="http://localhost:xxxx" 
        var user={
            "login":"/auth/login",

        }
        function  login(){
            var geturl=url+user.login;
            var account = document.getElementById("account").value
            var password = document.getElementById("password").value
            var identity= document.getElementById("identity").value
            console.log(account)
            console.log(password)
            console.log(identity)
            var parm = {
                "account": account,
                "password": password,
                "identity":identity,
            }
            $.ajax({
                url: geturl,
                type: "post",
                contentType: 'application/json',
                data: JSON.stringify(parm),
                success: function (res) {
                    if (res.data.state === "200"&&identity==="学生") {

                        var storage = window.localStorage;
                        //storage.setItem("Authorization",res.data.token);
                        storage.setItem("account", res.data.user.account);
                        storage.setItem("password", res.data.user.pass3word);
                        storage.setItem("indentity", res.data.user.identity);
                        console.log(res.data.user.account);
                        console.log(res.data.user.password);
                        console.log(res.data.user.identity);
                        console.log(storage)
                        location.href = "./menue"
                    }  else if (res.data.state === "200"&&identity==="教师"){

                        var storage = window.localStorage;
                        //storage.setItem("Authorization",res.data.token);
                        storage.setItem("account", res.data.user.account);
                        storage.setItem("password", res.data.user.password);
                        storage.setItem("indentity", res.data.user.identity);
                        console.log(res.data.user.account);
                        console.log(res.data.user.password);
                        console.log(res.data.user.identity);
                        console.log(storage)
                        location.href = "./teacher"
                    }else if (res.data.state === "200"&&identity==="管理员"){

                        var storage = window.localStorage;
                        //storage.setItem("Authorization",res.data.token);
                        storage.setItem("account", res.data.user.account);
                        storage.setItem("password", res.data.user.password);
                        storage.setItem("indentity", res.data.user.identity);
                        console.log(res.data.user.account);
                        console.log(res.data.user.password);
                        console.log(res.data.user.identity);
                        console.log(storage)
                        location.href = "./manage"
                    }else{
                        alert("您输入的信息有误")
                    }
                }
            })


        }

    </script>
</div>
</body>

4.注册的jsp（可以自己调整属性，仅供参考）

<head>
    <title>注册</title>
</head>
<head>
</head>
<body style="background-image: url(../img/登录壁纸.jpg)">
<h1 style="margin-top: 200px;margin-left: 620px">注册页面</h1>
<div>
    <a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入账号:<input  placeholder="账号" style="height: 30px;border-radius: 10%"  type="text" name="user" id="account" size="20"><br></a>
    <a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入密码:<input  placeholder="密码" style="height: 30px;border-radius: 10%" type="password" name="pass" id="password" size="20"><br></a>
    <div style="margin-top: 10px">
        <a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入身份:</a><input  id="identity" placeholder="学生/教师/管理员" style="height: 30px;border-radius: 10%">
    </div>
    <div style="margin-top: 30px">
    <button  style="align-content: center;margin-left: 666px;font-size: 18px;background-color: #b2b2b2"  οnclick="register()" id="register">注册</button>

    已有账号？返回<a href="./">登录</a>
    </div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    url="http://localhost:xxxx"
    var user={
        "register":"/auth/register"

    }
    function  register(){
        var geturl = url + user.register;
        var account = document.getElementById("account").value
        var password = document.getElementById("password").value
        var identity = document.getElementById("identity").value
        console.log(account)
        console.log(password)
        console.log(identity)
        var parm = {
            "account": account,
            "password": password,
            "identity": identity,
        }
        $.ajax({
            url: geturl,
            type: "post",
            contentType: 'application/json',
            data: JSON.stringify(parm),
            success: function (res) {
                if (res.data.state == 400) {
                    alert("账号已存在")
                }
                else if (res.data.state == 200) {
                    alert("注册成功")
                    location.href = "./"
                } else {
                    alert("注册失败")
                }
            }
        })
    }
</script>
</div>
</body>

5.连接数据库（在application.properties文件配置）：

username是用户名称，一般都是root

password是设置的数据库密码，例如：123456

url：是数据库的地址，例如：javaee就是我的数据库名称，localhost:xxxx是本地链接

spring.datasource.username=root
spring.datasource.password=
spring.datasource.url=jdbc:mysql://localhost:xxxx/javaee?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

6.数据库mysql语句：

需注意：id与dao层的id相对应

6.1mapper层的xml文件写sql语句：

<!--    查询数据库是否有该条数据，本项目是根据用户账号进行查询-->
<select id="queryUserByAccount"  resultType="User">
    select 需要查询的字段 from 表名 where account = #{account} 
</select>
<insert id="register" parameterType="User" >
    insert into 表名(account,password,identity)
    values(#{account},#{password},#{identity})
</insert>
<!--    <insert id="register" parameterType="User">-->
<!--        insert into 表名(<include refid="Field"></include> )-->
<!--        values (<include refid="FieldValue"></include>);-->
<!--    </insert>-->
<!--登录用户-->

<select id="login"  resultMap="userRoleMap">
    SELECT u.id, u.account, u.password
    FROM 表名 u
    where u.account = #{account}
      and u.password = #{password}
</select>

6.2dao层

    public User queryUserByAccount(int account);
//注册用户

    public int  register(User user);

    //     登录用户
    public List<User> login(Map<String,Object> map);

7.控制层controller层配路由：

@Controller
public class helloController {
//    登录

    @RequestMapping("/")
    public String index() {

        return "login";
    }

    //    注册
    @RequestMapping("/register")
    public String register() {
        ModelAndView mv = new ModelAndView();
        mv.setViewName("register");
        return "register";
    }

}

8.控制层后端处理：

@PostMapping("/auth/login")
public ResponseMsg<Map> login(@RequestBody User user) {
    ResponseMsg<Map> res = new ResponseMsg<Map>();
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("account", user.getAccount());
    map.put("password", user.getPassword());
    map.put("identity", user.getIdentity());
    User u = new User();
    u.setAccount(user.getAccount());
    u.setPassword(user.getPassword());
    u.setIdentity(user.getIdentity());
    System.out.println(u);
    try {
        List<User> users = userlogin.login(u);
        System.out.println(users);
        if (users.size() != 0) {
            System.out.println(users.get(0));
            res.success("登录成功");
            map.put("user", users.get(0));
            map.put("state", "200");
            res.setData(map);
        } else {

            System.out.println("登录失败");
            map.put("state", "400");
            res.fail("登录失败");
            res.setData(map);
        }
    } catch (Exception e) {
        res.fail("登录失败");

    }
    return res;

}

@PostMapping("/auth/register")
public ResponseMsg<Map> register(@RequestBody User user) {
    ResponseMsg<Map> res = new ResponseMsg<Map>();
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("account", user.getAccount());
    map.put("password", user.getPassword());
    map.put("identity", user.getIdentity());
    User u = new User();
    u.setAccount(user.getAccount());
    u.setPassword(user.getPassword());
    u.setIdentity(user.getIdentity());
    System.out.println(u);
    try {
        int i = userlogin.register(u);
        System.out.println(i);
        if (i == 0) {
            res.success("注册成功");
            map.put("state", "200");
            res.setData(map);
        } else if (i == 1) {
            res.fail("用户名已存在");
            map.put("state", "400");
            res.setData(map);
        } else {
            System.out.println("注册失败");
            map.put("state", "300");
            res.fail("注册失败");
            res.setData(map);
        }
    } catch (Exception e) {
        res.fail("注册失败");

    }
    return res;

}

9.展示图：

10.作者有话说：

本人尚在学习，如果有地方写的不对或者代码有疑问请联系我，及时沟通，共同进步。如果报错的话可能是没有在pom配置依赖。

例如这些：

<dependency>
        <groupId>com.mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter-test</artifactId>
        <version>2.3.1</version>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
        <scope>runtime</scope>
    </dependency>
    <!--热部署-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
    <!--Thymeleaf模板引擎--> <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

    <!-- tomcat 的支持.-->

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-tomcat</artifactId>

        <scope>provided</scope>

    </dependency>

    <dependency>

        <groupId>org.apache.tomcat.embed</groupId>

        <artifactId>tomcat-embed-jasper</artifactId>

        <scope>provided</scope>

    </dependency>

苏柒258

关注

28
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
java+springboot+jsp实现用户登录注册

border-radius: 10%" type="password" name="pass" id="password" size="20">border-radius: 10%" type="text" name="user" id="account" size="20">font-size: 22px">请输入身份:
复制链接

扫一扫