Spring工程实现简单的登录功能

最新推荐文章于 2023-10-06 18:29:55 发布

qq_42593187

最新推荐文章于 2023-10-06 18:29:55 发布

阅读量593

点赞数

文章标签： spring java 后端 html

本文链接：https://blog.csdn.net/qq_42593187/article/details/126272620

版权

一、创建spring工程。

step1

step2 添加maven依赖

二、创建静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>用户首页</h1>
    <a href="/reg.html">注册</a>
    <a href="/login.html">登录</a>
</div>


</body>
</html>

login.html注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="text" placeholder="请输入用户名" v-model="user.username">
    <input type="text" placeholder="请输入密码" v-model="user.password">
    <input type="button" value="登录" @click="f_login()" >
</div>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js
"></script>
    <script>
        let v= new Vue({
            el: 'body>div',
            data: {
                user:{
                    username:"",
                    password:"",

                }

            },
            methods:{
                f_login(){
                    axios.post("/login",v.user).then(function (response){

                       if(response.data==1)
                       {
                           alert("登录成功！")

                       }
                       else if(response.data==2)
                       {
                           alert("密码错误")
                       }
                       else {
                           alert("用户名不存在！")
                       }
                    })
                }
            }
        })
    </script>
</body>
</html>

reg.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>注册界面</h1>
    <input type="text" placeholder="请输入用户名" v-model="user.username">
    <input type="text" placeholder="请输入密码" v-model="user.password">
    <input type="text" placeholder="请输入昵称" v-model="user.nick">
    <input type="submit" value="注册" @click="f_reg()">
</div>




<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!--    通过cdn地址引入Vue;-->
    <!-- import JavaScript -->

<!--引入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js
"></script>
    <script>
        let v= new Vue({
            el: 'body>div',
            data: {
                   user:{
                       id:"",
                       username:"",
                       password:"",
                       nick:""

                   }

            },
            methods:{
                f_reg(){
                    axios.post("/reg",v.user).then(function (response){
                        // 将input框双向绑定的用户名及密码绑定到user对象
                        // 将user对象传入controller,在数据库中查询是否存在用户名,若存在向前端页面返回2,不存在返回1
                        if(response.data==1)
                        {
                            alert("注册成功");
                            location.href="/";
                        }
                        else
                        {
                            alert("用户名重复");
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>

User实体类

package com.mennan.practice.entity;

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nick;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNick() {
        return nick;
    }

    public void setNick(String nick) {
        this.nick = nick;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", nick='" + nick + '\'' +
                '}';
    }
}

mapper

package com.mennan.practice.mapper;


import com.mennan.practice.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface UserMapper {

    @Insert("insert into user values(null,#{username},#{password},#{nick})")
    void insert(User user);

    @Select("select password from user where username=#{username}")
    User selectByUsername(String username);
}

controller

package com.mennan.practice.controller;

import com.mennan.practice.entity.User;
import com.mennan.practice.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UseController {

    @Autowired
    UserMapper mapper;


    @RequestMapping("/reg")
    public int userReg(@RequestBody User user) {

        User u = mapper.selectByUsername(user.getUsername());
        //如果前端传过来的用户名能在数据库查到则用户名已存在，反之则可以执行注册操作

        if (u != null) {
            //u不为空则数据库查到了用户名
            return 2;
        } else {
            mapper.insert(user);
            return 1;
        }
    }

    @RequestMapping("/login")
    public int userLogin(@RequestBody User user) {
        User u = mapper.selectByUsername(user.getUsername());
        if (u != null) {
            if (u.getPassword().equals(user.getPassword())) {
                return 1;//登录成功
            }
            return 2;//密码错误
        }

       return 3;//用户名不存在
    }
}

application.properties文件


spring.datasource.url=jdbc:mysql://localhost:3306/empdb?characterEncoding=utf8&serverTimezon=Asia"
spring.datasource.username=root
spring.datasource.password=123456

依赖

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>