página de inicio de sesión
Interfaz
página de inicio de sesión
login.html página de inicio de sesión
<!DOCTYPE html>
<html lang="en">
<head>
<title>学籍管理登录</title>
<!-- Bootstrap core CSS -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="sign-up-from">
<img src="default.jpg">
<h1>系统登录</h1>
<form>
<input type="email" class="input-box" placeholder="请输入账号">
<input type="password" class="input-box" placeholder="请输入密码">
<p><span><input type="checkbox" checked ='checked'></span> 我同意服务条款</p>
<button type="button" class="signUp-btn">登录</button>
<hr>
<p class="or">OR</p>
<!-- <button type="button" class="twitter-btn">注册</button> -->
<p>没有账号点击这里 <a href="register.html" >注册</a></p>
<p class="cyjt">© 创业锦泰信息科技2020-20xx</p>
</form>
</div>
</body>
</html>
register.html página de registro
<!DOCTYPE html>
<html lang="en">
<head>
<title>注册</title>
<!-- Bootstrap core CSS -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="sign-up-from">
<h1>系统用户注册</h1>
<form>
<input type="email" class="input-box" placeholder="请输入账号">
<input type="frist-password" class="input-box2" placeholder="请输入密码">
<input type="last-password" class="input-box3" placeholder="再输入密码">
<p><span><input type="checkbox" checked ='checked'></span> 我同意服务条款</p>
<!-- <button type="button" class="signUp-btn">登录</button>
<hr>
<p class="or">OR</p> -->
<button type="button" class="twitter-btn">注册</button>
<p>联系管理员 <a href="##" >点击这里</a></p>
<p class="cyjt">© 创业锦泰信息科技2020-20xx</p>
</form>
</div>
</body>
</html>
La página style.css llama a CSS
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background-image: url(background1.jpg);
background-size: cover;
background-position: center;
}
.sign-up-from
{
width: 300px;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
background: #fff;
padding: 20px;
margin: 8% auto 0;
text-align: center;
}
.sign-up-from h1
{
color: #1c8abc;
margin-bottom: 30px;
}
.input-box
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none;
}
.input-box2
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none;
}
.input-box3
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none;
}
button
{
color: #fff;
width: 100%;
padding: 10px;
border-radius: 20px;
font-size: 15px;
margin: 10px 0;
border: none;
outline: none;
cursor: pointer;
}
.signUp-btn
{
background-color: #1c8abc;
}
.twitter-btn
{
background-color: #21afde;
}
a
{
text-decoration: none;
}
hr
{
margin-top: 20px;
width: 80%;
}
.or
{
background: #fff;
width: 30px;
margin: -19px auto 10px;
}
img
{
width: 70px;
border-radius: 30px;
margin-top: -70px;
}
.cyjt
{
font-size: 15px;
color: #aaa;
}
base de datos
Springboot de entorno, web
Tabla de datos creada por el usuario
Crea una base de datos:
CREATE DATABASE store;
Usa la base de datos:
USE store;
Cree una tabla de datos de usuario:
CREATE TABLE t_user (
uid INT AUTO_INCREMENT COMMENT '用户id',
username VARCHAR(20) NOT NULL UNIQUE COMMENT '用户名',
password CHAR(32) NOT NULL COMMENT '密码',
salt CHAR(36) COMMENT '盐值',
gender INT COMMENT '性别：0-女，1-男',
phone VARCHAR(20) COMMENT '电话号码',
email VARCHAR(30) COMMENT '电子邮箱',
avatar VARCHAR(100) COMMENT '头像',
is_delete INT COMMENT '是否删除：0-未删除，1-已删除',
created_user VARCHAR(20) COMMENT '日志-创建人',
created_time DATETIME COMMENT '日志-创建时间',
modified_user VARCHAR(20) COMMENT '日志-最后修改执行人',
modified_time DATETIME COMMENT '日志-最后修改时间',
PRIMARY KEY (uid)
) DEFAULT CHARSET=utf8mb4;
springboot
Crear clase de entidad
Dado que habrá más clases de entidad en el futuro, también habrá 4 atributos relacionados con el registro. Por lo tanto, antes de crear la clase de entidad, debe crear la clase base de estas clases de entidad y declarar los 4 atributos de registro en la clase base. :
/*
*实体类的基类
*/
public class BaseEntity implements Serializable {
private static final long serialVersionUID = 6613396591482385844L;
private String createdUser;//创建改人
private Date createdTime;//创建时间
private String modifiedUser;//修改人
private Date modifiedTime;//修改时间
@Override
public String toString() {
return "BaseEntity [createdUser=" + createdUser + ", createdTime=" + createdTime + ", modifiedUser="
+ modifiedUser + ", modifiedTime=" + modifiedTime + "]";
}
public String getCreatedUser() {
return createdUser;
}
public void setCreatedUser(String createdUser) {
this.createdUser = createdUser;
}
public Date getCreatedTime() {
return createdTime;
}
public void setCreatedTime(Date createdTime) {
this.createdTime = createdTime;
}
public String getModifiedUser() {
return modifiedUser;
}
public void setModifiedUser(String modifiedUser) {
this.modifiedUser = modifiedUser;
}
public Date getModifiedTime() {
return modifiedTime;
}
public void setModifiedTime(Date modifiedTime) {
this.modifiedTime = modifiedTime;
}
Luego, cree una clase de entidad de cn.tedu.store.entity.Los datos de usuario del usuario, herede de la BaseEntity anterior, declare los atributos correspondientes en la tabla de datos, agregue los métodos SET / GET y genere hashCode () y equals () basados en el método de identificador único uid):
package cn.cyjt.shoot.entity;
public class User extends BaseEntity{
/**
* 用户数据的实体类
*/
private static final long serialVersionUID = 3414303419311561404L;
private Integer uid;
private String username;
private String password;
private String salt;
private Integer gender;
private String phone;
private String email;
private String avatar;
private Integer isDelete;
public Integer getUid() {
return uid;
}
public void setUid(Integer uid) {
this.uid = uid;
}
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 getSalt() {
return salt;
}
public void setSalt(String salt) {
this.salt = salt;
}
public Integer getGender() {
return gender;
}
public void setGender(Integer gender) {
this.gender = gender;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getAvatar() {
return avatar;
}
public void setAvatar(String avatar) {
this.avatar = avatar;
}
public Integer getIsDelete() {
return isDelete;
}
public void setIsDelete(Integer isDelete) {
this.isDelete = isDelete;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((uid == null) ? 0 : uid.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
User other = (User) obj;
if (uid == null) {
if (other.uid != null)
return false;
} else if (!uid.equals(other.uid))
return false;
return true;
}
@Override
public String toString() {
return "User [uid=" + uid + ", username=" + username + ", password=" + password + ", salt=" + salt + ", gender="
+ gender + ", phone=" + phone + ", email=" + email + ", avatar=" + avatar + ", isDelete=" + isDelete
+ ", toString()=" + super.toString() + "]";
}
}
En primer lugar, debe configurar la información relevante para conectarse a la base de datos en application.properties:
spring.datasource.url=jdbc:mysql://localhost:3306/shoot?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=root
mybatis.mapper-locations=classpath:mappers/*.xml
#解决返回乱码问题
#spring.http.encoding.charset=UTF-8
#spring.http.encoding.force=true
#spring.http.encoding.enabled=true
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.force=true
server.servlet.encoding.enabled=true
prueba de unidad
Una vez completada la configuración, debe escribir y ejecutar la prueba unitaria de "Obtener conexión de base de datos" en la clase cn.cyjt.shoot.StoreApplicationTests en src / test / java:
@Autowired
public DataSource dataSource;
@Test
public void getConnection() throws SQLException {
Connection conn = dataSource.getConnection();
System.err.println("dataSource.getConnection() conn:::"+conn);
}
Diseñar interfaces y métodos abstractos
Cree la interfaz cn.cyjt.shoot.mapper.UserMapper y agregue métodos abstractos a la interfaz:
/**
* 处理用户数据的持久层接口
*/
public interface UserMapper {
/**
* 插入用户数据
* @param user 用户数据
* @return 受影响的行数
*/
Integer insert(User user);
/**
* 根据用户名查询用户数据
* @param username 用户名
* @return 匹配的用户数据，如果没有匹配的数据，则返回null
*/
User findByUsername(String username);
}
Dado que es la primera vez que se crea una interfaz, la ubicación de la interfaz también debe configurarse, por lo que debe agregar la configuración antes de la declaración de la clase de inicio (StoreApplication) :
@MapperScan("cn.cyjt.store.mapper")
@SpringBootApplication
public class StoreApplication {
...
Cree una carpeta de mapeadores en src / main / resources, pegue el archivo UserMapper.xml en esta carpeta y configúrelo:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN"
"http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">
<mapper namespace="cn.cyjt.shoot.mapper.UserMapper">
<resultMap id="UserEntityMap"
type="cn.cyjt.shoot.entity.User">
<id column="uid" property="uid" />
<result column="is_delete" property="isDelete" />
<result column="created_user" property="createdUser" />
<result column="created_time" property="createdTime" />
<result column="modified_user" property="modifiedUser" />
<result column="modified_time" property="modifiedTime" />
</resultMap>
<!-- 插入用户数据 -->
<!-- Integer insert(User user) -->
<insert id="insert" useGeneratedKeys="true" keyProperty="uid">
INSERT
INTO t_user (
username, password,
salt, gender,
phone, email,
avatar, is_delete,
created_user, created_time,
modified_user, modified_time
) VALUES (
#{username}, #{password},
#{salt}, #{gender},
#{phone}, #{email},
#{avatar}, #{isDelete},
#{createdUser}, #{createdTime},
#{modifiedUser}, #{modifiedTime}
)
</insert>
<!-- 根据用户id更新用户密码 -->
<!-- Integer updatePasswordByUid( @Param("uid") Integer uid, @Param("password")
String password, @Param("modifiedUser") String modifiedUser, @Param("modifiedTime")
Date modifiedTime) -->
<update id="updatePasswordByUid">
UPDATE
t_user
SET
password=#{password},
modified_user=#{modifiedUser},
modified_time=#{modifiedTime}
WHERE
uid=#{uid}
</update>
<!-- 根据用户id查询用户数据 -->
<!-- User findByUid(Integer uid) -->
<select id="findByUid" resultMap="UserEntityMap">
SELECT
*
FROM
t_user
WHERE
uid=#{uid}
</select>
<!-- 根据用户名查询用户数据 -->
<!-- User findByUsername(String username) -->
<select id="findByUsername" resultMap="UserEntityMap">
SELECT
*
FROM
t_user
WHERE
username=#{username}
</select>
</mapper>
Dado que es la primera vez que lo usa, debe configurar la ubicación del archivo XML en application.properties:
mybatis.mapper-locations=classpath:mappers/*.xml
Finalmente, en src / test / java, cree la clase de prueba cn.cyjt.shoot.mapper.UserMapperTests, agregue las anotaciones @RunWith (SpringRunner.class) y @SpringBootTest antes de la declaración de la clase de prueba, y declare la capa de persistencia en el Objeto de clase de prueba, inyectar valores mediante cableado automático:
@RunWith(SpringRunner.class)
@SpringBootTest
public class UserMapperTests {
@Autowired
UserMapper userMapper;
}