ログインページ
フロントエンド
ログインページ
login.htmlログインページ
<!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登録ページ
<!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ページは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;
}
データベース
環境スプリングブーツ、ウェブ
ユーザー作成データテーブル
データベースを作成します。
CREATE DATABASE store;
データベースを使用します。
USE store;
ユーザーデータテーブルを作成します。
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;
スプリングブーツ
エンティティクラスを作成する
将来的にはエンティティクラスが増えるため、ログに関連する属性も4つあります。したがって、エンティティクラスを作成する前に、これらのエンティティクラスの基本クラスを作成し、基本クラスで4つのログ属性を宣言する必要があります。 ：
/*
*实体类的基类
*/
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;
}
次に、cn.tedu.store.entity.Userユーザーデータのエンティティクラスを作成し、上記のBaseEntityから継承し、データテーブルで対応する属性を宣言し、SET / GETメソッドを追加して、hashCode（）およびequals（）ベースを生成します。一意の識別子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() + "]";
}
}
まず、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
単体テスト
構成が完了したら、src / test / javaの下のcn.cyjt.shoot.StoreApplicationTestsクラスに「Getdatabaseconnection」の単体テストを記述して実行する必要があります。
@Autowired
public DataSource dataSource;
@Test
public void getConnection() throws SQLException {
Connection conn = dataSource.getConnection();
System.err.println("dataSource.getConnection() conn:::"+conn);
}
インターフェイスと抽象メソッドの設計
cn.cyjt.shoot.mapper.UserMapperインターフェイスを作成し、インターフェイスに抽象メソッドを追加します。
/**
* 处理用户数据的持久层接口
*/
public interface UserMapper {
/**
* 插入用户数据
* @param user 用户数据
* @return 受影响的行数
*/
Integer insert(User user);
/**
* 根据用户名查询用户数据
* @param username 用户名
* @return 匹配的用户数据，如果没有匹配的数据，则返回null
*/
User findByUsername(String username);
}
インターフェイスを作成するのはこれが初めてなので、インターフェイスの場所も構成する必要があります。そのため、スタートアップクラス（StoreApplication）を宣言する前に構成を追加する必要があります。
@MapperScan("cn.cyjt.store.mapper")
@SpringBootApplication
public class StoreApplication {
...
src / main / resourcesの下にmappersフォルダーを作成し、このフォルダーの下にUserMapper.xmlファイルを貼り付けて、次のように構成します。
<?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>
初めて使用するため、application.propertiesでXMLファイルの場所を構成する必要があります。
mybatis.mapper-locations=classpath:mappers/*.xml
最後に、src / test / javaで、cn.cyjt.shoot.mapper.UserMapperTestsテストクラスを作成し、テストクラスの宣言の前に@RunWith（SpringRunner.class）および@SpringBootTestアノテーションを追加し、永続層を宣言します。テストクラスオブジェクト、自動配線を介して値を挿入します：
@RunWith(SpringRunner.class)
@SpringBootTest
public class UserMapperTests {
@Autowired
UserMapper userMapper;
}