环境配置:IDEA2021+maven3.8+JDK8+mysql5+mybatis3.5+servlet4+tomcat7+html5+谷歌浏览器+logback日志
需求:
注册功能:前端html页面输入账号密码,通过谷歌浏览器以POST方式传输到web服务器tomcat,tomcat读出传过来的数据,执行doPost方法,方法中代码会通过mybatis访问mysql数据库,并插入一条数据。最后往前端写回一句话。
登录功能:前端html页面输入账号密码,通过谷歌浏览器以POST方式传输到web服务器tomcat,tomcat读出传过来的数据,执行doPost方法,方法中代码会通过mybatis访问mysql数据库,根据账号查出对应的用户数据,有该用户名再判断密码是否正确。最后往前端写回一句话。
接口设计:
登录接口:http://localhost:8080/demologin/login?username=XX&password=XX
注册接口:http://localhost:8080/demologin/RegisterServlet?username=XX&password=XX
登录界面URL:http://localhost:8080/demologin/login.html
注册界面URL:http://localhost:8080/demologin/register.html
项目结构:
=============================================================
数据库准备
数据库名 : db1
数据库密码:1234
/*
建表SQL和测试数据
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for account
-- ----------------------------
DROP TABLE IF EXISTS `account`;
CREATE TABLE `account` (
`id` int(11) DEFAULT NULL,
`name` varchar(255) DEFAULT NULL,
`money` double(11,0) DEFAULT NULL,
`address` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of account
-- ----------------------------
INSERT INTO `account` VALUES ('1', '历程', '3000', '成都');
INSERT INTO `account` VALUES ('2', '皇帝', '3000', '北京');
-- ----------------------------
-- Table structure for tb_brand
-- ----------------------------
DROP TABLE IF EXISTS `tb_brand`;
CREATE TABLE `tb_brand` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`brand_name` varchar(20) DEFAULT NULL,
`company_name` varchar(20) DEFAULT NULL,
`ordered` int(11) DEFAULT NULL,
`description` varchar(100) DEFAULT NULL,
`status` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of tb_brand
-- ----------------------------
INSERT INTO `tb_brand` VALUES ('2', '华为', '华为技术有限公司', '100', '华为致力于把数字世界带入每个人、每个家庭、每个组织,构建万物互联的智能世界', '1');
INSERT INTO `tb_brand` VALUES ('3', '小米', '小米科技有限公司', '50', 'are you ok', '1');
INSERT INTO `tb_brand` VALUES ('4', '凡人修仙传0', '公司0', '222', '描述0', '1');
INSERT INTO `tb_brand` VALUES ('5', '凡人修仙传1', '公司1', '222', '描述1', '1');
INSERT INTO `tb_brand` VALUES ('6', '凡人修仙传2', '公司2', '222', '描述2', '1');
INSERT INTO `tb_brand` VALUES ('7', '凡人修仙传3', '公司3', '222', '描述3', '1');
INSERT INTO `tb_brand` VALUES ('8', '凡人修仙传4', '公司4', '222', '描述4', '1');
INSERT INTO `tb_brand` VALUES ('9', '凡人修仙传5', '公司5', '222', '描述5', '1');
INSERT INTO `tb_brand` VALUES ('10', '凡人修仙传6', '公司6', '222', '描述6', '1');
INSERT INTO `tb_brand` VALUES ('11', '凡人修仙传7', '公司7', '222', '描述7', '1');
INSERT INTO `tb_brand` VALUES ('12', '凡人修仙传8', '公司8', '222', '描述8', '1');
INSERT INTO `tb_brand` VALUES ('13', '凡人修仙传9', '公司9', '222', '描述9', '1');
-- ----------------------------
-- Table structure for tb_user
-- ----------------------------
DROP TABLE IF EXISTS `tb_user`;
CREATE TABLE `tb_user` (
`username` varchar(255) DEFAULT NULL,
`password` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of tb_user
-- ----------------------------
INSERT INTO `tb_user` VALUES ('ldj', '123');
INSERT INTO `tb_user` VALUES ('123', '12356');
INSERT INTO `tb_user` VALUES ('qwer', '123456');
INSERT INTO `tb_user` VALUES ('qwer11111', '123456');
==========================================================
前端页面代码
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link href="css/login.css" rel="stylesheet">
</head>
<body>
<div id="loginDiv">
<form action="/demologin/login" id="form" method="post">
<h1 id="loginMsg">LOGIN IN</h1>
<p>Username:<input id="username" name="username" type="text"></p>
<p>Password:<input id="password" name="password" type="password"></p>
<div id="subDiv">
<input type="submit" class="button" value="login up">
<input type="reset" class="button" value="reset">
<a href="register.html">没有账号?点击注册</a>
</div>
</form>
</div>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号?</span> <a href="login.html">登录</a>
</div>
<form id="reg-form" action="/demologin/RegisterServlet" method="post">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
</body>
</html>
login.css
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(../imgs/Desert.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
}
#name_trip {
margin-left: 50px;
color: red;
}
p {
margin-top: 30px;
margin-left: 20px;
color: azure;
}
input {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
}
#username{
width: 200px;
}
#password{
width: 202px;
}
.button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
#subDiv {
text-align: center;
margin-top: 30px;
}
#loginMsg{
text-align: center;color: aliceblue;
}
register.css
* {
margin: 0;
padding: 0;
list-style-type: none;
}
.reg-content{
padding: 30px;
margin: 3px;
}
a, img {
border: 0;
}
body {
background-image: url("../imgs/reg_bg_min.jpg") ;
text-align: center;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0;
height: 90px;
}
.inputs{
vertical-align: top;
}
.clear {
clear: both;
}
.clear:before, .clear:after {
content: "";
display: table;
}
.clear:after {
clear: both;
}
.form-div {
background-color: rgba(255, 255, 255, 0.27);
border-radius: 10px;
border: 1px solid #aaa;
width: 424px;
margin-top: 150px;
margin-left:1050px;
padding: 30px 0 20px 0px;
font-size: 16px;
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
text-align: left;
}
.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
width: 268px;
margin: 10px;
line-height: 20px;
font-size: 16px;
}
.form-div input[type="checkbox"] {
margin: 20px 0 20px 10px;
}
.form-div input[type="button"], .form-div input[type="submit"] {
margin: 10px 20px 0 0;
}
.form-div table {
margin: 0 auto;
text-align: right;
color: rgba(64, 64, 64, 1.00);
}
.form-div table img {
vertical-align: middle;
margin: 0 0 5px 0;
}
.footer {
color: rgba(64, 64, 64, 1.00);
font-size: 12px;
margin-top: 30px;
}
.form-div .buttons {
float: right;
}
input[type="text"], input[type="password"], input[type="email"] {
border-radius: 8px;
box-shadow: inset 0 2px 5px #eee;
padding: 10px;
border: 1px solid #D4D4D4;
color: #333333;
margin-top: 5px;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
border: 1px solid #50afeb;
outline: none;
}
input[type="button"], input[type="submit"] {
padding: 7px 15px;
background-color: #3c6db0;
text-align: center;
border-radius: 5px;
overflow: hidden;
min-width: 80px;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}
input[type="button"]:hover, input[type="submit"]:hover {
background-color: #5a88c8;
}
input[type="button"]:active, input[type="submit"]:active {
background-color: #5a88c8;
}
.err_msg{
color: red;
padding-right: 170px;
}
#password_err,#tel_err{
padding-right: 195px;
}
#reg_btn{
margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}
背景图片随便找两张即可。
前端这些简单的页面直接去前端网站扒一个就行了,或者就只写一个form放里面就行,也可以不写前端页面,写好后端代码后用psotman测试接口也可以。
==================================================================
后端代码:
maven配置文件pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>demologin</artifactId>
<version>1.0-SNAPSHOT</version>
<name>demologin</name>
<packaging>war</packaging>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.target>1.8</maven.compiler.target>
<maven.compiler.source>1.8</maven.compiler.source>
<junit.version>4.</junit.version>
</properties>
<dependencies>
<!-- 添加slf4j日志api -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>1.7.20</version>
</dependency>
<!-- 添加logback-classic依赖 -->
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>1.2.3</version>
</dependency>
<!-- 添加logback-core依赖 -->
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-core</artifactId>
<version>1.2.3</version>
</dependency>
<!--junit 单元测试-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.13</version>
<scope>test</scope>
</dependency>
<!--mybatis 依赖-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.5</version>
</dependency>
<!--mysql 驱动-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.46</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
</dependencies>
<build>
<plugins>
<!--Tomcat插件 -->
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<port>8080</port><!--访问端口号 -->
<!--项目访问路径
未配置访问路径: http://localhost:8080/demoweb/a.html
配置/后访问路径: http://localhost:80/a.html
如果配置成 /hello,访问路径会变成什么?
答案: http://localhost:80/hello/a.html
-->
<path>/demologin</path>
</configuration>
</plugin>
</plugins>
</build>
</project>
mybatis全局配置文件mybatis-config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!--
configuration:根标签
-->
<!--
typeAliases:起别名
-->
<typeAliases>
<package name="com.ldj.pojo"/>
</typeAliases>
<!--
environments:
配置数据库连接环境信息。可以配置多个environment,通过default属性切换不同的environment
比如现在我这里有两个环境,一个development,一个test,
<environments default="development">指定的是使用development这个环境
-->
<environments default="development">
<environment id="development">
<!--
<transactionManager type="JDBC"/>:指定使用JDBC事务管理
-->
<transactionManager type="JDBC"/>
<!--
<dataSource type="POOLED">:指定使用mybaitis自带的连接池POOLED管理数据源
-->
<dataSource type="POOLED">
<!--数据库连接信息-->
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql:///db1?
useSSL=false&useServerPrepStmts=true"/>
<property name="username" value="root"/>
<property name="password" value="1234"/>
</dataSource>
</environment>
</environments>
<!--指定映射配置文件的路径-->
<mappers>
<!-- <!–加载sql映射文件–>-->
<!-- <mapper resource="com/ldj/mapper/UserMapper.xml"/>-->
<!--使用包扫描方式加载mapper,写接口所在的包名!!!!!-->
<package name="com.ldj.mapper"/>
</mappers>
</configuration>
logback日志配置文件logback.xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<!--
CONSOLE :表示当前的日志信息是可以输出到控制台的。
-->
<appender name="Console" class="ch.qos.logback.core.ConsoleAppender">
<encoder>
<pattern>[%level] %blue(%d{HH:mm:ss.SSS}) %cyan([%thread]) %boldGreen(%logger{15}) - %msg %n</pattern>
</encoder>
</appender>
<logger name="com.ldj" level="DEBUG" additivity="false">
<appender-ref ref="Console"/>
</logger>
<!--
level:用来设置打印级别,大小写无关:TRACE, DEBUG, INFO, WARN, ERROR, ALL 和 OFF
, 默认debug
<root>可以包含零个或多个<appender-ref>元素,标识这个输出位置将会被本日志级别控制。
-->
<root level="DEBUG">
<appender-ref ref="Console"/>
</root>
</configuration>
实体类User
package com.ldj.pojo;
public class User {
@Override
public String toString() {
return "User{" +
"username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
private String username;
private String password;
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;
}
}
后端接口映射UserMapper.java
package com.ldj.mapper;
import com.ldj.pojo.User;
public interface UserMapper {
int insert(User user);
User selectOne(User user);
User selectOne2(String username);
}
映射配置文件UserMapper.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.ldj.mapper.UserMapper">
<resultMap id="BaseResultMap" type="com.ldj.pojo.User">
<!--@Table tb_user-->
<result column="username" jdbcType="VARCHAR" property="username"/>
<result column="password" jdbcType="VARCHAR" property="password"/>
</resultMap>
<sql id="Base_Column_List">
<!--@mbg.generated-->
username, `password`
</sql>
<insert id="insert" parameterType="com.ldj.pojo.User">
<!--@mbg.generated-->
insert into tb_user (username, `password`)
values (#{username,jdbcType=VARCHAR}, #{password,jdbcType=VARCHAR})
</insert>
<select id="selectOne" resultMap="BaseResultMap">
select *
from tb_user
where username = #{username,jdbcType=VARCHAR}
and password = #{password,jdbcType=VARCHAR};
</select>
<select id="selectOne2" resultMap="BaseResultMap">
select *
from tb_user
where username = #{username,jdbcType=VARCHAR};
</select>
</mapper>
测试类
import com.ldj.mapper.UserMapper;
import com.ldj.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import org.apache.ibatis.session.SqlSession;
import org.junit.Before;
import org.junit.Test;
import java.io.IOException;
import java.io.InputStream;
public class TestLogin {
UserMapper userMapper;
@Before
public void before() throws IOException {
//1. 加载mybatis的核心配置文件,获取 SqlSessionFactory
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);//返回一个字节输入流
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取SqlSession对象,用它来执行sql.并开启自动commit事务,不写true的话需要手动commit
SqlSession sqlSession = sqlSessionFactory.openSession(true);
//3. 执行sql
//使用mapper代理!!!!!
userMapper = sqlSession.getMapper(UserMapper.class);//根据反射生成DAO类
//========================================================
//配合spring之后以上代码都不需要自己写
}
@Test
public void selectByNameAndPsw() {
User user = new User();
user.setUsername("123");
user.setPassword("12356");
User login = userMapper.selectOne(user);
System.out.println(login);
}
@Test
public void selectByName() {
User user = userMapper.selectOne2("123");
System.out.println(user);
}
}
登录用LoginHttpServlet
package com.ldj.controller;
import com.ldj.mapper.UserMapper;
import com.ldj.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
@WebServlet("/login")
public class LoginHttpServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(username + password);
//1. 加载mybatis的核心配置文件,获取 SqlSessionFactory
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);//返回一个字节输入流
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取SqlSession对象,用它来执行sql.并开启自动commit事务,不写true的话需要手动commit
SqlSession sqlSession = sqlSessionFactory.openSession(true);
//3. 执行sql
//使用mapper代理!!!!!
UserMapper tbUserMapper = sqlSession.getMapper(UserMapper.class);//根据反射生成DAO类
//========================================================
//配合spring之后以上代码都不需要自己写
//表比较少,所以直接比对两个字段。最好是根据一个字段扫描一次查出整条记录
User user = new User();
user.setUsername(username);
user.setPassword(password);
User userGet = tbUserMapper.selectOne(user);
//往前端响应数据(使用字符流)
resp.setContentType("text/html;charset=utf-8");//告诉浏览器服务器给浏览器的是text或者html
PrintWriter writer = resp.getWriter();
if (userGet != null) {
System.out.println("允许登录");
writer.write("登录成功");
} else {
System.out.println("不允许登录");
writer.write("登录失败");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
注册用RegisterServlet
package com.ldj.controller;
import com.ldj.mapper.UserMapper;
import com.ldj.pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("从请求中获取参数的通用方法三====");
String username = request.getParameter("username");
String password = request.getParameter("password");
// System.out.println(username);
// System.out.println(password);
//1. 加载mybatis的核心配置文件,获取 SqlSessionFactory
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);//返回一个字节输入流
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取SqlSession对象,用它来执行sql.并开启自动commit事务,不写true的话需要手动commit
SqlSession sqlSession = sqlSessionFactory.openSession(true);
//3. 执行sql
//使用mapper代理!!!!!
UserMapper tbUserMapper = sqlSession.getMapper(UserMapper.class);//根据反射生成DAO类
//========================================================
//配合spring之后以上代码都不需要自己写
User user = new User();
user.setUsername(username);
user.setPassword(password);
User user1 = tbUserMapper.selectOne(user);
if (user1 != null) {
//往前端响应数据(使用字符流)
response.setContentType("text/html;charset=utf-8");//告诉浏览器服务器给浏览器的是text或者html
PrintWriter writer = response.getWriter();
writer.write("用户已经存在");
} else {
int insert = tbUserMapper.insert(user);
if (insert == 1) {
//往前端响应数据(使用字符流)
response.setContentType("text/html;charset=utf-8");//告诉浏览器服务器给浏览器的是text或者html
PrintWriter writer = response.getWriter();
writer.write("注册成功");
}
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
===============================================================
启动项目,测试访问之前设计的URL