总体内容不算复杂,主要是利用jsp+servlet+mysql去实现web端的注册/登录/显示当前用户/退出功能

先看看效果图:

注册:

wKioL1LiGITyiBc5AAKjO-n-Uhw055.jpg

注册成功后登录:

wKiom1LiGUGi8JRRAAIyfxpYYag117.jpg

登录成功后显示用户信息,同时也可以选择用户退出功能

wKioL1LiGeuT3ektAAKDnXiT_hQ767.jpg


好了,言归正传,实现这样一个简单模块主要是用到servlet技术去处理用户的注册登录等信息,当然我们可以在这基础上可以加入其它需要的东西比如加个验证码、忘记密码、ajax技术等,当然servlet是基本元素,这个是需要掌握的。可以通过下面几个步骤去总结一下,希望能给刚入门java web的同学起到抛砖引玉的作用:

1.理清思路(要设计一个什么东西),设计数据库,数据表:

CREATE TABLE tb_user (
id int(10) unsigned NOT NULL AUTO_INCREMENT PRIMARY KEY,
username varchar(50) NOT NULL,
password varchar(50) NOT NULL,
sex varchar(10) NOT NULL,
tel varchar(50) NOT NULL,
photo TINYBLOB NOT NULL, 
email varchar(100) NOT NULL
)

这里需要注意photo类型要使用TINYBLOB,而不是varchar否则会提示出错信息:      Data too long for column 'photo' at row 1


2.设计4个包用于放置java文件:

com.lxy(用户实体信息)

com.lxy.dao(数据库操作文件)

com.lxy.servlet(servlet文件)

com.lxy.code(编码文件)

wKioL1LiG7yBpC97AACvAyllMQk713.jpg


3.编写用户实体类user.java(package:com.lxy)

