HBuilderX和IntelliJ IDEA实现简单登录认证功能

有时间抽空写了一个小demo，使用HBuilderX和IntelliJ IDEA创建前后端分离的项目，并实现简单的登录功能（简单连接数据库判断），通过Ajax与后端的SpringBoot项目进行交互。

第一步：创建数据库

1、新建数据库demo

2、创建表user

create table user (
id int primary key auto_increment,
username varchar(255) not null,
password varchar(255) not null
);

insert into user values(1, 'admin', 'abcd1234');

第二步：创建前端项目

1、打开HBuilderX，点击右上角菜单栏：文件->新建->项目->基本html项目

2、下载jquery.min.js，将其放在项目的js目录下

3、在项目的html目录下新建登录页面login.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录页面</title>
    </head>
    
    <body>
        <form>
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input id = "username" /></td>
                </tr>
                
                <tr>
                    <td>密&emsp;码：</td>
                    <td><input id = "password" /></td>
                </tr>
                
                <tr>
                    <td><button type="button" id="login">登录</button></td>
                    <td><input type="reset" value="重置" /></td>
                </tr>
            </table>
        </form>
        
        <script src="../js/jquery.min.js" charset="utf-8"></script>
        <script>
            $("#login").click(function() {
                let username = $("#username").val();
                let password = $("#password").val();

                $.post("http://localhost:8080/user/login", {
                    "username": username,
                    "password": password
                }, function(response) {
                    if(response.code === 200) {
                        location.href = "http://www.baidu.com";
                    } else {
                        alert(response.message);
                    }
                });
            });
        </script>
    </body>
</html>

至此，前端项目搭建完成，项目的结构图如下：

第三步、IntelliJ IDEA中创建springboot项目

1、创建项目demo：点击左上角的菜单栏：File>New->Project->Spring Initializer

如上图所示，在Name后面的输入框中填写项目名demo，因为已经创建过名为demo项目，所以有红色错误提示，直接忽视，Java后面的下拉框选择jdk版本为8，点击Next继续下一步，然后点击Finish，至此，springboot项目创建完成。

2、修改pom.xml，导入项目使用到的依赖jar包

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.9</version>
        <relativePath/>
    </parent>

    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

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

        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>

        <!-- 数据库连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.21</version>
        </dependency>

        <!--validation-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
            <version>2.5.9</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

pom.xml文件内容比较固定，可直接复制以上内容

3、修改配置文件application.properties，复制以下内容

server.port=8080

server.servlet.encoding.force=true
server.servlet.encoding.charset=UTF-8

# 数据库配置
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.url=jdbc:mysql://localhost:3306/demo

mybatis.mapper-locations=classpath:mapper/*Mapper.xml
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource

第四步、创建公共类（在com.example.demo包下创建）

1、创建自定义异常类

新建exception包，创建ServiceException异常类

package com.example.demo.exception;

import com.example.demo.restful.ResponseCode;
import lombok.Data;

/**
 * service层自定义异常
 */
@Data
public class ServiceException extends RuntimeException {
    private ResponseCode responseCode;

    public ServiceException(ResponseCode responseCode, String message) {
        super(message);

        setResponseCode(responseCode);
    }

}

2、创建统一异常处理类

在exception包下新建handler包，创建统一异常处理类GlobalExceptionHandler

package com.example.demo.exception.handler;

import com.example.demo.exception.ServiceException;
import com.example.demo.restful.JsonResult;
import com.example.demo.restful.ResponseCode;
import org.springframework.validation.BindException;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

@RestControllerAdvice
public class GlobalExceptionHandler {
    /**
     * 处理Exception
     * @param exception Exception
     * @return JsonResult
     */
    @ExceptionHandler(Exception.class)
    public JsonResult<Void> handlerException(Exception exception) {
        exception.printStackTrace();

        return JsonResult.error(ResponseCode.ERROR, exception);
    }

    /**
     * 处理ServiceException
     * @param exception ServiceException
     * @return JsonResult
     */
    @ExceptionHandler(ServiceException.class)
    public JsonResult<Void> handlerServiceException(ServiceException exception) {
        exception.printStackTrace();

        return JsonResult.error(exception.getResponseCode(), exception);
    }

    /**
     * 处理BindException
     * @param exception BindException
     * @return JsonResult
     */
    @ExceptionHandler(BindException.class)
    public JsonResult<Void> handlerBindException(BindException exception) {
        exception.printStackTrace();

        BindingResult bindingResult = exception.getBindingResult();
        FieldError fieldError = bindingResult.getFieldError();
        assert fieldError != null;
        String defaultMessage = fieldError.getDefaultMessage();

        return JsonResult.error(ResponseCode.BAD_REQUEST, defaultMessage);
    }

}

3、创建结果集类

新建restful包，创建JsonResult和ResponseCode

JsonResult.java

package com.example.demo.restful;

import lombok.Data;

@Data
public class JsonResult<T> {
    /**
     * 响应状态码
     */
    private Integer code;
    /**
     * 响应提示信息
     */
    private String message;
    /**
     * 响应数据
     */
    private T data;

    public static JsonResult<Void> success() {
        return success(null);
    }

