MVC - 登录注册案例学习 - 《Web编程学习笔记》

案例准备
注册功能
- 文件上传
登录功能
问题点
- IO不熟悉
- xml的load参数不了解

案例准备

用户实体
User.java

package com.imooc.domain;
public class User {
    private String username ; 
    private String password ;
    private String nickname ;
    private String sex;
    private String hobby ;
    private String path ;
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getNickname() {
        return nickname;
    }
    public void setNickname(String nickname) {
        this.nickname = nickname;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
    public String getHobby() {
        return hobby;
    }
    public void setHobby(String hobby) {
        this.hobby = hobby;
    }
    public String getPath() {
        return path;
    }
    public void setPath(String path) {
        this.path = path;
    }
}

因为这里还没有引入数据库的概念，因此，使用集合来初始化数据：
InitServlet.java

package com.imooc.servlet;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import com.imooc.domain.User;;
/**
 * 用户注册的初始化的Servlet
 */ 
@WebServlet("/InitServlet")
public class InitServlet extends HttpServlet {
    @Override
    public void init() throws ServletException {
        // 创建一个List集合用于保存用户注册的信息：
        List<User> list = new ArrayList<User>();
        // 将list保存到ServletContext作用域中
        this.getServletContext().setAttribute("list",list);
    }
}

然后，需要在web.xml中配置启动的项目：

