跌宕不羁网

Mybatis+Servlet+Mysql 整合的一个小项目:对初学者非常友好,有助于初学者很快的上手Java Web

Mybatis+Servlet+Mysql 整合的一个小项目:对初学者非常友好,有助于初学者很快的上手Java Web

文章目录

  • 前言
    • 为何要写?
    • 目录结构
  • 1 依赖配置
    • 1.1 创建一个web项目
    • 1.2 依赖需求分析
    • 1.3 pom.xml
  • 2 配置Mybatis
    • 2.1 mybatis-config.xml
    • 2.2 UserMapper.xml
    • 2.3 UserMapper.interface
  • 3 配置Tomcat
  • 4 Servlet类
    • 4.1 loginServlet01
    • 4.2 registerRequest01
  • 5 静态页面代码
    • 5.1 Html
      • 5.1.1 login
      • 5.1.2 transmitPage
      • 5.1.3 index
      • 5.1.4 errorPage
    • 5.2 CSS
      • 5.2.1 index
      • 5.2.2 style
    • 5.3 JS
      • 5.3.1 index
      • 5.3.2 jquery.min.js
      • 5.3.3 tranmitPage
  • 6 效果
    • 6.1 登录成功
    • 6.2 注册成功
    • 6.3 登录失败
  • 7 静态页面来源

前言

为何要写?

首先声明这是项目学者学一个非常简单的项目,只包含注册和登录。对初

有人说了,非常这么简单的友好有助于初项目,我瞧不上。上手确实!项目学者学对于一些高手来说,对初这点东西不过是非常毛毛雨。

但是友好有助于初对于一个初学者来说,有一个简单易上手的上手项目可以吧Mybatis+Servlet+Mysql 整合起来,对于自己的项目学者学学习不可不算是一个良好的契机。

学以致用,对初本文章旨在检验前面系列文章是非常否写的合格,结果是友好有助于初:

理论性太强,而实践太散,上手所以借着这篇文章,把实践的方便加强

目录结构

在这里插入图片描述

在这里插入图片描述

1 依赖配置

1.1 创建一个web项目

不会的可以看这篇文章 http://t.csdn.cn/UahZN

1.2 依赖需求分析

mybatis+Servlet很显然需要用到二者的依赖,mybatis需要连接数据库,所以需要数据库的依赖,数据库则需要实体类,为了简便开发引入Lombok依赖。想要使用单元测试,则还需要引入junit依赖。

所以总共需求如下依赖

  • mybatis

  • servlet

  • mysql

  • lombok

  • junit

1.3 pom.xml

4.0.0com.youJavaWeb-Demo-06  1.0-SNAPSHOTwarJavaWeb-Demo-06 Maven Webapphttp://www.example.comUTF-81.71.7junitjunit      4.11testorg.mybatismybatis      3.5.7org.projectlomboklombok      1.18.24javax.servletjavax.servlet-api      3.1.0providedmysqlmysql-connector-java      8.0.30JavaWeb-Demo-06maven-clean-plugin          3.1.0maven-resources-plugin          3.0.2maven-compiler-plugin          3.8.0maven-surefire-plugin          2.22.1maven-war-plugin          3.2.2maven-install-plugin          2.5.2maven-deploy-plugin          2.8.2

2 配置Mybatis

参考自自己的文章《Mybatis的快速入门》 http://t.csdn.cn/3SXlb《Mybatis的代理开发》http://t.csdn.cn/Bt8Xi

2.1 mybatis-config.xml

mybatis-config配置,主要包括两个点:

  • **数据库配置:**数据库名称、JDBC、数据库用户名和密码
  • Mapper:让Mybatis找到Mapper.xml

2.2 UserMapper.xml

这个知识点是漏网之鱼,没有意识到即使是使用注解配置sql语句,也需要接口绑定。

2.3 UserMapper.interface

package com.you.Mapper;import com.you.Dept.User;import org.apache.ibatis.annotations.Insert;import org.apache.ibatis.annotations.Param;import org.apache.ibatis.annotations.Select;import java.util.List;public interface UserMapper {     @Select("select * from user where user_name = #{ user_name} and user_pwd = #{ user_pwd}")    public User selectUserByInfo(@Param("user_name") String user_name,@Param("user_pwd") String user_pwd);    @Select("select * from user")    public ListqueryAllUsers();    @Insert("insert into user values(null,#{ user_name},#{ user_pwd},#{ user_emil})")    public boolean registerUser(@Param("user_name") String user_name,@Param("user_pwd") String user_pwd,@Param("user_emil") String user_emil);}

