1.环境
jdk8 : “1.8.0_281”
Maven: 3.6.3
Idea:2020.2
Mysql:5.6.40
Navicat:10.1.7
2.步骤
2.1 创建一个SpringBoot项目
选择依赖如下:
Web下的Spring Web。
Template Engines下的Thymeleaf。
SQL下的JDBC API、Spring Data JDBC、MySQL Driver。
项目的结构:
2.2 pom依赖配置
<?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.4.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.haungkd</groupId>
<artifactId>weblogindemo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>weblogindemo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!-- mybatis-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.3</version>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
<!--druid连接池-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.3</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.xmlunit</groupId>
<artifactId>xmlunit-core</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.6</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
2.3 设置配置文件
yml文件配置:
其中url中的数据库记得对应,我的库为login
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/login?serverTimezone=GMT%2B8&useSSL=true
username: root #数据库
password: 123456 #密码
properties文件配置:
#端口号
server.port=8088
#druid数据库连接池
type=com.alibaba.druid.pool.DruidDataSource
#清除缓存
spring.thymeleaf.cache=false
#配
2.4 在pojo包下创建实体类UserLogin
package com.huangkd.weblogindemo.pojo;
import javax.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data // get/set 方法
@AllArgsConstructor//有参构造器
@NoArgsConstructor//无参构造器
@Table(name = "userlogin")
public class UserLogin {
private String username;
private String password;
public String getUsername() {
return username;
}
}
2.5创建数据库和数据表
我创建login库,创建userlogin表,字段为username和password
2.6 连接数据库
在IDEA右边选择:
Database——> ——> Data Source——> Mysql
如果测试不通:出现如下:
Server returns invalid timezone. Need to set ‘serverTimezone’ property.
是数据库时区问题
解决方法:
打开开最右侧 Advanced,找到 serverTimezone,在右侧value处填写 GMT,保存即可
2.7Mapper层(Dao):数据库持久层
在mapper包下建UserLoginMapper接口
package com.huangkd.weblogindemo.mapper;
import com.huangkd.weblogindemo.pojo.UserLogin;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
@Repository
public interface UserLoginMapper {
//定义增删改查方法
//查询所有
public List<UserLogin> queryAll();
//添加数据
public int add(UserLogin userLogin);
//根据用户名查询
public UserLogin queryByUsername(String username);
}
在resources下建UserLoginMapper.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.huangkd.weblogindemo.mapper.UserLoginMapper">
<select id="queryAll" resultType="com.huangkd.weblogindemo.pojo.UserLogin">
select * from userlogin
</select>
<insert id="add" parameterType="com.huangkd.weblogindemo.pojo.UserLogin">
insert into userlogin values (#{username},#{password})
</insert>
<select id="queryByUsername" resultType="com.huangkd.weblogindemo.pojo.UserLogin">
select * from userlogin where username=#{username}
</select>
</mapper>
2.8 Service层:业务逻辑层
在services下新建接口UserLoginServicesI和类UserLoginServicesImpl
UserLoginServicesI接口:
import com.huangkd.weblogindemo.pojo.UserLogin;
import java.util.List;
public interface UserLoginServicesl {
//查询所有
public List<UserLogin> queryAll();
//添加数据
public int add(UserLogin userLogin);
//根据用户名查询
public UserLogin queryByUsername(String username);
}
UserLoginServicesImpl类:
package com.huangkd.weblogindemo.services;
import com.huangkd.weblogindemo.mapper.UserLoginMapper;
import com.huangkd.weblogindemo.pojo.UserLogin;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserLoginServicesImpl implements UserLoginServicesl {
@Autowired
//Service层调用dao层/mapper层 一般在service层中创建一个dao/mapper层对象
//用对象调用对应的增删改查方法
UserLoginMapper userLoginMapper;
@Override
public List<UserLogin> queryAll() {
return userLoginMapper.queryAll();
}
@Override
public int add(UserLogin userLogin) {
return userLoginMapper.add(userLogin);
}
@Override
public UserLogin queryByUsername(String username) {
return userLoginMapper.queryByUsername(username);
}
}
2.9 Controller层:控制层
在controller包下创建MyController类:
package com.huangkd.weblogindemo.controller;
import com.huangkd.weblogindemo.pojo.UserLogin;
import com.huangkd.weblogindemo.services.UserLoginServicesImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class MyController {
//controller层调用service层
//创建一个service层对象
@Autowired
UserLoginServicesImpl userLoginServices;
//登录
@RequestMapping("/toLogin")
public String toLogin() {
return "login";
}
@RequestMapping("/loginSuccess")
public String loginSuccess(Model model, UserLogin userLogin) {
//查询用户名是否存在
UserLogin userLogin1 = userLoginServices.queryByUsername(userLogin.getUsername());
if (userLogin1 != null) { //如果用户名存在
if (userLogin1.getPassword().equals(userLogin.getPassword())) {
System.out.println(userLogin1.toString());
return "success";
} else {
model.addAttribute("data", "密码不正确");
return "login";
}
} else { //用户名不存在,直接返回到登录页面
model.addAttribute("data", "该用户不存在,请先注册");
return "login";
}
}
//注册
@RequestMapping("/toRegister")
public String toRegister() {
return "register";
}
@RequestMapping("/toRegisterSuccess")
public String toRegisterSuccess(Model model,UserLogin userLogin) {
//添加一条记录到数据库中
int add = userLoginServices.add(userLogin);
System.out.println("插入数据成功");
model.addAttribute("data","注册成功,请登录");
return "login";
}
}
2.10 前端页面
login.html:登录页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body background="back.jpg">
<div align="center">
<br><br><h2>登录界面</h2><br><br>
<span th:text="${data}" style="text-color:red;font-size: 10px"></span>
<form method="get" action="/loginSuccess">
用户名:<input type="text" name="username" placeholder="请输入用户名" required/><br><br>
密码:<input type="text" name="password" placeholder="请输入密码" required/><br><br>
<input type="submit" value="登录">
</form>
<br>
<form method="get" action="/toRegister">
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
regsister.html:注册页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>register</title>
</head>
<body background="back.jpg" >
<div align="center">
<br><br><h1>注册界面</h1><br><br>
<form method="get" action="/toRegisterSuccess">
用户名:<input type="text" name="username" placeholder="请输入用户名" required/><br><br>
密码:<input type="text" name="password" placeholder="请输入密码" required/><br><br>
确认密码:<input type="text" name="password2" placeholder="请输入密码" required/><br><br>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
success.html:成功页面
成功页面我复制本人csdn首页源代码
3.测试
登录:
注册:
成功:
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。