前言:
最近在学习Java的编程,前辈让我写一个包含数据库和前端的用户登录功能,通过看博客等我先是写了一个最基础的servlet+jsp,再到后来开始用maven进行编程,最终的完成版是一个 Spring+Mysql+Mybatis 的用户登录注册功能。最近被这件事搞得简直脑壳疼,网上的资料总是跟自己想要的有一些差距,或者说由于年代久远导致了版本的很多问题,所以我决定自己写一篇博客,如果说这篇博客能对其他人起到一点帮助,也是极好的。想要直接看代码的同志们直接看正片部分就好,前面我会先放一些资料。
一.环境搭建:
我使用的编译器是idea,这个可以通过学生邮箱进行免费申请,功能也挺好用,只不过由于之前使用的是eclipse,所以我花了一些时间来熟悉。
jkd使用的是1.8版本,Tomcat是9.0。网上的环境搭建的教程比较全,我就不多说了。maven搭建的话这里上一些自己觉得比较有用的博客连接吧。https://blog.csdn.net/qq_32588349/article/details/51461182 这个连接是maven的搭建,但是还需要注意的是,maven需要使用阿里云的镜像才能下载的快,建议去网上寻找相关资料。
二.学习资料:
学习过程中我的顺序是从servlet到MySQL再到maven然后是spring框架和最后的mybatis。这里简单的放一些连接吧,是我学习的一些网站。
servlet: http://www.runoob.com/servlet/servlet-tutorial.html
Mysql:http://www.runoob.com/mysql/mysql-tutorial.html 注意下载一个可视化的软件,我使用的是navicat破解版
Mybatis:http://www.yihaomen.com/article/java/302.htm
编写实例的框架,顺序(重点):https://www.cnblogs.com/xdp-gacl/p/3902537.html
至此准备工作就基本上做完了,开始我们的正片部分。
正片:
先把整个项目的结构打开
Pom.xml:
在写代码之前,先把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 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.youshu.wuhao</groupId> <artifactId>Test_829</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>Test_829 Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> <spring.version>5.0.8.RELEASE</spring.version> </properties> <dependencies> <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.11</version> </dependency> <!-- mybatis 包 --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.2.8</version> </dependency> <!--mybatis spring 插件 --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.2.2</version> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>com.mchange</groupId> <artifactId>c3p0</artifactId> <version>0.9.5-pre8</version> </dependency> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.8.4</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-oxm</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>${spring.version}</version> </dependency> <!-- springframe end --> <!-- JUnit单元测试工具 --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> </dependency> <!-- aspectJ AOP 织入器 --> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.8.9</version> </dependency> <!-- jstl --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.0.8.RELEASE</version> </dependency> </dependencies> <build> <resources> <resource> <directory>src/main/java</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> <filtering>false</filtering> </resource> <resource> <directory>src/main/resources</directory> <includes> <include>**/*.properties</include> <include>**/*.xml</include> </includes> <filtering>false</filtering> </resource> </resources> <finalName>Test_829</finalName> <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) --> <plugins> <plugin> <artifactId>maven-clean-plugin</artifactId> <version>3.0.0</version> </plugin> <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging --> <plugin> <artifactId>maven-resources-plugin</artifactId> <version>3.0.2</version> </plugin> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>3.7.0</version> </plugin> <plugin> <artifactId>maven-surefire-plugin</artifactId> <version>2.20.1</version> </plugin> <plugin> <artifactId>maven-war-plugin</artifactId> <version>3.2.0</version> </plugin> <plugin> <artifactId>maven-install-plugin</artifactId> <version>2.5.2</version> </plugin> <plugin> <artifactId>maven-deploy-plugin</artifactId> <version>2.8.2</version> </plugin> </plugins> </pluginManagement> </build> </project>
一.实体层(domain):
首先明确自己的目标是什么,需要让一个用户(User)能够登录或者注册,他的属性有用户名,密码,真名,电话号,性别等。所以第一步是编写domain层,User类就是你所需要实现的用户的各个属性。
package com.wuhao.domain; public class User { private String realName; private String sex; private String phoneNum; private String password; private int age; private String userName; public int getAge(){ return this.age; } public String getPassword() { return password; } public String getPhoneNum() { return phoneNum; } public String getRealName() { return realName; } public String getSex() { return sex; } public String getUserName() { return userName; } public void setAge(int age) { this.age = age; } public void setPassword(String password) { this.password = password; } public void setPhoneNum(String phoneNum) { this.phoneNum = phoneNum; } public void setRealName(String realName) { this.realName = realName; } public void setSex(String sex) { this.sex = sex; } public void setUserName(String userName) { this.userName = userName; } }
二.数据访问层(Dao):
这个层次下主要是提供了Mysql中查询和插入等方法。首先写一个接口UserDao。记得把注释写上,这样会方便自己查看各个方法的实际功能。
package com.wuhao.dao; import com.wuhao.domain.User; import java.util.List; public interface UserDao { /** * select all users whose realName is same with the realName provided * @param realName * @return */ public List selectByRealName(String realName); /** * select user by userName provided * @param userName * @return */ public User selectByUserName(String userName); /** * select user by the phoneNum provided * @param phoneNum * @return */ public User selectByPhoneNum(String phoneNum); /** * * @param age * @return how many users whose age is parameter "age"; */ public int ageUsersNum(int age); /** * * @param ageLow * @param ageHigh * @return how many users whose age is between "ageLow" and "ageHigh" */ public int ageUsersNums(int ageLow, int ageHigh); /** * * @param sex * @return how many users whose sex is the same with parameter "sex"; */ public int sexUsersNum(String sex); /** * insert a new user who was registered successfully * @param user */ public void insertUser(User user); }
在写完接口之后,你需要实现这个接口的方法。也就是Impl实现类,你可以使用一个class UserDaoImpl,也可以使用mybatis中的接口式编程,这里我选择了第二种。
三.Mapper层:
在com.wuhao之后再建一个mapper包,这个包下会放置mapper文件,实现接口功能,命名没有限制,但最好有意义,比如说接口名加上Mapper,文件类型为xml。这里的namespace指向了UserDao接口,这里的<select>标签中的id必须与接口中的方法名对应。而 resultType 中的 “User” 实际是不规范的,它应该具体到哪个类,但这里其实是可以的,因为我会在 config.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"> <!--namespace代表这个*mapper.xml文件指向哪个接口--> <mapper namespace="com.wuhao.dao.UserDao"> <!--select表示查询,它的id名称必须与DAO层接口的方法名相同,否则无法绑定--> <!-- 通过用户名来进行唯一查找 --> <select id="selectByUserName" parameterType= "string" resultType="User"> select * from users where userName = #{userName} </select> <select id="selectByRealName" parameterType="string" resultType="User"> select * from users where realName = #{realName} </select> <select id = "selectByPhoneNum" parameterType="string" resultType="User"> select * from users where phoneNum = #{phoneNum} </select> <insert id="insertUser" parameterType="User" > insert into users (sex, phoneNum, password, age, userName, realName) values (#{sex}, #{phoneNum}, #{password}, #{age}, #{userName}, #{realName}) </insert> </mapper>
四.服务层:
在com.wuhao 之后再建一个service包,这个包下的文件会实现具体需要的功能,比如说注册和登录。创建接口UserService。
package com.wuhao.service; import com.wuhao.domain.User; public interface UserService { /** * 注册用户 * @param user * @return page */ public String registerUser(User user); /** * 用户登录 * @param user * @return page */ public String loginUser(User user); }
创建实现类UserServiceImpl,这个类和UserDaoImpl不同,我并没有使用mapper.xml文件来代替,我觉得这些功能还是用Java语句好写一些。
package com.wuhao.service; import com.wuhao.domain.User; public interface UserService { /** * 注册用户 * @param user * @return page */ public String registerUser(User user); /** * 用户登录 * @param user * @return page */ public String loginUser(User user); }
这个类中的@controller和其他注解需要读者自己了解哦。@RequestMapping 和方法的返回值将在之后的jsp文件中解释。
五:Mysql创建表
至此Java部分基本上实现了,那么接下来就需要在MySQL中创建一张表啦。代码如下:
use myusers; drop table if EXISTS users; create table users( userName varchar(32) PRIMARY key, realName varchar(32), sex varchar(32), phoneNum varchar(32), password varchar(32), age int(4) )ENGINE=InnoDB DEFAULT CHARSET=utf8;
效果图:
六:web.xml 配置:
光有上面的代码肯定是不够的,从哪连接数据库,从哪设置登录界面什么的都没有定。这里我们先来配置最主要的web.xml文件!
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <!-- 从类路径下载spring配置文件 --> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <filter> <filter-name>characterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <context-param> <param-name>contextConfigLocation</param-name> <param-value> classpath:applicationContext.xml </param-value> </context-param> <!-- 负责启动spring容器监听器,将引用上面的上下文参数获取spring配置文件地址 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- springMVC主控制servlet --> <servlet> <servlet-name>wuhao</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:wuhao-servlet.xml</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <!-- springMVC处理的url --> <servlet-mapping> <servlet-name>wuhao</servlet-name> <url-pattern>*.html</url-pattern> </servlet-mapping> </web-app>
web.xml 文件内容太多了,我来一点一点的讲吧,<welcome-file>是指tomcat启动之后默认的启动界面,这之中的index.jsp是指webapp下的初始的index.jsp。<filter>标签中的一长串代码是为了支持中文不乱码而添加的,虽然我在每个文件中都设置了编码格式为UTF-8,但还是会有乱码,百度之后的解决方法就是添加这个。<context-param>指向了resources目录下的applicationContext.xml文件,至于为什么 classpath 指向那里,需要自己了解。其他的照搬就好了~
解决中文乱码问题的博客:https://blog.csdn.net/kalision/article/details/46441081/
七:applicationContext.xml配置:
刚才的web.xml提到了applicationContext.xml文件,这里就先把它给写出来,代码的注释比较全。
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <!--引入jdbc配置 --> <context:property-placeholder location="classpath:jdbc.properties"/> <!-- 扫描文件(自动将service层注入)--> <context:component-scan base-package="com.wuhao.service"/> <!--配置数据源--> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"> <property name="driverClass" value="${jdbc_driverClassName}"/> <property name="jdbcUrl" value="${jdbc_url}"/> <property name="user" value="${jdbc_username}"/> <property name="password" value="${jdbc_password}"/> <!--连接池中保存的最大连接数目--> <property name="maxPoolSize" value="20"/> <!--连接池中保存的最少连接数目--> <property name="minPoolSize" value="2"/> <!-- 初始化连接大小 --> <property name="initialPoolSize" value="2"/> <!-- 获取连接最大等待时间 --> <property name="maxConnectionAge" value="6000"/> <!-- 连接池最大空闲 --> <property name="maxIdleTime" value="60"/> </bean> <!--配置sqlSessionFactory 并将数据源注入--> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!--注入数据源--> <property name="dataSource" ref="dataSource"/> <!--指定要使用到到mybatis配置文件--> <property name="configLocation" value="classpath:config.xml"/> <!--用于配置mapper映射xml *Mapper.xml 是指以Mapper结尾的xml文件 --> <property name="mapperLocations" value="classpath*:com/wuhao/mapper/*Mapper.xml"/> </bean> <!-- 创建数据映射器--> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.wuhao.dao"/> </bean> <!-- 对数据源进行事务管理 --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"/> </bean> </beans>
这里提到了jdbc配置,那么jdbc是什么呢?Java DataBase Connectivity,Java的数据库连接,顾名思义,这个 jdbc.properties 应该包含了我们需要的数据库配置,代码如下。
jdbc_driverClassName=com.mysql.cj.jdbc.Driver jdbc_url=jdbc:mysql://localhost:3306/myusers?useUnicode = true&characterEncoding = UTF-8&useSSL = false&serverTimezone = GMT jdbc_username=root jdbc_password=root
里面的四个参数和 applicationContext.xml 的 database 中的四个参数对应,值得注意的是,由于我使用的 mysql-connector.jar 的版本比其他博客中的要高一些(不高有的地方会报错,我也很无奈啊)所以 jdbc.properties 的配置会有不同,解释原因在 https://blog.csdn.net/weixin_40916641/article/details/80546040
还记得我们之前在 UserDaoMapper.xml 提到的为 “User” 配置别名的事情吗?在 application.xml 中的 <property name="configLocation" value="classpath:config.xml"/> 提到了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> <!--为com.wuhao.domain.User设置别名 User 方便调用--> <typeAliases> <typeAlias alias="User" type="com.wuhao.domain.User"/> </typeAliases> </configuration>
八.wuhao-servlet.xml 配置:
这个文件也是在web.xml中提到过,它的代码如下。
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <!-- 扫描包,应用注解 --> <context:component-scan base-package="com.wuhao.service" /> <!-- 配置视图解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:viewClass="org.springframework.web.servlet.view.JstlView" p:prefix="/jsp/" p:suffix=".jsp" /> </beans>
<context:component-scan base-package="com.wuhao.service" />代表了实现功能的位置。
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:viewClass="org.springframework.web.servlet.view.JstlView" p:prefix="/jsp/"
p:suffix=".jsp" />
中的 prefix 代表前置,suffix 代表后置,综合起来它们代表了webapp下的jsp文件夹的jsp文件。这里与我借鉴的博客所不同的是,我没有将jsp文件夹放在WEB-INF下,因为这个文件夹的内容是受保护的,无法直接查看。
九.各个jsp文件:
最后我们要开始配置我们的jsp文件了,首先配置作为 welcome-file 的 index.jsp。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>登录</title> </head> <body> <form action="/loginCheck.html" method="post"> 用户名: <input type="text" name="userName"> <br /> 密码: <input type="password" name="password"> <br /> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> <form action="jsp/register.jsp" method = "post"> <input type = "submit" value = "register"> </form> </body> </html>
head 的 title 表示页面上面的框的内容,form 表单则是重点。
首先可以看到在 body 中有两个 form 表单,它们的 action 是不同的,一个指向 "/loginCheck.html", 这个可以看见在 com.wuhao.service 下的 UserServiceImpl 中的 loginUser 方法的 @requestMapping 中有同样的内容,很明显,当第一个form表单提交之后,会由 loginUser 方法来处理表单内容。同样的在第二个表单中,会跳转到 jsp 文件夹下的 register.jsp 页面。其内容为:
<%-- Created by IntelliJ IDEA. User: youshu Date: 2018/8/30 Time: 10:04 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <form action="/register.html" method="post"> <table> 用户名: <input type="text" name="userName"> <br /> 密码: <input type="password" name="password"> <br /> 真实姓名:<input type = "test" name = "realName"> <br/> 年龄:<input type = "text" name = "age"><br/> 性别: <input type="radio" name="sex" value="男" checked />男 <input type="radio" name="sex" value="女" />女<br/> <input type="submit" value="提交"> <input type="reset" value="重置"> </table> </form> </body> </html>
最后回到UserServiceImpl 中的两个方法,我们会发现它们实际上只会返回两串字符串,“success” 和 “error”,这两串字符串代表什么意思呢,代表了跳转的页面,结合刚才 wuhao-servlet.xml 中的 prefix 和 suffix,它们的意义就是跳转到 webapp 下的 jsp 文件夹中的 success.jsp 和 error.jsp 文件。附上两个页面的代码。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
success!!!
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
error!
<form action="index.jsp">
<input type="submit" value="登录"/>
<!--<a href="javascript:window.location.href='/WEB-INF/jsp/login.jsp'"> <button type="button">back to login</button></a>
-->
</form>
</body>
</html>
十.实际功能:
至此,基本功能已经实现的差不多了,让我们实际操作一番。
一开始由于我们的库中并没有用户,所以怎么登录都是 error 界面。
于是我们选择register进行注册。
查看数据库中的内容
晕,我们忘了在register页面中添加phoneNum这个参数,但是用户还是成功添加了,这是因为MySQL中没有设定参数 not null,所以默认为 null 也没有关系。
当我们再次尝试用 wuhao 用户名注册就会失败了,这就是UserServiceImpl中的功能限定了,一个用户名只能用注册一个用户。至此整个功能基本上实现了,在后续的学习中我还要学习 JavaScript 来优化界面,实现密码检查,密码明文查看等功能,希望我的博客对大家能有帮助。