    public static JsonResult<Void> success(String message) {
        return success(message, null);
    }

    public static <T> JsonResult<T> success(String message, T data) {
        JsonResult<T> jsonResult = new JsonResult<>();

        jsonResult.setCode(ResponseCode.SUCCESS.getValue());
        jsonResult.setMessage(message);
        jsonResult.setData(data);

        return jsonResult;
    }

    public static JsonResult<Void> error(ResponseCode responseCode, Throwable e) {
        return error(responseCode, e.getMessage());
    }

    public static JsonResult<Void> error(ResponseCode responseCode, String message) {
        JsonResult<Void> jsonResult = new JsonResult<>();

        jsonResult.setCode(responseCode.getValue());
        jsonResult.setMessage(message);

        return jsonResult;
    }

}

ResponseCode.java

package com.example.demo.restful;

/**
 * 响应状态码
 */
public enum ResponseCode {
    SUCCESS(200),
    BAD_REQUEST(400),
    NOT_FOUND(404),
    ERROR(500);

    private final Integer value;

    ResponseCode(Integer value) {
        this.value = value;
    }

    public Integer getValue() {
        return value;
    }

}

第五步、创建项目使用的包和类（在com.example.demo包下创建）

1、新建entity包，创建一个实体类User

package com.example.demo.entity;

import lombok.Data;

@Data
public class User {
    private Integer id;

    /**
     * 用户名
     */
    private String username;

    /**
     * 密码
     */
    private String password;
}

2、新建dto包，创建UserDto

package com.example.demo.dto;

import lombok.Data;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Pattern;

@Data
public class UserDto {
    /**
     * 用户名
     */
    @NotNull(message = "用户名不能为空")
    @NotEmpty(message = "用户名不能为空")
    private String username;

    /**
     * 密码
     */
    @NotNull(message = "密码不能为空")
    @NotEmpty(message = "密码不能为空")
    private String password;
}

3、新建controller包，创建UserController控制器类

package com.example.demo.controller;

import com.example.demo.dto.UserDto;
import com.example.demo.restful.JsonResult;
import com.example.demo.restful.ResponseCode;
import com.example.demo.service.IUserService;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private IUserService service;

    /**
     * 用户登录
     * @param userDto 用户登录信息
     * @return JsonResult
     */
    @CrossOrigin
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public JsonResult<Void> login(@Validated UserDto userDto) {
        boolean result = service.login(userDto);

        if (result) {
            return JsonResult.success();
        } else {
            return JsonResult.error(ResponseCode.BAD_REQUEST, "用户名或密码错误，登陆失败！");
        }
    }

}

4、新建service包，创建IUserService接口

package com.example.demo.service;

import com.example.demo.dto.UserDto;

public interface IUserService {
    /**
     * 用户登录
     * @param user 用户登录信息
     * @return boolean
     */
    boolean login(UserDto user);
}

5、service包下新建impl包，创建UserServiceImpl类实现IUserService接口

package com.example.demo.service.impl;

import com.example.demo.dto.UserDto;
import com.example.demo.entity.User;
import com.example.demo.exception.ServiceException;
import com.example.demo.mapper.UserMapper;
import com.example.demo.restful.ResponseCode;
import com.example.demo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements IUserService {
    @Autowired
    private UserMapper mapper;

    @Override
    public boolean login(UserDto userDto) {
        User user = mapper.selectByUsername(userDto.getUsername());
        if (user == null) {
            throw new ServiceException(ResponseCode.NOT_FOUND, "登录失败，用户名不存在！");
        }
        return user.getPassword().equals(userDto.getPassword());
    }

}

6、新建mapper包，创建UserMapper接口

package com.example.demo.mapper;

import com.example.demo.entity.User;
import org.springframework.stereotype.Repository;

@Repository
public interface UserMapper {
    User selectByUsername(String username);
}

7、resources目录下创建mapper包，创建UserMapper.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.demo.mapper.UserMapper">
    <select id="selectByUsername" resultType="com.example.demo.entity.User">
        select id, username, password from user where username = #{username}
    </select>
</mapper>

第六步、开启mapper包扫描

在DemoApplication启动类上添加@MapperScan注解

@MapperScan(basePackages = {"com.example.demo.mapper"})

package com.example.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan(basePackages = {"com.example.demo.mapper"})
@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

第七步：运行DemoApplication，启动springboot项目

第八步：在HbuilderX中使用浏览器打开login.html

标签： intellij-idea java ide

本文转载自: https://blog.csdn.net/heyl163_/article/details/127378391
版权归原作者 developer of java 所有，如有侵权，请联系我们删除。

HBuilderX和IntelliJ IDEA实现简单登录认证功能

第一步：创建数据库

第二步：创建前端项目

第三步、IntelliJ IDEA中创建springboot项目

第四步、创建公共类（在com.example.demo包下创建）

第五步、创建项目使用的包和类（在com.example.demo包下创建）

第六步、开启mapper包扫描

第七步：运行DemoApplication，启动springboot项目

第八步：在HbuilderX中使用浏览器打开login.html

发表评论

“HBuilderX和IntelliJ IDEA实现简单登录认证功能”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航