仅供参考
目录结构:
环境:
idea,mysql(8.0.29)
1.新建项目
1.
2.Project SDK选择自己对应的java版本
url选第二个,使用阿里的镜像:http://start.aliyun.com 不然容易进不去
然后next
3.
4.选择这六个然后next
5.项目文件夹命名(根据自己需要写)然后finish
6.等待下载,下载完毕目录结构如图:
2.添加依赖
在pom.xml文件里导入坐标
<!-- html文件使用依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3.配置文件(需要根据自己情况来写)
1.在resources下新建
application.yml配置文件写入以下代码(driver-class-name,5.0版本的mysql不用加.cj)
spring:
datasource:
username: root
password: root
url: jdbc:mysql://localhost:3306/mybatis?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
driver-class-name: com.mysql.cj.jdbc.Driver
2.application.properties配置文件修改为:(他自带的可以全部注释掉)
#端口号
server.port=8080
#druid数据库连接池
type=com.alibaba.druid.pool.DruidDataSource
#清除缓存
spring.thymeleaf.cache=false
#配置mapper
mybatis.mapper-locations=classpath:mapper/*.xml
4.新建实体类(并且新建数据库表):
1.实体类:
package com.cxy.demo.model;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class User {
private int id;
private String username;
private String password;
private String phone;
private int age;
}
2.数据库:
新建数据库表:
CREATE TABLE `user` (
`id` int(0) NOT NULL AUTO_INCREMENT,
`username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
`age` int(0) NULL DEFAULT NULL,
`phone` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 35 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
随便插入点数据:
INSERT INTO `user` VALUES (1, '沙雕', '2324242', 22, '0');
INSERT INTO `user` VALUES (2, '撒旦', 'xy666', 22, '0');
INSERT INTO `user` VALUES (3, '阿松大', 'xy666', 22, '0');
INSERT INTO `user` VALUES (4, 'cxy', '666', 22, '2322323');
INSERT INTO `user` VALUES (5, '科次', 'xy666', 22, '0');
INSERT INTO `user` VALUES (6, '撒旦', '1', 22, '0');
INSERT INTO `user` VALUES (7, '下次', '213', 22, '0');
INSERT INTO `user` VALUES (8, '鲨鱼', '21', 22, '0');
INSERT INTO `user` VALUES (9, '肥田', '2', 22, '0');
INSERT INTO `user` VALUES (10, '卢克', '2', 22, '0');
5.补全代码
1.在项目名字下新建mapper包下写UserMapper接口
package com.cxy.demo.mapper;
import com.cxy.demo.model.User;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
@Repository
public interface UserMapper {
//查询
public List<User> queryAll();
//添加数据
public int add(User user);
//根据用户名查询数据
public User queryByName(String username);
}
2.在resources里新建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.cxy.demo.mapper.UserMapper">
<select id="queryAll" resultType="com.cxy.demo.model.User">
select * from user
</select>
<insert id="add" parameterType="com.cxy.demo.model.User">
insert into user values (0,#{username},#{password},0,0)
</insert>
<select id="queryByName" resultType="com.cxy.demo.model.User">
select * from user where username = #{username}
</select>
</mapper>
3.写Service层:
1.写接口
package com.cxy.demo.service;
import com.cxy.demo.model.User;
import java.util.List;
public interface IUserService {
//查询
public List<User> queryAll();
//添加数据
public int add(User user);
//根据用户名查询数据
public User queryByName(String username);
}
2.写实现类
package com.cxy.demo.service.impl;
import com.cxy.demo.mapper.UserMapper;
import com.cxy.demo.model.User;
import com.cxy.demo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements IUserService {
@Autowired
UserMapper userMapper;
@Override
public List<User> queryAll() {
return userMapper.queryAll();
}
@Override
public int add(User user) {
return userMapper.add(user);
}
@Override
public User queryByName(String username) {
return userMapper.queryByName(username);
}
}
4.写controller(控制层)
新建controller包下写UserController文件
package com.cxy.demo.controller;
import com.cxy.demo.model.User;
import com.cxy.demo.service.impl.UserServiceImpl;
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 UserController {
@Autowired
UserServiceImpl userService;
//用户登录页面
@RequestMapping("/toLogin")
public String toLogin() {
return "login";
}
//用户登录
@RequestMapping("/loginSuccess")
public String LoginSuccess(Model model, User user) {
//先查询看该用户名是否存在
User user1 = userService.queryByName(user.getUsername());
if (user1 != null) { // 如果查询的用户不为空
System.out.println(user1.toString());
return "success";
} else {
//返回到登录页面
model.addAttribute("data", "该用户不存在,请先注册");
return "login";
}
}
//用户注册页面
@RequestMapping("/toRegister")
public String toRegister() {
return "register";
}
//注册成功
@RequestMapping("/registerSuccess")
public String toRegisterSuccess(Model model, User user) {
//将账号密码加入到数据库中
int add = userService.add(user);
System.out.println("数据插入成功!");
model.addAttribute("data", "注册成功,请登录!");
return "login";
}
}
5.写前端页面:
在resources里的templates文件夹里面新建
1.登录:login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>欢迎登录</title>
</head>
<body style="background: lightgreen">
<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>
2.注册:register.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
</head>
<body style="background: lightgoldenrodyellow">
<div align="center">
<br><br>注册界面<br><br>
<form method="get" action="/registerSuccess">
用户名:<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>
3.登陆成功:success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>登录成功了,你很牛逼</h1>
</body>
</html>
6.DemoApplication修改
增加:@MapperScan("com.cxy.demo.mapper")
mapperscan作用是指定要变成实现类的接口所在的包,然后包下面的所有接口在编译之后都会生成相应的实现类
7.测试
运行demo下的DemoApplication
然后随便进一个浏览器输入以下网址 ,进入测试
http://localhost:8080/toLogin
因为是入门案例就随便弄的,很多地方不完善,可以进一步完善!