eclipse + html 简单实现登录功能

2022-04-28 14:35:46 阅读：179 来源： 互联网

标签：account String 登录 eclipse html password margin 我们

用到的软件：eclipse

首先我们先创建一个项目：因为我们要实现动态页面，所以我们先点击左上角File--New--other,在Wizard中输入：Dyn, 我们就可以看到Web文件夹下有一个Dynamic Web Project ，点击Next,写入项目名称，就可以创建一个动态Web项目。

　　我们的html要放在项目中WebContent文件夹下，注意不要放到WEB-INF的文件夹下，否则会起到过滤器的作用，也就是说看不到该页面。放进去之后应该是这样的效果：，那么在项目里，我们需要先导入几个工具类。在这个文件夹下写我们的java代码。首先创建一个package，用来存放我们的工具类，，上面是连接数据库的工具类，下面有一些数据库中封装的方法啊，可以帮助我们简化代码的书写。在WEB-INF的lib目录下我们还需要导入这样的一个jar包，可以帮助我们在写servlet中调用一些方法。

　　在准备完成工作之后，我们先看登录的html，表头肯定要先引入相应的css，，引入css的时候要查看你的路径，如果按照我的html的存放位置的话，是和WEB-INF文件夹同级的，这个时候我把内容给大家看一下。同时我们还要引入jquery.js，这个也是封装了很多类，简化我们的书写

css部分：

* {
    margin: 0;
    padding: 0;
}



.dl_box {
    border: 1px solid red;
    height: 300px;
    width: 400px;
    margin-top: 150px;
    margin-left: 550px;
}

.dl_box .item {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 40px auto;
}

.dl_box .double {
    display: flex;
    width: 80%;
    justify-content: space-between;
    margin-top: 20px;
    margin-left: 40px;
}

.dl_box .btn {
    width: 80%;
    margin-left: 40px;
}

.dl_box .btn .login {
    width: 320px;
    margin: 0 auto;
    cursor: pointer;
}

html主体部分：

<body>
    <div class="dl_box">
        <div class="item">
            <span>用户名：</span>
            <input type="text" class="account">
        </div>
        <div class="item">
            <span>密码：</span>
            <input type="text" class="password">
        </div>
        <div class="btn">
            <input type="button" class="login" value="登录">
        </div>
        <div class="double">
            <a href="register.html">注册</a>
            <a href="">忘记密码</a>
        </div>

    </div>
</body>

　　将这两行代码引入eclipse中就可以实现上图的页面了，因为我们要实现登录，所以我们要使用以下代码：

<script>
    $(".login").on("click",function(){ //给login按钮添加点击事件
    	var account = $(".account").val();//获取输入的账号
    	var password = $(".password").val();//获取输入的密码
        //发起ajax请求get
        $.ajax({
        	url:"loginServlet?action=login&account="+account+"&password="+password,//请求路径  loginServlet为servlet中的

        	type:"get",//请求方式 get 
        	success:function(data){//请求成功之后执行的函数，数据在data包里面放着
        		if(data.code>0){
        		alert("登录成功")
        		location.href="content.html"
        		}else{
        			alert("登陆失败，请检查用户名或密码！")
        		}
        	},
        	error:function(){
        		alert("请联系管理员")
        		}
        	})
     	})
  
    
    
    </script>

　　注意，这段代码应该在<body>标签的下方书写，言因为要等文档加载完了之后才能执行

我们在src文件夹下继续创建一个package用来存放我们的servlet，创建一个servlet之后，我们导入如下代码：

request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text=json;charset=utf-8");
		
		String action = request.getParameter("action");
		String json="{}";
		System.out.println(action);
		switch(action) {
		case "login":
			String account = request.getParameter("account");
			String password = request.getParameter("password");
			String sql="select count(*) from user where account=\""+account+"\" and password=\""+password+"\"";
			int res = MysqlUtil.getCount(sql);
			String msg = res>0?"登录成功":"登陆失败";
			json = "{\"code\":" + res + ",\"msg\":\"" + msg + "\"}";
			System.out.println(sql);
			break;
		
		}
		response.getWriter().write(json);

　　注意，是在

doGet方法之下，因为我们发起的是get请求。就可以实现登录功能。（数据库需要自行创建，在DBConnection中连接）

carProject为表的名字，password为数据库密码。

如果读者没有相应的jar包或者有不懂的地方都可以加QQ：2322383443 欢迎大家留言

标签：account,String,登录,eclipse,html,password,margin,我们
来源： https://www.cnblogs.com/aww-1314/p/16202693.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

eclipse + html 简单实现登录功能