log in page
front end
log in page
login.html login page
<!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 registration page
<!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>
style.css page calls 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;
}
database
Environment springboot, web
User-create data table
Create a database:
CREATE DATABASE store;
Use the database:
USE store;
Create a user data table:
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
Create entity class
Since there will be more entity classes in the future, there will also be 4 attributes related to the log. Therefore, before creating the entity class, you should create the base class of these entity classes and declare the 4 log attributes in the base class:
/*
*实体类的基类
*/
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;
}
Then, create the entity class of cn.tedu.store.entity.User user data, inherit from the above BaseEntity, declare the corresponding attributes in the data table, add the SET/GET method, and generate hashCode() and equals() based on the unique identifier uid )method:
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() + "]";
}
}
First of all, you need to configure the relevant information for connecting to the database in 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
unit test
After the configuration is complete, you should write and execute the unit test of "Get database connection" in the cn.cyjt.shoot.StoreApplicationTests class under src/test/java:
@Autowired
public DataSource dataSource;
@Test
public void getConnection() throws SQLException {
Connection conn = dataSource.getConnection();
System.err.println("dataSource.getConnection() conn:::"+conn);
}
Design interfaces and abstract methods
Create the cn.cyjt.shoot.mapper.UserMapper interface and add abstract methods to the interface:
/**
* 处理用户数据的持久层接口
*/
public interface UserMapper {
/**
* 插入用户数据
* @param user 用户数据
* @return 受影响的行数
*/
Integer insert(User user);
/**
* 根据用户名查询用户数据
* @param username 用户名
* @return 匹配的用户数据，如果没有匹配的数据，则返回null
*/
User findByUsername(String username);
}
Since this is the first time to create an interface, the location of the interface should also be configured, so you need to add configuration before the declaration of the startup class (StoreApplication) :
@MapperScan("cn.cyjt.store.mapper")
@SpringBootApplication
public class StoreApplication {
...
Create a mappers folder under src/main/resources, paste the UserMapper.xml file under this folder, and configure it:
<?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>
Since it is the first time to use, you need to configure the location of the XML file in application.properties:
mybatis.mapper-locations=classpath:mappers/*.xml
Finally, under src/test/java, create the cn.cyjt.shoot.mapper.UserMapperTests test class, add @RunWith(SpringRunner.class) and @SpringBootTest annotations before the declaration of the test class, and declare the persistence layer in the test class Object, inject values through autowiring:
@RunWith(SpringRunner.class)
@SpringBootTest
public class UserMapperTests {
@Autowired
UserMapper userMapper;
}