最近在學習Java的編程,前輩讓我寫一個包含數據庫和前端的用戶登陸功能,經過看博客等我先是寫了一個最基礎的servlet+jsp,再到後來開始用maven進行編程,最終的完成版是一個 Spring+Mysql+Mybatis 的用戶登陸註冊功能。最近被這件事搞得簡直腦袋疼,網上的資料老是跟本身想要的有一些差距,或者說因爲年代久遠致使了版本的不少問題,因此我決定本身寫一篇博客,若是說這篇博客能對其餘人起到一點幫助,也是極好的。想要直接看代碼的同志們直接看正片部分就好,前面我會先放一些資料。javascript
我使用的編譯器是idea,這個能夠經過學生郵箱進行免費申請,功能也挺好用,只不過因爲以前使用的是eclipse,因此我花了一些時間來熟悉。html
jkd使用的是1.8版本,Tomcat是9.0。網上的環境搭建的教程比較全,我就很少說了。maven搭建的話這裏上一些本身以爲比較有用的博客鏈接吧。https://blog.csdn.net/qq_32588349/article/details/51461182 這個鏈接是maven的搭建,可是還須要注意的是,maven須要使用阿里雲的鏡像才能下載的快,建議去網上尋找相關資料。前端
學習過程當中個人順序是從servlet到MySQL再到maven而後是spring框架和最後的mybatis。這裏簡單的放一些鏈接吧,是我學習的一些網站。java
servlet: http://www.runoob.com/servlet/servlet-tutorial.htmlmysql
Mysql:http://www.runoob.com/mysql/mysql-tutorial.html 注意下載一個可視化的軟件,我使用的是navicat破解版web
Mybatis:http://www.yihaomen.com/article/java/302.htmspring
編寫實例的框架,順序(重點):https://www.cnblogs.com/xdp-gacl/p/3902537.htmlsql
至此準備工做就基本上作完了,開始咱們的正片部分。數據庫
先把整個項目的結構打開apache
在寫代碼以前,先把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>
首先明確本身的目標是什麼,須要讓一個用戶(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; } }
這個層次下主要是提供了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中的接口式編程,這裏我選擇了第二種。
在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文件中解釋。
至此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文件!
<?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/
剛纔的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>
這個文件也是在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文件了,首先配置做爲 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 來優化界面,實現密碼檢查,密碼明文查看等功能,但願個人博客對你們能有幫助。