商城系统--登录功能

最新推荐文章于 2023-06-19 17:01:19 发布

老米的世界

最新推荐文章于 2023-06-19 17:01:19 发布

阅读量2.3k

点赞数

分类专栏： java 文章标签：商城登录功能 ajax校验

本文链接：https://blog.csdn.net/MPFLY/article/details/72082145

版权

java 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.需求:

1.用户进入登录页面,没有注册过的,可以去注册,所以需要一个注册功能的接口.并且在注册成功之后,返回到登录页面,进行登录操作.
2.下面这两种情况,都提示”用户名或密码错误”
(1)输入数据库中没有的用户名和密码
(2)输入合法的用户名(数据库中存在),但是密码错误
3.用户名和密码输入都合法,不给出任何提示,用户点击登录,直接进入主界面.
4.找回密码功能(未实现,其实很需要,之后再补加一个吧)

2.代码:

1.页面:
使用bootstrap,又快又好!

<body>
  <br><br><br><br><br>
  <div id="all">
        <button type="ret" class="btn btn-default" onclick="window.history.go(-1);">返回</button>
  <br><br>
        <form action="" class="col-sm-12">
            <div class="form-group">    
                <label class="col-sm-2 control-label name">用户名</label>
                <div class="col-sm-10">
                    <input type="text" id="id1" name="username" class="form-control " placeholder="请输入用户名"><span id="msg1">
                </div>
            </div>

     <br><br>   
            <div class="form-group">
                <label class="col-sm-2 control-label pass">密码</label>
                <div class="col-sm-10">
                    <input type="password" id="id2" name="password" class="form-control" placeholder="请输入密码"><span id="msg2">
                </div>
            </div>


     <br><br>

         <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
            <a href="page/zhuce.jsp" class="form-control-static">点击注册</a><br><br>
              <input type="button" value="登录" id="sub" class="btn btn-default">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <button type="reset" class="btn btn-default">重置</button>
             </div>
        </div>

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

2.css部分

<style type="text/css">
        #all{
            margin:0 auto;
            background:white;
            border:1px solid black;
            height:260px;
            width:600px;

        }
        body{
                background:#eee;
            }
//这个是提示的字体,由于此处在合法状态下不用给出提示,所以只要出现提示就是警告,所以直接定义提示部分的字体为[red]            
        span{
            color:red;
        }
    </style>

3.js部分

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

    <script type="text/javascript">
        $(function(){
            //用户名部分的[判断为空]和[小动画]
            $("#id1").blur(function(){
                $(".name").animate(
                    {bottom: '-3px'}, 500
                );

                if($('#id1').val() == ""){
                    $("#msg1").text("请输入用户名");
                }
            });
            //密码部分的[判断为空]和[小动画]
            $("#id2").blur(function(){

                $(".pass").animate(
                    {bottom:'-3px'},500
                );

                if($('#id2').val() == ""){
                    $("#msg2").text("请输入密码");
                }
            });
            //用户名部分的[鼠标聚焦提示消失]和[小动画]
            $("#id1").focus(function(){
                $("#msg1").text("");
                $(".name").animate(
                    {bottom: '+10px'}, 500
                );
            });
            //密码部分的[鼠标聚焦提示消失]和[小动画]
            $("#id2").focus(function(){
                $("#msg2").text("");
                $(".pass").animate(
                    {bottom:'+10px'},500
                );
            });


            //当用户点击[登录]按钮时,进行校验
            $("#sub").click(function(){
                $.ajax({
                    url:"UserAjaxServlet02",
                    type:"post",
                    data:{
                    //将用户名和密码传到后台
                    username:$("#id1").val(),
                    password:$("#id2").val()
                    },
                    dataType:"json",
                    success:function(msg){
                        //判断后台发送回来的提示
                        //这是用户名不存在的情况下,显示"用户名或密码错误"
                        if(msg.msg != null){
                            $("#msg2").text(msg.msg);
                        }
                        //这是用户名正确,密码错误的情况下,显示"用户名或密码错误"
                        if(msg.msg3 != null){
                            $("#msg2").text(msg.msg3);
                        }
                        //如果前台得到"登录"的消息,进行登录操作,进行跳转.
                        if(msg.msg2 != null){
                            if(msg.msg2 = "登录"){
                        window.location.href="/Science_Museum/

                            }
                        }
                    },
                });
            });



        });
    </script>

