JavaWeb购物系统(二)购物登陆、注册

效果图

![在这里插入图

说明

我们在这之前我们需要先看过本专栏的第一篇文章(一)实现购物系统的一些前置准备

实现功能

  1. 登录验证
  2. 注册验证
  3. 验证码的添加(下一章节,单独讲)
  4. 记住我(记住用户账号密码)

正文

登录表单

 <%--登录表单--%>
    
    <div class="container__form container--signin">
        <form action="/MyProject/userProcessServlet" method="post" class="form" id="form2">
            <h2 class="form__title">Sign Inh2>
            <input type="hidden" name="method" value="login">
            <input type="text" placeholder="username" name="username" required="required" value="<%=username%>" class="input" />
            <input type="password" placeholder="Password" name="password" required="required" value="<%=password%>" class="input" />
            <div>
                <input style="width: 48%" type="text" name="answer" placeholder="验证码" required="required" id="answer" class="input">
                <img style="width: 50%" src="simpleImg" title="看不清,换一张" id="securityCode" />
            div>
            <span>
                <input type="checkbox" name="remember">记住我
                <a href="#" class="link">忘记密码a>
            span>
            <button type="submit" class="btn" id="login">登录button>
        form>
    div>

注册表单

<%--注册表单--%>
    
    <div class="container__form container--signup">
        <form action="/MyProject/userProcessServlet" class="form" id="form1" method="post">
            <h2 class="form__title">Sign Uph2>
            <input type="hidden" name="method" value="register">
            <input type="text" placeholder="User" name="username" required="required" class="input" />
            <input type="password" placeholder="Password" name="password" required="required" class="input" />
            <input type="email" placeholder="Email" name="email" required="required" class="input" />
            <div class="input" style="text-align: justify;background: transparent;font-size: 15px">
                爱好:
                <input style="margin-left: 20px;" type="checkbox" name="hobby" value="basketball ">篮球
                <input style="margin-left: 20px;" type="checkbox" name="hobby" value="football ">足球
            div>
            <button type="button" class="btn" id="register">注册button>
        form>
    div>

注册前端的js代码(jquery)

注册表单的处理采用的是Ajax发送请求,便于根据后端的处理结果来给前端返回对应的结果。

// 注册
            $("#register").click(
                function () {
                    var username = $("input[name='username']").val();
                    var password = $("input[name='password']").val();
                    var email = $("input[name='email']").val();
                    // 获取复选框被选中的值
                    var check_value =[];
                    $("input[name='hobby']:checked").each(function(){
                        check_value.push($(this).val());
                    });
                    var check_value_str = check_value.join();
                    if (username.length==0 ||
                        password.length==0 ||
                        email.length==0  ||
                    check_value_str.length==0){
                        alert("不能有空!")
                        return false;
                    }
                    $.post(
                        "/MyProject/userProcessServlet",
                        {
                            method: "register",
                            username: username,
                            password: password,
                            email: email,
                            hobby: check_value_str
                        },
                        function (data) {
                           alert(data);
                           window.location.href = "/MyProject/login.jsp"
                        },
                        "json"
                    )
                }
            )

使用Ajax请求,根据后端返回结果来处理的效果。

效果如下:

后端处理

首先我们需要明白登录都需要实现哪些功能,这样才能有的放矢。

Controller层(UserProcessServlet)

package com.controller;

import com.entity.User;
import com.google.gson.Gson;
import com.myUtil.JdbcUtil;
import com.myUtil.ProcessUtil;
import com.service.UserService;

import javax.servlet.ServletException;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;

public class UserProcessServlet extends BasicServlet {
    private UserService userService = new UserService();
    // 用户注册
    protected void register(HttpServletRequest request,HttpServletResponse response){
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String email = request.getParameter("email");
        String[] hobbies = request.getParameterValues("hobby");
        PrintWriter writer = null;
        Gson gson = new Gson();
        try {
            response.setContentType("text/plain;charset=utf-8");
            writer = response.getWriter();
            boolean existUsername = userService.isExistUsername(username);
            if (!existUsername){
                userService.addUser(new User(null, username, password, email, Arrays.toString(hobbies)));
                JdbcUtil.commit();
                writer.write(gson.toJson("注册成功"));
            }else {
                writer.write(gson.toJson("用户已存在"));
            }
        } catch (IOException e) {
            JdbcUtil.rollback();
            try {
                writer = response.getWriter();
                writer.write(gson.toJson("注册失败"));
            } catch (IOException ioException) {
                ioException.printStackTrace();
            }
            e.printStackTrace();
        }
    }

    // 用户登录
    protected void login(HttpServletRequest request,HttpServletResponse response){
        try {
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            String remember = request.getParameter("remember");
            HttpSession session = request.getSession();
            SimpleDateFormat formatter= new SimpleDateFormat("yyyy-MM-dd 'at' HH:mm:ss z");
            Date date = new Date(System.currentTimeMillis());
            response.setContentType("text/html;charset=utf-8");
            PrintWriter writer = response.getWriter();
            if (userService.checkUserName(username,password)){
                // 设置session防止非法登录(格式:用户名_用户id)
                session.setAttribute("user",username+"_"+userService.showDetailInfo(username).getId());
                // 如果勾选 记住我 设置cookie
                if ("on".equals(remember)){
                    setCookie(request,response);
                }
                // 记录次数
                recordCount(request);
                try {
                    request.getRequestDispatcher("/index.jsp").forward(request,response);
                } catch (ServletException e) {
                    e.printStackTrace();
                }
            }else {
                writer.write("fault!
"
); writer.write(""); writer.write("
"
); writer.write(formatter.format(date)); } } catch (UnsupportedEncodingException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } // 用户修改信息 protected void update(HttpServletRequest request,HttpServletResponse response){ String username = request.getParameter("username"); String email = request.getParameter("email"); String hobby = request.getParameter("hobby"); int id = Integer.parseInt(request.getParameter("id")); // 修改用户名得判断用户名是否被使用 if (!userService.isExistUsername(username)){ // 不修改密码 Boolean aBoolean = userService.updateUserInfo(id, new User(null, username, null, email, hobby)); if (aBoolean){ try { request.getSession().setAttribute("user",username + "_" + ProcessUtil.getUserIdBySessionId(request.getSession())); response.sendRedirect("/MyProject/userDetailInfo.jsp"); } catch (IOException e) { e.printStackTrace(); } } }else{ // 用户名被使用 try { response.setContentType("text/plain;charset=utf-8"); response.getWriter().write("用户名已被使用"); } catch (IOException e) { e.printStackTrace(); } } } // 写Cookie protected void setCookie(HttpServletRequest request, HttpServletResponse response){ String username = request.getParameter("username"); String password = request.getParameter("password"); Cookie cookie1 = new Cookie("username",username); cookie1.setMaxAge(3600*24*14); Cookie cookie2 = new Cookie("password", password); cookie2.setMaxAge(3600*24*14); response.addCookie(cookie1); response.addCookie(cookie2); } // 记录登录次数/登陆时间 protected void recordCount(HttpServletRequest request){ HttpSession session = request.getSession(); if (session.getAttribute("count") == null){ int count = 1; session.setAttribute("count",count); }else { Integer count = (Integer)session.getAttribute("count"); count++; session.setAttribute("count",count); } } // 用户注销 protected void logout(HttpServletRequest request,HttpServletResponse response){ HttpSession session = request.getSession(); session.removeAttribute("user"); try { response.sendRedirect("/MyProject/index.jsp"); } catch (IOException e) { e.printStackTrace(); } } }

UserService层

package com.service;
import com.dao.UserDao;
import com.entity.User;
import java.util.List;

public class UserService {
    private UserDao userDao = new UserDao();
    // 验证用户是否存在
    public boolean isExistUsername(String username){
        User user = userDao.queryUserByName(username);
        if (user!=null){
            return true;
        }
        return false;
    }


    // 验证用户的密码
    public boolean checkUserName(String username,String password){
        if (!isExistUsername(username)){
            return false;
        }
        User user = userDao.queryUserByNameAndPwd(username, password);
        if (user!=null){
            return true;
        }else {
            return false;
        }
    }

    // 显示个人信息
    public User showDetailInfo(String username){
        User user = userDao.queryUserByName(username);
        if (user!=null){
            return user;
        }else {
            return null;
        }
    }

    // 修改用户信息
    public Boolean updateUserInfo(Integer id,User user){
        Boolean result = userDao.updateInfo(id, user);
        return result;
    }

    // 添加用户
    public boolean addUser(User user){
        boolean result = userDao.addData(user);
        return result;
    }

    // 显示列表的所有用户信息
    public List<User> showAllUser(){
       return  userDao.showAllData();

    }
}

UserDao层

我们的具体类的Dao都继承`BasicDao`这个公共类,通过泛型来实现自己具体Dao。
package com.dao;

import com.entity.User;

import java.util.List;


public class UserDao extends BasicDao<User>{

    // 根据用户名查询用户
    public User queryUserByName(String username){
        String sql = "SELECT * FROM USER WHERE username=" + "'" + username + "'";
        User user = querySingle(sql,User.class);
        return user;
    }

    // 根据用户名和密码查询用户
    public User queryUserByNameAndPwd(String username,String password){
        String sql = "SELECT * FROM USER WHERE username = '" + username + "'" + "and " + "password" + "=" + "MD5('"+ password +"')";
        User user = querySingle(sql,User.class);
       return user;
    }


    // 修改数据
    public Boolean updateInfo(Integer id,User user){
        String sql = "UPDATE `user` SET `username`='"+ user.getUsername() + "',`email`= '"+ user.getEmail() +"',`hobby`='" + user.getHobby() + "' WHERE `id`="+ id;
        return dmlData(sql);
    }

    // 添加数据
    public boolean addData(User user){
        String sql = "INSERT INTO USER(`username`,`password`,`email`,`hobby`) VALUES('" + user.getUsername() + "'," + "MD5('" + user.getPassword() + "')," + "'" + user.getEmail() + "','" + user.getHobby() + "')";
        System.out.println(sql);
        return dmlData(sql);
    }



    // 显示列表所有信息
    public List<User> showAllData(){
        String sql =  "select * from user";
        List<User> users = queryMulti(sql, User.class);
        if (users != null){
            return users;
        }
        return null;
    }

}

entity实体类(User实体对象)

package com.entity;

public class User {
    private Integer id;
    private String username;
    private String password;
    private String email;
    private String hobby;


    public User() {
    }

    public User(Integer id, String username, String password, String email, String hobby) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.email = email;
        this.hobby = hobby;
    }



    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getHobby() {
        return hobby;
    }

    public void setHobby(String hobby) {
        this.hobby = hobby;
    }

    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 getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", email='" + email + '\'' +
                ", hobby='" + hobby + '\'' +
                '}';
    }
}

User表的设计

列名 数据类型 长度 主键? 非空? 自增?
id int
username varchar 32
password varchar 32
email varchar 32
hobby varchar 32

这里我们需要注意的是:实体类的属性必须要和对应表中的字段类型保持一致!!!

记住我功能的实现

前端使用的都是jsp(jsp是前端这种说法并不准确,jsp应该是前后端的结合,这里只是为了描述方便)。我们在UserProcessServletcontroller层中,通过cookie,对其做了处理,详细的逻辑读者可以看上边的代码。这里展示的是在jsp前端页面中写的java代码,初始化都为空,只有本地浏览器的cookie中有用户名和密码的时候,才会将其读取到登陆框中。

<%!
    String username = "";
    String password = "";
%>
<%
    Cookie[] cookies = request.getCookies();
    for (Cookie cookie : cookies) {
        if ("username".equals(cookie.getName())){
            username = cookie.getValue();
        }
        if ("password".equals(cookie.getName())){
            password = cookie.getValue();
        }
    }
%>

你可能感兴趣的:(JavaWeb购物系统,javascript,前端,ajax)