3 配置Tomcat

参考本人的文章 《idea集成Tomcat》 http://t.csdn.cn/6Uma5

4 Servlet类

4.1 loginServlet01

处理登录的功能,需要注意的点:

  1. JavaWeb_Demo_06_war是自己的虚拟目录,每个人配置的都不一样 Tomcat文章中提到了
  2. Mybatis的缺点:和数据库交互时都需要重新连接数据库
  3. request获取数据的时候,要设置编码为UTF-8,不然会乱码
package com.you.request;import com.you.Dept.User;import com.you.Mapper.UserMapper;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;import java.util.Timer;import java.util.TimerTask;@WebServlet(urlPatterns = "/login")public class loginRequset01 extends HttpServlet {     @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         /* 1、获取携带的用户名和密码 */        System.out.println("进来!!!");        req.setCharacterEncoding("UTF-8");        String username = req.getParameter("username");        String password = req.getParameter("password");        System.out.println("用户名:"+username);        System.out.println("密码:"+password);        String resource = "mybatis-config.xml";        InputStream inputStream = null;        inputStream = Resources.getResourceAsStream(resource);        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);        SqlSession sqlSession = sqlSessionFactory.openSession();        UserMapper mapper = sqlSession.getMapper(UserMapper.class);        User user1 = mapper.selectUserByInfo(username,password);        resp.setContentType("text/html;charset=UTF-8");        PrintWriter writer = resp.getWriter();        if(user1!=null)        {             resp.sendRedirect("/JavaWeb_Demo_06_war/index.html");        }else{             resp.sendRedirect("/JavaWeb_Demo_06_war/errorPage.html");        }    }    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         this.doGet(req,resp);    }}

4.2 registerRequest01

处理注册的功能,需要注意的点:

  1. 修改数据库(update、insert)时,需要提交(commit)才能生效
package com.you.request;import com.you.Dept.User;import com.you.Mapper.UserMapper;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("/registerRequest01")public class registerRequest01 extends HttpServlet {     @Override    protected void doGet(final HttpServletRequest req, final HttpServletResponse resp) throws ServletException, IOException {         /* 1、获取携带的用户名、密码、邮箱 */        req.setCharacterEncoding("UTF-8");        String username = req.getParameter("username");        String password = req.getParameter("password");        String useremail = req.getParameter("useremail");        /* 2、连接数据库 */        String resource = "mybatis-config.xml";        InputStream inputStream = null;        inputStream = Resources.getResourceAsStream(resource);        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);        SqlSession sqlSession = sqlSessionFactory.openSession();        /* 3、执行SQL语句 */        UserMapper mapper = sqlSession.getMapper(UserMapper.class);        boolean user = mapper.registerUser(username, password, useremail);        resp.setContentType("text/html;charset=UTF-8");        PrintWriter writer = resp.getWriter();        if(user!=false)        {             sqlSession.commit();            resp.sendRedirect("/JavaWeb_Demo_06_war/transmitPage.html");        }else{         }    }    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         this.doGet(req,resp);    }}

5 静态页面代码

5.1 Html

5.1.1 login

游坦之

5.1.2 transmitPage

Title
注册成功... 3s后自动跳转至登录页面

5.1.3 index

