Java Web登录界面

非常激动的开通了我的第一个博客，在这里希望大家能多多指点，相互学习。

一个简单的登录界面

 

首先我们先把这个登录分为三块：

一、数据库

数据库我用的是MYSQL；

二、前端

三、后台

1、  后台代码的编写我使用的是eclipse

2、  容器我使用的是Tomcat7

3、  Jdk使用的是1.7版本

按照上面的顺序来，第一步我们先创建数据库；

在创建数据库之前一定要先设计好我们登录的时候需要哪些东西，用户名和密码肯定是需要的，所以数据表里肯定是有这两个字段的，还有一个字段是想都不用想，铁定需要的，那就是id，惯用的手法，id铁定是主键，然后自增；用户名就用username，密码password。

设计好了必须要的字段之后我突然又想到，如果以后我们做注册功能的话，是不是也能用同一张表呢，那这样的话，我干脆现在就设计好吧。Username是用户名，用户名那就随便用户定义吧，我就另外再写一个字段，就用name，注册的时候就把名字给我写进去吧，毕竟我要知道这个账号是谁的，顺便定个性别吧，是男的还是女的总要告诉我吧。好了，不想再定了，如果想定其他的就再去加吧。

废话不多说，数据库直接放上来：

 

好了，数据库完成后，，对于新手来说前端没必要写的太复杂了，当然，也可以去copy一份，自己稍微改一下就好了，我呢就比较懒，就随便去网上copy了一份，我看了一下，很简单，js导了一个jquery.min的包，然后随便搞了几张图片，放进去了。

接下来我就一步一步的把代码放上来：

1、首先html代码：

<div class="dowebok">
        <div class="logo"></div>
        <form action="login" accept-charset="utf-8" id="login_form" class="loginForm" method="post">
            
        <div class="form-item">
            <input id="username" name="username" type="text" autocomplete="off" placeholder="账号/工号">
            <!--  -->
        </div>
        <div class="form-item">
            <input id="password" name="password" type="password" autocomplete="off" placeholder="登录密码">
          <!--   --> 
        </div>
        <div class="form-item"><button id="submit">登 录</button></div>
        <div class="reg-bar">
            <a class="reg" href="javascript:">立即注册</a>
            <a class="forget" href="javascript:">忘记密码</a>
        </div>
        </form>
    </div>

好的，上面的代码我想没有哪里可以解释的，已经简单的不能再简单了。

然后就是CSS代码，毕竟做东西要有模有样：

* { margin: 0; padding: 0; }
      html { height: 100%; }
      body { height: 100%; background: #fff url(images/backgroud.png) 50% 50% no-repeat; background-size: cover;}
         #username { background: url(images/emil.png) 20px 14px no-repeat; }
        #password { background: url(images/password.png) 23px 11px no-repeat; }
        .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(images/login.png) 0 0 no-repeat; }
        .dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: 550px; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}
        
        .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
        .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
        .form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; }
        
        .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; }
        .reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;}
        .reg-bar a { color: #fff; text-decoration: none; }
        .reg-bar a:hover { text-decoration: underline; }
        .reg-bar .reg { float: left; }
        .reg-bar .forget { float: right; }
        .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}

        @media screen and (max- 500px) {
            * { box-sizing: border-box; }
            .dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; }
            .logo { margin: 50px auto; }
            .form-item { width: auto; }
            .form-item input, .form-item button, .reg-bar { width: 100%; }
        }

Css代码也是十分易懂的，不懂的童鞋度娘一下你就知道。

 

前端，数据库都出来了，万事俱备只欠后台了，毕竟真正做苦力的还是后台。

首先我们啥都不说，第一步就把数据库配置好，叫人家去做苦力，你知道得先告诉人家去哪里搬砖是不。

我的数据库配置文件写在c3p0-config.xml里

 

 

<?xml version="1.0" encoding="utf-8" ?>
<c3p0-config>
    <!-- 默认配置，如果没有指定则使用这个配置 -->
    <default-config>
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql://localhost:3306/yaj_stu</property>
        <property name="user">root</property>
        <property name="password">root</property>
        <property name="idleConnectionTestPeriodInMinutes" value="240" />
        <property name="idleMaxAgeInMinutes" value="60" />
        <property name="maxConnectionsPerPartition" value="250" />
        <property name="minConnectionsPerPartition" value="40" />
        <property name="partitionCount" value="2" />
        <property name="acquireIncrement" value="10" />
        <property name="statementsCacheSize" value="0" />
        <property name="releaseHelperThreads" value="5" />
        <property name="connectionTimeoutInMs" value="5000" />

    </default-config>
    <!-- 命名的配置 -->
    <named-config name="51zixue"><!--这里是设置配置文件的名字 -->
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql://localhost:3306/yaj_stu</property><!—3306后面跟数据库名，不是表名 -->
        <property name="user">root</property><!--mysql的登陆名 -->
        <property name="password">root</property><!--如果没密码就可以设置成<property name="password"></property> -->
        <property name="idleConnectionTestPeriodInMinutes" value="240" />
        <property name="idleMaxAgeInMinutes" value="60" />
        <property name="maxConnectionsPerPartition" value="250" />
        <property name="minConnectionsPerPartition" value="40" />
        <property name="partitionCount" value="2" />
        <property name="acquireIncrement" value="10" />
        <property name="statementsCacheSize" value="0" />
        <property name="releaseHelperThreads" value="5" />
        <property name="connectionTimeoutInMs" value="5000" />

    </named-config>
