HBuilderX和IntelliJ IDEA实现简单登录认证功能 |
您所在的位置：网站首页 › hbuilder注册要钱吗 › HBuilderX和IntelliJ IDEA实现简单登录认证功能 |
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 登录页面 用户名： 密 码： 登录 $("#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); } }); });至此，前端项目搭建完成，项目的结构图如下：
第三步、IntelliJ IDEA中创建springboot项目 1、创建项目demo：点击左上角的菜单栏：File>New->Project->Spring Initializer
如上图所示，在Name后面的输入框中填写项目名demo，因为已经创建过名为demo项目，所以有红色错误提示，直接忽视，Java后面的下拉框选择jdk版本为8，点击Next继续下一步，然后点击Finish，至此，springboot项目创建完成。 2、修改pom.xml，导入项目使用到的依赖jar包 4.0.0 org.springframework.boot spring-boot-starter-parent 2.5.9 com.example demo 0.0.1-SNAPSHOT 1.8 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test org.mybatis.spring.boot mybatis-spring-boot-starter 2.2.2 mysql mysql-connector-java runtime org.projectlombok lombok 1.18.12 provided com.alibaba druid 1.1.21 org.springframework.boot spring-boot-starter-validation 2.5.9 org.springframework.boot spring-boot-maven-pluginpom.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 handlerException(Exception exception) { exception.printStackTrace(); return JsonResult.error(ResponseCode.ERROR, exception); } /** * 处理ServiceException * @param exception ServiceException * @return JsonResult */ @ExceptionHandler(ServiceException.class) public JsonResult handlerServiceException(ServiceException exception) { exception.printStackTrace(); return JsonResult.error(exception.getResponseCode(), exception); } /** * 处理BindException * @param exception BindException * @return JsonResult */ @ExceptionHandler(BindException.class) public JsonResult 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 { /** * 响应状态码 */ private Integer code; /** * 响应提示信息 */ private String message; /** * 响应数据 */ private T data; public static JsonResult success() { return success(null); } public static JsonResult success(String message) { return success(message, null); } public static JsonResult success(String message, T data) { JsonResult jsonResult = new JsonResult(); jsonResult.setCode(ResponseCode.SUCCESS.getValue()); jsonResult.setMessage(message); jsonResult.setData(data); return jsonResult; } public static JsonResult error(ResponseCode responseCode, Throwable e) { return error(responseCode, e.getMessage()); } public static JsonResult error(ResponseCode responseCode, String message) { JsonResult 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 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 select id, username, password from user where username = #{username}第六步、开启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
|
【本文地址】
今日新闻 |
推荐新闻 |