Document
  • HOME
  • ABOUT
  • PROTFOLIO
  • SERVICE
  • NEWS
  • CONTACT

    服务范围

    OUR SERVICES

    • 1.web design

      企业品牌网站设计/手机网站制作
      动画网站创意设计

    • 1.web design

      企业品牌网站设计/手机网站制作
      动画网站创意设计

    • 1.web design

      企业品牌网站设计/手机网站制作
      动画网站创意设计

    • 1.web design

      企业品牌网站设计/手机网站制作
      动画网站创意设计

    { 客户案例}

    With the best professional technology, to design the best innovative web site

    VIEW MORE

    最新资讯

    TEH LATEST NEWS

    • 09Jan

      网站排名进入前三的技巧说明

      很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页,更不用说进首页前三了。那么网站优...

    • 09Jan

      网站排名进入前三的技巧说明

      很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页,更不用说进首页前三了。那么网站优...

    • 09Jan

      网站排名进入前三的技巧说明

      很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页,更不用说进首页前三了。那么网站优...

    • 09Jan

      网站排名进入前三的技巧说明

      很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页,更不用说进首页前三了。那么网站优...

    Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved

    • Home
    • About
    • Portfolio
    • Contact

    5.1.4 errorPage

    Title用户名或密码不对    3秒后跳转到登录页面

    5.2 CSS

    5.2.1 index

    * {   padding: 0;  margin: 0;  box-sizing: border-box;}li {   list-style: none;}a {   text-decoration: none;  color: black;}body {   width: 100%;  font-family: ArialMT;}.contanier {   width: 1082px;  margin: 0 auto;}.container-fluid {   width: 100%;}.hd {   display: flex;  justify-content: space-between;}.hd img {   width: 162px;  height: 44px;  margin-top: 19px;  margin-bottom: 18px;}.hd ul {   display: flex;  margin-top: 36px;  width: 614px;  height: 10px;  margin-bottom: 35px;}.hd ul li {   font-size: 14px;  font-family: Arial;  font-weight: 400;  color: #646464;  margin-right: 58px;}.hd ul li:nth-child(6) {   margin-right: 0;}.swiper-contianer {   position: relative;  width: 100%;}.swiper-contianer ul {   height: 469px;}.swiper-contianer ul li {   height: 100%;}.swiper-contianer ul li img {   width: 100%;  height: 100%;}.swiper-contianer ol {   display: flex;  justify-content: center;  position: absolute;  bottom: 19px;  left: 50%;  transform: translateX(-50%);}.swiper-contianer ol li {   width: 12px;  height: 12px;  border-radius: 50%;  border: 2px solid #fff;  margin-right: 11px;}.swiper-contianer ol li:last-child {   margin-right: 0px;}.services {   text-align: center;  height: 407px;  padding-top: 61px;}.services h2 {   font-size: 20px;  font-family: Adobe Heiti Std;  font-weight: normal;  color: #363636;  line-height: 20px;  background: url(image/线条修饰.png) no-repeat 50%;}.services .text {   margin-top: 10px;  margin-bottom: 34px;  font-size: 14px;  font-family: Arial;  font-weight: 400;  color: #9F9F9F;}.services .serList ul {   display: flex;  justify-content: center;  width: 100%;  padding: 0 46px;}.services .serList ul li {   width: 202px;  margin-right: 60px;}.services .serList ul li img {   width: 102px;  height: 102px;}.services .serList ul li p {   font-size: 14px;  font-family: Microsoft YaHei;  font-weight: 400;  color: #6D6D6D;  line-height: 22px;}.services .serList ul li p:nth-of-type(1) {   margin-top: 34px;  margin-bottom: 22px;  font-size: 18px;  font-family: Arial;  font-weight: bold;  color: #434343;}.services .serList ul li:nth-of-type(4) {   margin-right: 0;}.container-fluid {   background-color: #f8f8f8;  overflow: hidden;}.container-fluid .customer {   height: 460px;  text-align: center;  padding: 0 12px;}.container-fluid .customer h2 {   margin-top: 55px;  font-size: 20px;  font-family: Adobe Heiti Std;  font-weight: normal;  color: #66C5B4;  line-height: 20px;  background: url(image/线条修饰.png) no-repeat 50% 50%;}.container-fluid .customer p {   font-size: 14px;  font-family: Arial;  font-weight: 400;  color: #9F9F9F;  margin-top: 12px;  margin-bottom: 38px;}.container-fluid .customer ul {   display: flex;  margin-bottom: 36px;}.container-fluid .customer ul li {   margin-right: 19px;}.container-fluid .customer ul li:last-child(3) {   margin-right: 0;}.container-fluid .customer .btn {   margin: 0 auto;  width: 176px;  height: 37px;  text-align: center;  background: #66C5B4;  line-height: 37px;  font-size: 14px;  font-family: Arial;  font-weight: 400;  color: #FFFFFF;  border-radius: 18px;}.new {   text-align: center;  margin-bottom: 89px;}.new h2 {   margin-top: 68px;  font-size: 20px;  font-family: Adobe Heiti Std;  font-weight: normal;  color: #363636;  line-height: 20px;  background: url(image/线条修饰.png) no-repeat 50%;}.new .text {   margin-top: 11px;  font-size: 14px;  font-family: Arial;  font-weight: 400;  color: #9F9F9F;  margin-bottom: 58px;}.new .newList {   display: flex;}.new .newList img {   width: 234px;  height: 196px;}.new .newList ul {   display: flex;  flex-wrap: wrap;}.new .newList ul li {   display: flex;}.new .newList ul li .l {   width: 71px;  height: 70px;}.new .newList ul li .l span {   display: block;}.new .newList ul li .l span:first-child {   font-size: 39px;  font-family: Arial;  font-weight: bold;  color: #66C5B4;}.new .newList ul li .l span:last-child {   font-size: 20px;  font-family: Arial;  font-weight: 400;  color: #999999;}.new .newList ul li .r {   width: 310px;  margin-left: 20px;}.new .newList ul li .r p {   text-align: left;}.new .newList ul li .r p:first-child {   font-size: 14px;  font-family: Microsoft YaHei;  font-weight: 400;  color: #3F3F3F;}.new .newList ul li .r p:last-child {   margin-top: 21px;  font-size: 12px;  font-family: NSimSun;  font-weight: 400;  color: #A4A4A4;}.new .newList ul li:nth-of-type(1) {   margin-bottom: 48px;}.new .newList ul li:nth-of-type(2) {   margin-bottom: 48px;}.ft {   width: 100%;  height: 52px;  line-height: 52px;  background-color: #66C5B4;}.ft .contanier {   display: flex;  justify-content: space-between;}.ft .contanier p {   font-size: 12px;  font-family: Arial;  font-weight: 400;  color: #FFFFFF;}.ft .contanier ul {   display: flex;}.ft .contanier ul li {   font-size: 12px;  font-family: Arial;  font-weight: 400;  color: #FFFFFF;}.ft .contanier ul li:nth-of-type(1)::after {   content: '|';  margin: 0 15px;}.ft .contanier ul li:nth-of-type(2)::after {   content: '|';  margin: 0 15px;}.ft .contanier ul li:nth-of-type(3)::after {   content: '|';  margin: 0 15px;}

    5.2.2 style

    .login-page {   width: 360px;  padding: 8% 0 0;  margin: auto;}.form {   position: relative;  z-index: 1;  background: #FFFFFF;  max-width: 360px;  margin: 0 auto 100px;  padding: 45px;  text-align: center;  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);}.form input {   font-family: "Roboto", sans-serif;  outline: 0;  background: #f2f2f2;  width: 100%;  border: 0;  margin: 0 0 15px;  padding: 15px;  box-sizing: border-box;  font-size: 14px;}.form button {   font-family: "Roboto", sans-serif;  text-transform: uppercase;  outline: 0;  background: #4CAF50;  width: 100%;  border: 0;  padding: 15px;  color: #FFFFFF;  font-size: 14px;  -webkit-transition: all 0.3 ease;  transition: all 0.3 ease;  cursor: pointer;}.form button:hover,.form button:active,.form button:focus {   background: #43A047;}.form .message {   margin: 15px 0 0;  color: #b3b3b3;  font-size: 12px;}.form .message a {   color: #4CAF50;  text-decoration: none;}.form .register-form {   display: none;}.container {   position: relative;  z-index: 1;  max-width: 300px;  margin: 0 auto;}.container:before, .container:after {   content: "";  display: block;  clear: both;}.container .info {   margin: 50px auto;  text-align: center;}.container .info h1 {   margin: 0 0 15px;  padding: 0;  font-size: 36px;  font-weight: 300;  color: #1a1a1a;}.container .info span {   color: #4d4d4d;  font-size: 12px;}.container .info span a {   color: #000000;  text-decoration: none;}.container .info span .fa {   color: #EF3B3A;}body {   background: #76b852; /* fallback for old browsers */  background: -webkit-linear-gradient(right, #76b852, #8DC26F);  background: -moz-linear-gradient(right, #76b852, #8DC26F);  background: -o-linear-gradient(right, #76b852, #8DC26F);  background: linear-gradient(to left, #76b852, #8DC26F);  font-family: "Roboto", sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;      }

    5.3 JS

    5.3.1 index

    $('.message a').click(function(){     $('form').animate({ height: "toggle", opacity: "toggle"}, "slow");});

    5.3.2 jquery.min.js

    太多了,放不上。请去7去找

    5.3.3 tranmitPage

    onload=function(){     setInterval(go, 1000);};var x=3; //利用了全局变量来执行function go(){     x--;    if(x>0){         document.getElementById("time").innerHTML=x;  //每次设置的x的值都不一样了。    }else{         location.href='/JavaWeb_Demo_06_war/login.html';  // 设置你的注册页面    }}

    6 效果

    6.1 登录成功

    在这里插入图片描述

    6.2 注册成功

    在这里插入图片描述

    6.3 登录失败

    在这里插入图片描述

    7 静态页面来源

    1、 杨鑫 / login-register-template 扁平简洁的登录页面
    2、顾大壮 / 博文尚美静态首页

    未经允许不得转载:跌宕不羁网 » Mybatis+Servlet+Mysql 整合的一个小项目:对初学者非常友好,有助于初学者很快的上手Java Web