4.servlet部分

package com.hello.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import net.sf.json.JSONObject;

import com.hello.beans.User;
import com.hello.dao.UserDao;
import com.hello.dao.impl.UserImpl;
import com.hello.util.CreateConnection;
import com.hello.util.MD5;

public class UserAjaxServlet02 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

            JSONObject j = new JSONObject();
            request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=UTF-8");
            PrintWriter out = response.getWriter();
            //拿到从前台通过ajax传过来的数据
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            String pwd = MD5.getMD5(password);
            //这里准备两条sql语句,第一句查找数据库中是否有用户所输入的用户名
            String sql = "select username from t_user";
            //查找该用户名的密码.
            String sql2 = "select password from t_user where username = '"+username+"'";

                try {
                    Connection conn = CreateConnection.getConnection();     
                    Statement sta = conn.createStatement();
                    ResultSet set = sta.executeQuery(sql);

                    boolean flag = true;
                    boolean flag2 = true;

                    while (set.next()) {
                        //判断用户所输入的用户名是否在存在?执行第二条sql语句,并将flag改为true
                        if (username.equals(set.getString("username"))) {
                            ResultSet set2 = sta.executeQuery(sql2);
                            flag=true;
                            while (set2.next()) {
                                //判断密码
                                if(pwd.equals(set2.getString("password"))){
                                    //到此处,用户名和密码都匹配成功,设置session,这是整个商城都需要用到的.
                                    HttpSession session = request.getSession();
                                    UserDao dao = new UserImpl();
                                    //这儿一个方法,将该用户名所对应的user放到session中.
                                    User user = dao.query(username);
                                    session.setAttribute("session_user", user);
                                    //
                                    flag2=true;
                                    break;
                                }else{
                                    flag2=false;
                                }
                            }
                            //如果匹配到,跳出循环
                            break;
                        } else {
                            flag=false;
                        }
                    }
                    //这是用户名不在数据库中
                    if (flag == false) {
                        j.put("msg", "用户名或密码错误");
                        out.write(j.toString());
                    }
                    //这是用户名正确,但是密码错误.都是要提示用户"用户名或密码错误"
                    if(flag2 == false){
                        j.put("msg3", "用户名或密码错误");
                        out.write(j.toString());
                    }
                    //都合法的情况下,向前台发出"登录"信息,前台接收到登录之后,才能登录操作.
                    if(flag == true && flag2 == true){
                        j.put("msg2", "登录");
                        out.write(j.toString());

                    }
                } catch (SQLException e) {
                    e.printStackTrace();
                }
    }

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

    }

}

写在最后
写一下流程吧:
用户来到登录界面–>输入用户名和密码–>点击[登录]按钮–>js中的click事件触发–>将用户名和密码传送到后台进行校验–>返回相应的值,并显示在界面上–>如果返回为”登录”,直接触发跳转事件,否则没有反应.

老米的世界

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
商城系统--登录功能

1.需求:1.用户进入登录页面,没有注册过的,可以去注册,所以需要一个注册功能的接口.并且在注册成功之后,返回到登录页面,进行登录操作. 2.下面这两种情况,都提示”用户名或密码错误” (1)输入数据库中没有的用户名和密码 (2)输入合法的用户名(数据库中存在),但是密码错误 3.用户名和密码输入都合法,不给出任何提示,用户点击登录,直接进入主界面. 4.找回密码功能(未实
复制链接

扫一扫

专栏目录