</c3p0-config>

咳咳，一口老血吐在键盘上，为了防止有容易搞错的的童鞋，我又加上了注释。

 

好了，告诉它要去哪里搬砖了，现在就要告诉它怎么搬砖了。

首先，我先建了四个包备用：

当然，这是我写完之后的包，里面是有东西的，刚建好的包是空的，包的颜色是白色的。

先从第一个包开始说，bean层放的实体类……完了，有童鞋要骂我了，别跟我扯什么实体类，你就直接告诉我到底是放啥？好，说白了就是你要在类里get、set一下的那个类！你不用管它是干啥的也不用管它的谁，不知道的，下课之后抄代码，给我抄十遍你就自然知道了。

 

来啊，给朕上bean层的代码：

package com.xh.bean;

public class User {
        private int id;
        private String username;
        private String pwassword;
        private String name;
        private String sex;
        public int getId() {
            return id;
        }
        public void setId(int id) {
            this.id = id;
        }
        public String getUsername() {
            return username;
        }
        public void setUsername(String username) {
            this.username = username;
        }
        public String getPwassword() {
            return pwassword;
        }
        public void setPwassword(String pwassword) {
            this.pwassword = pwassword;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public String getSex() {
            return sex;
        }
        public void setSex(String sex) {
            this.sex = sex;
        }        
}

这下明白bean是干啥的了吧。

 

好了，搞定bean层之后，你以为要去dao层？

不！我们直接去web层造去。

本来想着一次把web层的代码全部贴上来，但是想到，有童鞋在这里学习，那么就一步一步的来吧，到后面再把代码一次复制上来。

首先，我们先在web层建一个servlet

@WebServlet(name="LoignServlet",urlPatterns="/login")
public class LoignServlet extends HttpServlet{
@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        super.doGet(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    }
}

Ok之后我们就在 doPost里面写代码

登录的时候是通过验证username和password来登录的，那么我们就先拿到username和password

@WebServlet(name="LoignServlet",urlPatterns="/login")
public class LoignServlet extends HttpServlet{
@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        super.doGet(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username=req.getParameter("username");
String password=req.getParameter("password");
    
    }
}

然后把User清空清空

@WebServlet(name="LoignServlet",urlPatterns="/login")
public class LoignServlet extends HttpServlet{
@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        super.doGet(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username=req.getParameter("username");
String password=req.getParameter("password");
User user=null;
UserService userService=new UserService();

    
    }
}

这时候UserService会报错，这是因为我们没有这个类，然后就要去造它

package com.xh.service;

import java.sql.SQLException;

import com.xh.bean.User;
import com.xh.dao.UserDao;

public class UserService {
        public User login(String username,String password) throws SQLException{
            UserDao userDao=new UserDao();
            User user=userDao.login(username, password);
            return user;
            
        }
}

UserService会报错，因为里面的UserDao这个类我们没有，接着我们就要去造UserDao

package com.xh.dao;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;

import com.mchange.v2.c3p0.ComboPooledDataSource;
import com.xh.bean.User;

public class UserDao {
        public User login(String username,String password) throws SQLException{
            
            ComboPooledDataSource dataSource=new ComboPooledDataSource();
            QueryRunner queryRunner=new QueryRunner(dataSource);
            String sql="select * from stu where username=? and password=?";
            User user=queryRunner.query(sql, new BeanHandler<User>(User.class),username,password);
            
            return user;
            
        }
}

Dao层里写的SQL语句请注意了stu是我数据表的名字，请童鞋们不要搞错了。

Dao层和service层全部搞定之后，我们就要回到web层里了。

package com.xh.web;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;

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 com.xh.bean.User;
import com.xh.service.UserService;

@WebServlet(name="LoignServlet",urlPatterns="/login")
public class LoignServlet extends HttpServlet{

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        super.doGet(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         PrintWriter out=resp.getWriter();
        String username=req.getParameter("username");
        String password=req.getParameter("password");
        
        User user=null;
        UserService userService=new UserService();
        
        try {
            user=userService.login(username, password);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
            if(user!=null){
                resp.getWriter().write("登录成功");
            }else {
                System.out.println(user);
            out.print("<script language='javascript' charset='utf-8'>alert('err!!');window.location.href='/WebTest/ index.jsp';</script>"); 
            }
    }
    }

判断user不等于空之后就要跳转到其他界面，因为我没有写其他界面，所以干脆来个

提示成功就好了，如果登录失败的话就跳回登录界面，接着给我登录。

我在项目中引入了

c3p0-0.9.5.2.jar

commons-beanutils-1.8.3.jar

commons-dbutils-1.6.jar

mysql-connector-java-5.1.42-bin.jar

等jar包。

好了，登录操作我们就搞定了，下课！

对了，展示一下本堂课的成果↓