  <servlet>
      <display-name>InitServlet</display-name>
      <servlet-name>InitServlet</servlet-name>
      <servlet-class>com.imooc.servlet.InitServlet</servlet-class>
      <load-on-startup>2</load-on-startup>
  </servlet>

注册功能

文件上传

这里有个上传文件的功能，文件上传需要有几个条件。

表单必须是post提交方式
表单中必须有文件上传项type = “file”,文件上传项必须有name属性和值
表单的enctype属性必须设置为multipart/form-data

文件上传，这里使用了fileupload的jar包和iojar包，放在WEN-INF下的lib文件夹中。

因为这里会上传文件，因此，没有使用传统的request方法来接收参数。
RegistServlet.java

package com.imooc.servlet;
import java.io.IOException;
import java.util.List;
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 org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
 * 用户注册的servlet
 */
@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //数据的接收
        //文件上传的基本操作
        try {
            //1、创建一个磁盘文件项工厂对象
            DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
            //2、创建一个核心解析类
            ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
            //3、解析request请求，返回的是List集合，List集合中存放的是FireItem对象
            List<FileItem> list = servletFileUpload.parseRequest(request);
            //4、遍历集合，获得每个FileItem，判断是表单项还是文件上传项
            for (FileItem fileItem : list) {
                //判断每一项是表单项还是文件上传项
                if(fileItem.isFormField()) {
                    //普通表单项
                    //接受表单参数的值
                    String name = fileItem.getFieldName();//获得表单项的name属性的值
                    String value = fileItem.getString("UTF-8");//获得表单项的值
                    System.out.println(name+"  "+value);
                }else {
                    //文件上传项
                    //文件上传功能
                }
            }
        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

regist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="./css/reg.css">
</head>
<body>
    <div class="reg">
        <div class="header">
            <h1>
                <a href="./login.jsp">登录</a> <a href="./regist.jsp">注册</a>
            </h1>
        </div>
        <!-- 文件上传的条件
        * 表单必须是post提交方式
        * 表单中必须有文件上传项type = "file",文件上传项必须有name属性和值
        * 表单的enctype属性必须设置为multipart/form-data
         -->
        <form action="/reg_login/RegistServlet" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td class="td1">用户名</td>
                    <td><input type="text" class="input1" name="username"></td>
                </tr>
                <tr>
                    <td class="td1">密码</td>
                    <td><input type="password" class="input1" name="password"></td>
                </tr>
                <tr>
                    <td class="td1">昵称</td>
                    <td><input type="text" class="input1" name="nickname"></td>
                </tr>
                <tr>
                    <td class="td1">性别</td>
                    <td>
                        <input type="radio" name="sex" value="male">男
                        <input type="radio" name="sex" value="female">女
                    </td>
                </tr>
                <tr>
                    <td class="td1">上传头像</td>
                    <td><input type="file" id="photo" name="upload"></td>
                </tr>
                <tr>
                    <td class="td1">兴趣爱好</td>
                    <td><label> 
                        <input type="checkbox" name="hobby" value="篮球">篮球
                        <input type="checkbox" name="hobby" value="足球">足球
                        <input type="checkbox" name="hobby" value="排球">排球 
                        <input type="checkbox" name="hobby" value="羽毛球">羽毛球
                    </label></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="btn-red">
                            <input type="submit" value="注册" id="reg-btn">
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

对于头像上传，如何指定唯一的文件名，而不会使重名文件覆盖。
建一个包com.imooc.utils，在下面创建一个UploadUtils的类

package com.imooc.utils;
/*
 * 文件上传的工具类
 * 
 * 
 * */

import java.util.UUID;

public class UploadUtils {
/*
 * 生产唯一的文件名:    
 */
    public static String getUUIDFileName(String fileName) {
        //将文件名的前面部分进行截取，例如xx.jps --> .jpg
        int idx = fileName.lastIndexOf(".");
        //获取文件的扩展名，jpg,png等
        String extension = fileName.substring(idx);
        String uuidFileName = UUID.randomUUID().toString().replace("-","")+extension;
        return uuidFileName;
    }

}

RegistServlet.java

package com.imooc.servlet;

import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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 org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.imooc.domain.User;
import com.imooc.utils.UploadUtils;

/**
 * 用户注册的servlet
 */
@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //数据的接收
        //文件上传的基本操作

        try {
            String url = null;//把url拉出来，这样可以写入到User中
            //至于这里为什么加try catch，是因为在下面的第三步eclipse自动推荐的

            //定义一个Map集合用于保存接收到的数据：
            Map<String,String> map = new HashMap<String,String>();

            //1、创建一个磁盘文件项工厂对象
            DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();

            //2、创建一个核心解析类
            ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);

            //3、解析request请求，返回的是List集合，List集合中存放的是FireItem对象
            List<FileItem> list = servletFileUpload.parseRequest(request);
            //定义一个List集合，用于保存兴趣爱好数据
            List<String> hobbyList = new ArrayList<String>();
            //4、遍历集合，获得每个FileItem，判断是表单项还是文件上传项
            for (FileItem fileItem : list) {
                //判断每一项是表单项还是文件上传项
                if(fileItem.isFormField()) {
                    //普通表单项
                    //接受表单参数的值
                    String name = fileItem.getFieldName();//获得表单项的name属性的值
                    String value = fileItem.getString("UTF-8");//获得表单项的值
                    System.out.println(name+"  "+value);
                    //接收复选框数据
                    if("hobby".equals(name)) {
                        String hobbyValue = fileItem.getString("UTF-8");
                        //接收到一个值，把值存入到hobbyList集合中
                        hobbyList.add(hobbyValue);
                        //把list转换为字符串，并且把前后的中括号给截取掉
                        hobbyValue = hobbyList.toString().substring(1,hobbyList.toString().length()-1);
                        System.out.println(name+"   "+hobbyValue);
                        //将hobby信息添加到map集合中
                        map.put(name,hobbyValue);
                    }else {
                        //将不是hobby的信息也添加到map集合中
                        map.put(name,value);
                    }
                }else {
                    //文件上传项
                    //文件上传功能
                    //获得文件上传的名称
                    String fileName = fileItem.getName();
                    //通过工具类获得唯一文件名
                    String uuidFileName = UploadUtils.getUUIDFileName(fileName);
                    //获得文件上传的数据
                    InputStream is = fileItem.getInputStream();
                    //获得文件上传的路径
                    String path = this.getServletContext().getRealPath("/upload");
                    //将输入流对接到输出流
                    //把下面的url拉到上面去，使下面的user可以访问到
                    //String url = path+"\\"+uuidFileName;
                    url = path+"\\"+uuidFileName;
                    OutputStream os = new FileOutputStream(url);

                    //下面的输入和输出流不太懂，但最终是把上传的图片保存到了upload的文件夹下
                    int len = 0;
                    byte[] b = new byte[1024];
                    while((len = is.read(b))!=-1) {
                        os.write(b,0,len);
                    }
                    is.close();
                    os.close();
                }
            }
            System.out.println(map);
            //封装数据到User中：
            User user = new User();
            user.setHobby(map.get("hobby"));
            user.setNickname(map.get("nickname"));
            user.setPassword(map.get("password"));
            user.setSex(map.get("sex"));
            user.setUsername(map.get("username"));
            user.setPath(url);
            //将注册的信息存入到之前初始化的List集合中：
            //获得ServletContext对象，实际上这里应该拉上去，在user.set之前，因为有可能存在重复注册的问题，然后传递一个msg给jsp。jsp再显示此信息在网页上
            List<User> userList = (List<User>) this.getServletContext().getAttribute("list");
            userList.add(user);
            this.getServletContext().setAttribute("list",userList);

            //下面是测试代码，在控制台中把user信息都打印出来，打印出来的前提是需要在User类中重写toString方法
            for (User user1:userList) {
                System.out.println(user1);
            }

            //注册成功，跳转到登录页面
            //同时利用session把用户名username也传过去
            request.getSession().setAttribute("username", user.getUsername());
            response.sendRedirect(request.getContextPath()+"/login.jsp");


        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <div class="login">
        <div class="header">
            <h1>
                <a href="./login.jsp">登录</a> <a href="./regist.jsp">注册</a>
            </h1>

        </div>

        <%
            //这里用于接收注册页面传入的username参数，然后赋值给下面的用户名的value
            String username = "";
            if(session.getAttribute("username")!=null){
                username = (String)session.getAttribute("username");
            }
        %>

        <form action="" method="post">
            <table>
                <tr>
                    <td class="td1">用户名</td>
                    <td><input type="text" class="input1" name="username" value="<%= username %>"></td>
                </tr>
                <tr>
                <td class="td1">密码</td>
                <td><input type="password" class="input1" name="password"></td>
                </tr>
                <tr>
                <td class="td1" colspan="2">
                    <input type="checkbox" name="remember" value="true" checked="checked"> 记住用户名</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="btn-red">
                            <input type="submit" value="登录" id="login-btn">
                        </div>
                    </td>
                </tr>
            </table>

        </form>
    </div>
</body>
</html>

登录功能

cookie是一个数组。
对数组进行遍历，找指定的名称，此时可以把查找的代码封装一下，放在在utils下单建一个类来操作。

最终的课程代码：

User.java:

package com.imooc.domain;

public class User {
    private String username ; 
    private String password ;
    private String nickname ;
    private String sex;
    private String hobby ;
    private String path ;
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getNickname() {
        return nickname;
    }
    public void setNickname(String nickname) {
        this.nickname = nickname;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
    public String getHobby() {
        return hobby;
    }
    public void setHobby(String hobby) {
        this.hobby = hobby;
    }
    public String getPath() {
        return path;
    }
    public void setPath(String path) {
        this.path = path;
    }
    @Override
    public String toString() {
        return "User [username=" + username + ", password=" + password + ", nickname=" + nickname + ", sex=" + sex
                + ", hobby=" + hobby + ", path=" + path + "]";
    }
}

InitServlet.java

package com.imooc.servlet;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import com.imooc.domain.User;;
/**
 * 用户注册的初始化的Servlet
 */ 
@WebServlet("/InitServlet")
public class InitServlet extends HttpServlet {
    @Override
    public void init() throws ServletException {
        // 创建一个List集合用于保存用户注册的信息：
        List<User> list = new ArrayList<User>();
        // 将list保存到ServletContext作用域中
        this.getServletContext().setAttribute("list",list);
    }
}

LoginServlet.java

package com.imooc.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.imooc.domain.User;;
/**
 * 用户登录的Servlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收数据：
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //从ServletContext域中获得保存信息集合:
        List<User> list = (List<User>) this.getServletContext().getAttribute("list");//这里的cast是eclipse推荐的，不然会报错
        for (User user:list) {
            //判断用户名和密码是否正确：
            if(username.equals(user.getUsername())) {
                //用户名正确
                if(password.equals(user.getPassword())) {
                    //密码正确

                    String remember = request.getParameter("remember");
                    //判断复选框是否选中
                    if("true".equals(remember)) {
                        //完成记住用户名的功能：
                        Cookie cookie = new Cookie("username",user.getUsername());
                        //设置路径名和有效时间：
                        cookie.setPath(request.getContextPath());
                        //设置有效时间：
                        cookie.setMaxAge(60*60*24);//保存24小时
                        //将cookie回写到浏览器：
                        response.addCookie(cookie);                                            
                        //这里加上之后，可以在浏览器f12网络中的cookie中可以看到多了一个username=xxx

                    }
                    //将用户信息保存到session中；
                    request.getSession().setAttribute("user", user);
                    //跳转到成功的页面
                    response.sendRedirect(request.getContextPath()+"/success.jsp");
                    System.out.println(request.getContextPath());
                    return ;
                }
            }
        }
        //登录失败：
        request.setAttribute("msg","用户名或密码错误");
        request.getRequestDispatcher("/login.jsp").forward(request, response);
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

RegistServlet.java

package com.imooc.servlet;

import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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 org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.imooc.domain.User;
import com.imooc.utils.UploadUtils;

/**
 * 用户注册的servlet
 */
@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //数据的接收
        //文件上传的基本操作

        try {
            String url = null;//把url拉出来，这样可以写入到User中
            //至于这里为什么加try catch，是因为在下面的第三步eclipse自动推荐的

            //定义一个Map集合用于保存接收到的数据：
            Map<String,String> map = new HashMap<String,String>();

            //1、创建一个磁盘文件项工厂对象
            DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();

            //2、创建一个核心解析类
            ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);

            //3、解析request请求，返回的是List集合，List集合中存放的是FireItem对象
            List<FileItem> list = servletFileUpload.parseRequest(request);
            //定义一个List集合，用于保存兴趣爱好数据
            List<String> hobbyList = new ArrayList<String>();
            //4、遍历集合，获得每个FileItem，判断是表单项还是文件上传项
            for (FileItem fileItem : list) {
                //判断每一项是表单项还是文件上传项
                if(fileItem.isFormField()) {
                    //普通表单项
                    //接受表单参数的值
                    String name = fileItem.getFieldName();//获得表单项的name属性的值
                    String value = fileItem.getString("UTF-8");//获得表单项的值
                    System.out.println(name+"  "+value);
                    //接收复选框数据
                    if("hobby".equals(name)) {
                        String hobbyValue = fileItem.getString("UTF-8");
                        //接收到一个值，把值存入到hobbyList集合中
                        hobbyList.add(hobbyValue);
                        //把list转换为字符串，并且把前后的中括号给截取掉
                        hobbyValue = hobbyList.toString().substring(1,hobbyList.toString().length()-1);
                        System.out.println(name+"   "+hobbyValue);
                        //将hobby信息添加到map集合中
                        map.put(name,hobbyValue);
                    }else {
                        //将不是hobby的信息也添加到map集合中
                        map.put(name,value);
                    }
                }else {
                    //文件上传项
                    //文件上传功能
                    //获得文件上传的名称
                    String fileName = fileItem.getName();
                    //通过工具类获得唯一文件名
                    String uuidFileName = UploadUtils.getUUIDFileName(fileName);
                    //获得文件上传的数据
                    InputStream is = fileItem.getInputStream();
                    //获得文件上传的路径
                    String path = this.getServletContext().getRealPath("/upload");
                    //将输入流对接到输出流
                    //把下面的url拉到上面去，使下面的user可以访问到
                    //String url = path+"\\"+uuidFileName;
                    url = path+"\\"+uuidFileName;
                    OutputStream os = new FileOutputStream(url);

                    //下面的输入和输出流不太懂，但最终是把上传的图片保存到了upload的文件夹下
                    int len = 0;
                    byte[] b = new byte[1024];
                    while((len = is.read(b))!=-1) {
                        os.write(b,0,len);
                    }
                    is.close();
                    os.close();
                }
            }
            System.out.println(map);
            //封装数据到User中：
            User user = new User();
            user.setHobby(map.get("hobby"));
            user.setNickname(map.get("nickname"));
            user.setPassword(map.get("password"));
            user.setSex(map.get("sex"));
            user.setUsername(map.get("username"));
            user.setPath(url);
            //将注册的信息存入到之前初始化的List集合中：
            //获得ServletContext对象，实际上这里应该拉上去，在user.set之前，因为有可能存在重复注册的问题，然后传递一个msg给jsp。jsp再显示此信息在网页上
            List<User> userList = (List<User>) this.getServletContext().getAttribute("list");
            userList.add(user);
            this.getServletContext().setAttribute("list",userList);

            //下面是测试代码，在控制台中把user信息都打印出来，打印出来的前提是需要在User类中重写toString方法
            for (User user1:userList) {
                System.out.println(user1);
            }

            //注册成功，跳转到登录页面
            //同时利用session把用户名username也传过去
            request.getSession().setAttribute("username", user.getUsername());
            response.sendRedirect(request.getContextPath()+"/login.jsp");


        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

这里实际上有一个问题，在注册页面如果不上传附件的话，这里会报错，我觉得这里应该再加一个判断，值如果为空的话就不调用fileNameUtil了。

CookieUtils.java

package com.imooc.utils;

import javax.servlet.http.Cookie;

public class CookieUtils {
    public static Cookie findCookie(Cookie[] cookies,String name) {
        if(cookies == null) {
            //说明客户端没有携带Cookie：
            return null;
        }else {
            //说明客户端有携带Cookie
            for (Cookie cookie:cookies) {
                if(name.equals(cookie.getName())) {
                    return cookie;
                }
            }
        }
        //客户端携带的cookie不是我们给的
        return null;
    }
}

UploadUtils.java

package com.imooc.utils;
/*
 * 文件上传的工具类
 * 
 * 
 * */

import java.util.UUID;

public class UploadUtils {
/*
 * 生产唯一的文件名:    
 */
    public static String getUUIDFileName(String fileName) {
        //将文件名的前面部分进行截取，例如xx.jps --> .jpg
        int idx = fileName.lastIndexOf(".");
        //获取文件的扩展名，jpg,png等
        String extension = fileName.substring(idx);
        String uuidFileName = UUID.randomUUID().toString().replace("-","")+extension;
        return uuidFileName;
    }

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>reg_login</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <display-name>InitServlet</display-name>
    <servlet-name>InitServlet</servlet-name>
    <servlet-class>com.imooc.servlet.InitServlet</servlet-class>
    <load-on-startup>2</load-on-startup>
  </servlet>
</web-app>

<%@page import="com.imooc.utils.CookieUtils"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <div class="login">
        <div class="header">
            <h1>
                <a href="./login.jsp">登录</a> <a href="./regist.jsp">注册</a>
            </h1>

        </div>

        <%
            String username = "";


            //获取从客户端携带过来的所有的cookie,这里放在session的前面，如果session有值，则session优先，覆盖cookie
            Cookie [] cookies = request.getCookies();
            //从cookie数组中查找指定 名称的cookie
            Cookie cookie = CookieUtils.findCookie(cookies, "username");
                if(cookie!=null){
                    //这样的话，浏览器就会自动加载cookie里的值，写在session的上面，以便于session可以覆盖cookie的值
                    username=cookie.getValue();
                  }
            //这里用于接收注册页面传入的username参数，然后赋值给下面的用户名的value

            if(session.getAttribute("username")!=null){
                username = (String)session.getAttribute("username");
            }
            String msg = "";
            if(request.getAttribute("msg")!=null){
                msg = (String)request.getAttribute("msg");
            }


        %>
        <h3>登录页面</h3>
        <h3><%= msg %></h3>

        <form action="<%= request.getContextPath() %>/LoginServlet" method="post">
            <table>
                <tr>
                    <td class="td1">用户名</td>
                    <td><input type="text" class="input1" name="username" value="<%= username %>"></td>
                </tr>
                <tr>
                <td class="td1">密码</td>
                <td><input type="password" class="input1" name="password"></td>
                </tr>
                <tr>
                <td class="td1" colspan="2">
                    <input type="checkbox" name="remember" value="true" checked="checked"> 记住用户名</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="btn-red">
                            <input type="submit" value="登录" id="login-btn">
                        </div>
                    </td>
                </tr>
            </table>

        </form>
    </div>
</body>
</html>

regist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="./css/reg.css">
</head>
<body>
    <div class="reg">
        <div class="header">
            <h1>
                <a href="./login.jsp">登录</a> <a href="./regist.jsp">注册</a>
            </h1>
        </div>
        <!-- 文件上传的条件
        * 表单必须是post提交方式
        * 表单中必须有文件上传项type = "file",文件上传项必须有name属性和值
        * 表单的enctype属性必须设置为multipart/form-data
         -->
        <form action="/reg_login/RegistServlet" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td class="td1">用户名</td>
                    <td><input type="text" class="input1" name="username"></td>
                </tr>
                <tr>
                    <td class="td1">密码</td>
                    <td><input type="password" class="input1" name="password"></td>
                </tr>
                <tr>
                    <td class="td1">昵称</td>
                    <td><input type="text" class="input1" name="nickname"></td>
                </tr>
                <tr>
                    <td class="td1">性别</td>
                    <td>
                        <input type="radio" name="sex" value="male">男
                        <input type="radio" name="sex" value="female">女
                    </td>
                </tr>
                <tr>

                <td class="td1">上传头像</td>

                    <td><input type="file" id="photo" name="upload"></td>

                </tr>
                <tr>
                    <td class="td1">兴趣爱好</td>
                    <td><label> 
                        <input type="checkbox" name="hobby" value="篮球">篮球
                        <input type="checkbox" name="hobby" value="足球">足球
                        <input type="checkbox" name="hobby" value="排球">排球 
                        <input type="checkbox" name="hobby" value="羽毛球">羽毛球
                    </label></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="btn-red">
                            <input type="submit" value="注册" id="reg-btn">
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

success.jsp

<%@page import="com.imooc.domain.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录成功</title>
<link rel="stylesheet" href="./css/login.css">
</head>
<body>
<%
    if(session.getAttribute("user")!=null){
        User user = (User)session.getAttribute("user");
        //获取最后一个\的下标，然后把文件名称定义一下
        int idx = user.getPath().lastIndexOf("\\");
        String fileName = user.getPath().substring(idx+1);

        %>

        <div class="login">
        <div class="header">
            <h1>登录成功</h1>
        </div>
        <div class="content">
            <table align="center">
                <tr>
                    <td align="center"><img src="<%=request.getContextPath() %>/upload/<%=fileName %>" ></td>

                </tr>
                <tr>
                    <td align="center">欢迎<%=user.getNickname() %>,登录成功！</td>
                </tr>
            </table>

        </div>
    </div>    

        <%

    }
    else{
    %>
    <h1>您还未登录，请前去<a href = "<%=request.getContextPath() %>/login.jsp">登录呦~</a></h1>

<%
    }
%>

</body>
</html>

登录注册案例学习

案例准备

注册功能

文件上传

登录功能

问题点

IO不熟悉

xml的load参数不了解