public class User {
    private int id;         // 标识
    private String username;// 用户名
    private String password;// 密码
    private String sex;     // 性别
    private String tel;     // 电话
    private String photo;   // 头像
    private String email;   // 电子邮箱
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
下面省略getXXX()和setXXX()方法,请自行编写


4.编写数据库连接ConnectDB(package:com.lxy.dao)同时导入mysql的jar包

public static Connection getConnection(){
        Connection conn = null;
        try {
            // 加载驱动
            Class.forName("com.mysql.jdbc.Driver");
            // 数据库连接url
            String url = "jdbc:mysql://localhost:3306/db_test1";
            // 获取数据库连接
            conn = DriverManager.getConnection(url, "root", "lixiyu");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }
    /**
     * 关闭数据库连接
     * @param conn Connection对象
     */
    public static void closeConnection(Connection conn){
        // 判断conn是否为空
        if(conn != null){
            try {
                conn.close();   // 关闭数据库连接
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

编写用户操作类UserDao(com.lxy.dao):

public void saveUser(User user){
        // 获取数据库连接Connection对象
        Connection conn = ConnectDB.getConnection();
        // 插入用户注册信息的SQL语句
        String sql = "insert into tb_user(username,password,sex,tel,photo,email) values(?,?,?,?,?,?)";
        try {
            // 获取PreparedStatement对象
            PreparedStatement ps = conn.prepareStatement(sql);
            // 对SQL语句的占位符参数进行动态赋值
            ps.setString(1, user.getUsername());
            ps.setString(2, user.getPassword());
            ps.setString(3, user.getSex());
            ps.setString(4, user.getTel());
            ps.setString(5, user.getPhoto());
            ps.setString(6, user.getEmail());
            // 执行更新操作
            ps.executeUpdate();
            // 释放此 PreparedStatement 对象的数据库和 JDBC 资源
            ps.close();
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            // 关闭数据库连接
            ConnectDB.closeConnection(conn);
        }
    }
    /**
     * 用户登录
     * @param username 用户名
     * @param password 密码
     * @return 用户对象
     */
    public User login(String username, String password){
        User user = null;
        // 获取数据库连接Connection对象
        Connection conn = ConnectDB.getConnection();
        // 根据用户名及密码查询用户信息
        String sql = "select * from tb_user where username = ? and password = ?";
        try {
            // 获取PreparedStatement对象
            PreparedStatement ps = conn.prepareStatement(sql);
            // 对SQL语句的占位符参数进行动态赋值
            ps.setString(1, username);
            ps.setString(2, password);
            // 执行查询获取结果集
            ResultSet rs = ps.executeQuery();
            // 判断结果集是否有效
            if(rs.next()){
                // 实例化一个用户对象
                user = new User();
                // 对用户对象属性赋值
                user.setId(rs.getInt("id"));
                user.setUsername(rs.getString("username"));
                user.setPassword(rs.getString("password"));
                user.setSex(rs.getString("sex"));
                user.setTel(rs.getString("tel"));
                user.setPhoto(rs.getString("photo"));
                user.setEmail(rs.getString("email"));
            }
            // 释放此 ResultSet 对象的数据库和 JDBC 资源
            rs.close();
            // 释放此 PreparedStatement 对象的数据库和 JDBC 资源
            ps.close();
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            // 关闭数据库连接
            ConnectDB.closeConnection(conn);
        }
        return user;
    }
    /**
     * 判断用户名在数据库中是否存在
     * @param username 用户名
     * @return 布尔值
     */
    public boolean userIsExist(String username){
        // 获取数据库连接Connection对象
        Connection conn = ConnectDB.getConnection();
        // 根据指定用户名查询用户信息
        String sql = "select * from tb_user where username = ?";
        try {
            // 获取PreparedStatement对象
            PreparedStatement ps = conn.prepareStatement(sql);
            // 对用户对象属性赋值
            ps.setString(1, username);
            // 执行查询获取结果集
            ResultSet rs = ps.executeQuery();
            // 判断结果集是否有效
            if(!rs.next()){
                // 如果无效则证明此用户名可用
                return true;
            }
            // 释放此 ResultSet 对象的数据库和 JDBC 资源
            rs.close();
            // 释放此 PreparedStatement 对象的数据库和 JDBC 资源
            ps.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            // 关闭数据库连接
            ConnectDB.closeConnection(conn);
        }
        return false;
    }
}


5.编写注册/登录/退出的jsp和servlet(篇幅太长,这里只给出注册的关键代码,案例源码我会在后面共享出来)

注册reg.jsp:

写个javascripe去做判断:

<script type="text/javascript">
           function reg(form){
               if(form.username.value == ""){
                   alert("用户不能为空!");
                   return false;
               }
               if(form.password.value == ""){
                   alert("密码不能为空!");
                   return false;
               }
               if(form.repassword.value == ""){
                   alert("确认密码不能为空!");
                   return false;
               }
               if(form.password.value != form.repassword.value){
                   alert("两次密码输入不一致!");
                   return false;
               }
               if(form.tel.value == ""){
                   alert("联系电话不能为空!");
                   return false;
               }
               if(form.email.value == ""){
                   alert("电子邮箱不能为空!");
                   return false;
               }
           }
           function change(){
               var photo = document.getElementById("photo");
               var photoImg = document.getElementById("photoImg");
               photoImg.src = photo.value;
           }
       </script>

下面在jsp中设计你所以想要的表单的效果比如我的这个用个table去写:

<form action="RegServlet" method="post" onsubmit="return reg(this);">
                           <table align="center" width="450" border="0">
                               <tr>
                                   <td align="right">用户名:</td>
                                   <td>
                                       <input type="text" name="username">
                                   </td>
                               </tr>
                               <tr>
                                   <td align="right">密 码:</td>
                                   <td>
                                       <input type="password" name="password">
                                   </td>
                               </tr>
                               <tr>
                                   <td align="right">确认密码:</td>
                                   <td>
                                       <input type="password" name="repassword">
                                   </td>
                               </tr>
                               <tr>
                                   <td align="right">性 别:</td>
                                   <td>
                                       <input type="radio" name="sex" value="男" checked="checked">男
                                       <input type="radio" name="sex" value="女">女
                                   </td>
                               </tr>
                               <tr>
                                   <td align="right">头 像:</td>
                                   <td>
                                       <select name="photo" id="photo" onchange="change();">
                                           <option value="p_w_picpaths/boy.png" selected="selected">头像boy</option>
                                           <option value="p_w_picpaths/girl.png">头像girl</option>
                                       </select>
                                       <img id="photoImg" src="p_w_picpaths/boy.png">
                                   </td>
                               </tr>
                               <tr>
                                   <td align="right">联系电话:</td>
                                   <td>
                                       <input type="text" name="tel">
                                   </td>
                               </tr>
                               <tr>
                                   <td align="right">电子邮箱:</td>
                                   <td>
                                       <input type="text" name="email">
                                   </td>
                               </tr>
                               <tr>
                                   <td colspan="2" align="center">
                                       <input type="submit" value="注 册">
                                       <input type="reset" value="重 置">
                                   </td>
                               </tr>
                           </table>
                       </form>

写注册的RegServlet:

public class RegServlet extends HttpServlet {
    private static final long serialVersionUID = 5280356329609002908L;
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 获取用户名
        String username = request.getParameter("username");
        // 获取密码
        String password = request.getParameter("password");
        // 获取性别
        String sex = request.getParameter("sex");
        // 获取头像
        String photo = request.getParameter("photo");
        // 获取联系电话
        String tel = request.getParameter("tel");
        // 获取电子邮箱
        String email = request.getParameter("email");
        // 实例化UserDao对象
        UserDao userDao = new UserDao();
        if(username != null && !username.isEmpty()){
            if(userDao.userIsExist(username)){
                // 实例化一个User对象
                User user = new User();   
                // 对用户对象中的属性赋值
                user.setUsername(username);
                user.setPassword(password);
                user.setSex(sex);
                user.setPhoto(photo);
                user.setTel(tel);
                user.setEmail(email);
                // 保存用户注册信息
                userDao.saveUser(user);
                request.setAttribute("info", "恭喜,注册成功!<br>");
            }else{
                request.setAttribute("info", "错误:此用户名已存在!");
            }
        }
        // 转发到message.jsp页面
        request.getRequestDispatcher("message.jsp").forward(request, response);
    }
}

在xml中声明及映射servlet对象:

<!-- 用户注册 -->
    <servlet>
        <servlet-name>RegServlet</servlet-name>
        <servlet-class>com.lxy.servlet.RegServlet</servlet-class>
    </servlet>
<!-- Servlet映射 -->
    <servlet-mapping>
        <servlet-name>RegServlet</servlet-name>
        <url-pattern>/RegServlet</url-pattern>
    </servlet-mapping>


登录那块步骤也是相似的,就不一一展开了。源码里面注释较多,看下学习下基本上能懂得。

—————————————————分割线—————————————————————

聚沙成塔,集腋成裘

源码请见附件