SpringBoot+thymeleaf+druid实现简单登录注册功能
简介
第一次写博客，可能会有一些小问题，欢迎评论指正。
本次使用的是IntelliJ idea编译器，eclipse操作流程也是大同小异的。
新建springboot项目
点击file–>new–>project,然后选择spring initializr，直接点击next
然后输入信息；
导入项目依赖，选择项目所需要的jar包，也可以不选择，在项目构建成功后，在pom文件里面添加依赖。
添加依赖
这里只给出依赖jar包，其他部分建立项目的时候就有了。
<dependencies>
<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>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.10</version>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
</dependencies>
配置文件
在resources文件夹下面新建一个文件，命名application.properties
具体配置如下：
#数据库连接池
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
server.port=8089
mybatis.type-aliases-package=com.example.demo.entity
mybatis.mapper-locations=classpath:mapperConfig/*.xml
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**
logging.level.com.demo.mapper=debug
实体类
package com.example.demo.entity;
import java.io.Serializable;
public class User implements Serializable {
private Integer userId;
private String username;
private String password;
private Integer age;
@Override
public String toString() {
return "User{" +
"userId=" + userId +
", username='" + username + '\'' +
", password='" + password + '\'' +
", age=" + age +
'}';
}
public Integer getUserId() {
return userId;
}
public void setUserId(Integer userId) {
this.userId = userId;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
注册页面
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
<link rel="stylesheet" th:href="@{/css/my.css}"/>
<title>注册界面</title>
</head>
<body id="di1">
<div>
<label style="text-align: center">
<h2>注册界面</h2>
</label>
</div>
<div id="form-style">
<form action="register" method="post" name="myform" >
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="title" autocomplete="off"
placeholder="请输入账号" class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" placeholder="请输入密码"
autocomplete="off" class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年 龄</label>
<div class="layui-input-inline">
<input type="text" name="age" autocomplete="off"
placeholder="请输入年 龄" class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo">
立即提交
</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script th:src="@{//layui/layui.all.js }" type="text/javascript"></script>
<script type="text/javascript">
layui.use(['jquery', 'layer', 'form'], function () {
var $ = layui.$;
var layer = layui.layer;
var form = layui.form;
form.on('submit(demo)', function (data) {
var param = JSON.stringify(data.field);
$.ajax({
type: "POST",
url: "/register",
dataType: "json",
contentType: "application/json",
data: param,
success: function () {
}
});
});
})
</script>
</body>
</html>
mapper.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.example.demo.mapper.UserDAO">
<!-- 新增用户 -->
<insert id="insertUserInf" useGeneratedKeys="true" keyProperty="userId" parameterType="com.example.demo.entity.User">
insert into user(username, password, age) values(#{username}, #{password}, #{age})
</insert>
</mapper>
控制层
@Autowired
private UserServices userServices;
@RequestMapping("/register")
public String userRegister(@RequestParam("username") String username,
@RequestParam("password") String password,
@RequestParam("age") Integer age) {
Map<String,Object> map = new HashMap<>();
map.put("username",username);
map.put("password",password);
map.put("age",age);
userServices.insertUserInf(map);
return "login";
}
@RequestMapping("/registry")
public String registry(){
return "register";
}
775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
