登录界面设计_html登录界面设计代码 - CSDN
精华内容
参与话题
  • 登录界面设计与实现

    千次阅读 2018-10-24 21:50:22
    效果图 1、主要的html代码如下:其中有一些不规范的地方请勿模仿,譬如JS代码也夹杂在其中,本人建议尽量把JS代码单独写在一个文件中,有利于后期维护,当然代码看起来也... <form action="login"...

    效果图

    1、主要的html代码如下:其中有一些不规范的地方请勿模仿,譬如JS代码也夹杂在其中,本人建议尽量把JS代码单独写在一个文件中,有利于后期维护,当然代码看起来也美观

    <form action="login">
    				<div class="jx-l-user">
    					<div class="jx-l-tt" style="">
    						<span>账号登录</span>
    					</div>
    					<div class="jx-l-ui">
    						<div id="u-name" class="jx-user">
    							<input id="username" class="u-input" type="text" placeholder="用户名" name="username" /> <b style="background-image: url(img/uh.png);"></b>
    							<br>
    							<span id="username-message" style="color:red;"></span>
    							<script type="text/javascript">
    								$("#username").blur(function () {
    									if ($("#username").val() != "") {
    										$("#username-message").empty();
    									}
    								});
    							</script>
    						</div>
    						<div id="u-pass" class="jx-user">
    							<input id="password" class="u-pass" type="password" placeholder="........" name="password" /> <b style="background-image: url(img/pw.png);"></b><br>
    							<span id="password-message" style="color:red;"></span>
    							<script type="text/javascript">
    								$("#password").blur(function () {
    									if ($("#password").val() != "") {
    										$("#password-message").empty();
    									}
    								});
    							</script>
    						</div>
    						<div class="jx-table">
    							<div class="row">
    								<div class="cell" id="cell">
    									<input id="u-ver" type="text" name="input" placeholder="验证码" />
    									<span id="code_message" style="color:red;"></span>
    									<script type="text/javascript">
    										$("#u-ver").blur(function () {
    											if ($("#u-ver").val() != "") {
    												$("#code_message").empty();
    											}
    										});
    									</script>
    								</div>
    								<div class="cell" style="width: 58%;">
    									<img id="verificationImg" alt="验证码" onclick="load()" />
    									<a href="javascript:reload();"><label>换一张</label></a>
    								</div>
    							</div>
    							<div class="row">
    								<div class="cell" style="color: #FFFFFF;">
    									<input type="checkbox" id="remember_me" />记住账号
    								</div>
    								<div class="cell">
    									<input id="login" type="button" class="login" value="登录" onclick="submitlogin()">
    								</div>
    							</div>
    						</div>
    						<div id="error_login" style="color:red;text-align: center;line-height: 10px;"></div>
    					</div>
    				</div>
    			</form>

    2、jQuery实现用户名,密码,验证码非空判定

    if ($('#username').val() == "") {
    				$("#username-message").html("请输入用户名");
    				return false;
    			}
    			if ($('#password').val() == "") {
    				$("#password-message").html("请输入密码");
    				return false;
    			}
    			if ($('#u-ver').val() == "") {
    				$("#code_message").html("请输入验证码");
    				return false;
    			}

    3、jQuery加载验证码的方式

    //加载验证码图片
    		$(document).ready(function () {
    			load();
    		});
    
    		function load() {
    			$("#verificationImg").attr("src", "imageServlet?date=" + new Date());
    		}
    		function reload() {
    			load();
    		};

    4、后台生成验证码代码

    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.image.BufferedImage;
    import java.io.IOException;
    import java.util.Random;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    /**
     * 生成验证码图片
     */
    public class ImgVerficationServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		request.setCharacterEncoding("utf-8");
    		response.setCharacterEncoding("utf-8");
    		response.setContentType("image/JPG");
    		BufferedImage bfi = new BufferedImage(80,25,BufferedImage.TYPE_INT_RGB);
    		Graphics g = bfi.getGraphics();
    		g.fillRect(0, 0, 80, 25);
    		
    		//验证码字符范围
    		char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".toCharArray();
    		Random r = new Random(); 
    		int index;  
    				StringBuffer sb = new StringBuffer(); //保存字符串
    				for(int i=0; i<4; i++){
    					index = r.nextInt(ch.length);
    					g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
    					Font font = new Font("宋体", 30, 20);
    					g.setFont(font);
    					g.drawString(ch[index]+"", (i*20)+2, 23);
    					sb.append(ch[index]);
    				}
    				
    				// 添加噪点
    			    int area = (int) (0.02 * 80 * 25);
    			    for(int i=0; i<area; ++i){
    			        int x = (int)(Math.random() * 80);
    			        int y = (int)(Math.random() * 25);
    			        bfi.setRGB(x, y, (int)(Math.random() * 255));
    			    }
    			    
    			  /*//设置验证码中的干扰线
    			    for (int i = 0; i < 6; i++) {  
    				      //随机获取干扰线的起点和终点
    				      int xstart = (int)(Math.random() * 80);
    				      int ystart = (int)(Math.random() * 25);
    				      int xend = (int)(Math.random() * 80);
    				      int yend = (int)(Math.random() * 25);
    				      g.setColor(interLine(1, 255));
    				      g.drawLine(xstart, ystart, xend, yend);
    				    }*/
    			   HttpSession session=request.getSession();  //保存到session
    				session.setAttribute("verificationCode", sb.toString());
    				ImageIO.write(bfi, "JPG", response.getOutputStream());  //写到输出流
    	}
    	
    	/**
    	   * 获取随机的颜色值,r,g,b的取值在Low到High之间
    	   * @param L 左区间
    	   * @param R 右区间
    	   * @return 返回随机颜色值
    	   */
    	  private static Color interLine(int Low, int High){
    	    if(Low > 255)
    	    	Low = 255;
    	    if(High > 255)
    	    	High = 255;
    	    if(Low < 0)
    	    	Low = 0;
    	    if(High < 0)
    	    	High = 0;
    	    int interval = High - Low; 
    	    int r = Low + (int)(Math.random() * interval);
    	    int g = Low + (int)(Math.random() * interval);
    	    int b = Low + (int)(Math.random() * interval);
    	    return new Color(r, g, b);
    	  }
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		doGet(request, response);
    	}
    
    }
    

    5、登录ajax请求

    $.ajax({
    				url: "login.da",//servlet路径
    				type: "post",//提交方式
    				dataType: "json",
    				async: true,
    				contentType: "application/x-www-form-urlencoded;charset=utf-8",
    				data: {
    					"username": $('#username').val(),
    					"password": $('#password').val(),
    					"u-ver": $('#u-ver').val(),
    				},//传入的数据为输入的登录名
    				//传入验证码
    				success: function (data) {
    					if (data == "0") {
    						window.location.href = "index.html";
    					}
    					if (data == "2") {
    						//alert("用户名或密码错误,请重新登陆");
    						$("#error_login").html("用户名或密码错误,请重新登陆");
    						$('#username').empty();
    						$('#username').empty();
    					}
    					if (data == "1") {
    						//验证码错误
    						$("#code_message").html("验证码错误");
    						$('#u-ver').val() = "";
    						load();
    					}
    				}
    			})

     6、后台Servlet代码

    public class LoginServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    	
    	//执行登录用户密码验证
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//设置接收参数的字符集
    				request.setCharacterEncoding("utf-8");
    				response.setContentType("text/html");
    				response.setCharacterEncoding("utf-8");
    				PrintWriter out=response.getWriter();
    				
    				String username=request.getParameter("username");
    				String password=request.getParameter("password");
    				//获取前台输入的验证码
    				String code=request.getParameter("u-ver");
    				
    				String path=request.getRequestURI();
    				String pathstring=path.substring(path.lastIndexOf("/"), path.lastIndexOf("."));
    				
    				//得到数据源工厂实例
    				LoginDao loginDao=(LoginDao) DbFactory.getInstance();
    				JSONObject resultObject=new JSONObject();
    				String message = null;
    				//登陆
    				if(pathstring.equals("/login")){
    					//获取session中的属性
    					HttpSession session=request.getSession();
    					String verficationCode=(String) session.getAttribute("verificationCode");
    					try{
    						if(loginDao.validatelogin(username, password)){
    							//登陆成功给session赋值
    							if(verficationCode.equalsIgnoreCase(code)){
    								session.setAttribute("userinfo",username);
    								message="0";
    							}else{
    								message="1";
    							}
    						}else {
    							message="2";
    						}
    					}catch(Exception ex){
    						ex.printStackTrace(); 
    					}finally {
    						out.println(message);
    						out.close();
    					}
    				}
    	}

    7、Dao层数据

    public class LoginDaoImpl implements LoginDao{
    
    	public boolean validatelogin(String userName, String password) {
    		Connection conn=null;
    		PreparedStatement prepareStatement=null;
    		ResultSet result=null;
    		conn=DbUtils.getConnection();
    		boolean flag=false;
    		try {
    			prepareStatement=conn.prepareStatement("select employeeName,password from employee where employeeName=? and password=? ");
    			prepareStatement.setString(1,userName);
    			prepareStatement.setString(2,password);
    			
    			result=prepareStatement.executeQuery();
    			flag=result.next();
    		}catch(Exception ex){
    			ex.printStackTrace();
    		}finally{
    			if (conn!=null) {
    				DbUtils.close(result, prepareStatement, conn);
    			}
    		}	
    		return flag;
    	}
    }
    

    8、web.xml配置文件

     

    展开全文
  • 36个漂亮的登录界面设计

    万次阅读 2012-05-15 14:18:47
    原文:36个漂亮的登录界面设计 译自: dzineblog 版权所有,转载请注明出处,谢谢!! 在我们设计一个登录框或登录页面的时候,会产生很多疑惑,比如,它应该写成“login”?“log in”?还是“sign in”?...
    http://www.qianduan.net/page/32

    原文:36个漂亮的登录界面设计
    译自: dzineblog
    版权所有,转载请注明出处,谢谢!!

    在我们设计一个登录框或登录页面的时候,会产生很多疑惑,比如,它应该写成“login”?“log in”?还是“sign in”?忘记密码应该怎么写?加入一个“取消”按钮怎么样?应该保持登录或者在本机上记住我?布局应该是水平的还是垂直的?登录应该是一个独立的页面还是类似于弹出窗口?——为了帮助你设计登录界面,这里我收集了一些漂亮的登录界面设计,希望你能喜欢这些设计并从中获取灵感,然后设计出适合自己的登录界面设计方案。

    Mobile ME

    Straw Poll

    Scrapblog

    Kiss Metrics

    20 X 200

    Devunity

    Acrobot

    97 Bottels

    The Mattinator

    Mind Meister

    Mint

    Freelance suite

    Gist

    Cars

    College Humor

    Survs

    unblbab

    Virb

    Tuts +

    Tumblr

    Hello How Are You

    Tick

    MMO Site

    Chris Woods

    Go Plan

    Joost

    Media Temple

    Nasi Briyani

    Restaurantica

    Grooveshark

    Product Planner

    Good Barry

    Later This

    Mochi Ads

    99Designs

    Wufoo

    我家久久

    wojia99


    展开全文
  • 一个简单的登录界面设计

    万次阅读 2018-01-22 15:21:10
    第一步:设计数据库  这一步 比较简单 不做说明 看截图 第二步:创建实体User类 第三步:创建login.jsp文件 第四步:再创建注册页面register.jsp 第五步:再创建utils层,公共的工具层Dbuntil.java; 第六...

    第一步:设计数据库

     这一步  比较简单 不做说明    看截图

    第二步:创建实体User类

    第三步:创建login.jsp文件

    第四步:再创建注册页面register.jsp

    第五步:再创建utils层,公共的工具层Dbuntil.java;

    第六步:然后创建dao层数据交互层的接口和实现类

    interface:

    UserDao 

    UserDaoImpl 

    第七步:再创建servlet层进行登陆的业务逻辑处理(由于省去了service层,所以在servlet层进行业务逻辑处理了)

    UserLoginServlet 

    第八步:创建servlet层进行注册的业务逻辑处理

    UserRegisterServlet 


    具体代码可以通过下载资源找到。

    找不到或者没有积分的朋友+Q群5169415  联系群主即可。



    展开全文
  • 【0201】用户登录界面设计

    千次阅读 2018-09-26 19:55:30
    用户登录界面简单版,成品如图所示: 步骤讲解 一、分析布局 从图中可以看出该界面有三层布局,最外层线性布局,将内层水平和垂直都居中,内层为线性布局垂直分布,“欢迎登录”的TextView可以直接放在第二层,也...

    用户登录界面简单版,成品如图所示:在这里插入图片描述

    步骤讲解
    一、分析布局
    从图中可以看出该界面有三层布局,最外层线性布局,将内层水平和垂直都居中,内层为线性布局垂直分布,“欢迎登录”的TextView可以直接放在第二层,也可以单独加一层布局,用户和输入框,密码和输入框,登录和取消都是使用了相对布局,简化图如下图所示:在这里插入图片描述

    二、实际操作
    1、界面背景设置
    1.1首先准备一张手机壁纸
    1.2将该图片复制粘贴到mipmap中
    在这里插入图片描述
    1.3找到activity_main.xml文件,在最外层布局中添加红框中的代码background
    在这里插入图片描述
    2.布局嵌套
    最外层设为线性布局,第二层设为线性布局垂直分布,第三层全设置为相对布局。在这里插入图片描述
    3.布局属性内容设置
    3.1最外层添加gravity=“center”确保内层内容居中显示。在这里插入图片描述
    3.2第二层设置属性方向为垂直方向(android:orientation=“vertical”)内部内容居中显示,宽和高都设置为包围内容(wrap_content) 添加第一个标签“欢迎登录)
    在这里插入图片描述
    在这里插入图片描述
    3.3添加相对布局标签,内容如图(一个标签,一个输入框)在这里插入图片描述
    设置标签在输入框的左边或者输入框在标签的左边都可以。使用(layout_toRightOf或者layout_toLeftOf)
    剩下两个相对布局如法炮制即可。字体大小颜色根据自己喜好修改。

    展开全文
  • 转 99个漂亮的注册和登录页面设计(附PSD) 原文地址:http://www.qianduan.net/99-beautiful-free-signin-login-and-signup-psd-designs.html 整理自:99 Beautiful Free Sign-In (Login) and ...
  • 安卓实战之登录界面设计

    千次阅读 2018-11-10 14:00:23
    安卓实战之登录界面设计 运行环境: windows10+ Android Studio2.3.3 +API 21 (适用android 5.0以上版本的手机) (1)知识储备 (知识储备链接:https://blog.csdn.net/biggerchong/article/details/83015407...
  • 公司美工做的一个登录页面的HTML文档,有需要的朋友可以拿去用用。纯属白送哦。
  • 登陆页面网页ui设计用户登录页面设计
  • 网页制作:一个简易美观的登录界面

    万次阅读 多人点赞 2018-09-28 17:27:17
    登录界面其实在大三的时候就有做过,但是当时做的界面超级low,主要区别在于有无css,由于公司的设计要求,对于该界面的很多细节处理实在不容易。所以,还是想要写点东西记录一下。 先截个图,展示一下效果吧: ...
  • 使用java+Mysql数据库做一个简单的登录窗口界面

    万次阅读 热门讨论 2018-12-12 17:56:19
    原文:点击打开链接
  • APP登录界面UI设计欣赏

    万次阅读 2016-01-29 17:50:23
    今天分享的是,17个优秀的APP登录界面UI设计效果欣赏,风格都非常的前卫,有很强的现代感,有的个性十足,APP登录界面设计也不好设计,好设计的地方是元素少容易排版,不好设计的地方是要做个性化很难,而今天分享...
  • HTML(css+div)登录界面

    万次阅读 多人点赞 2020-05-08 19:38:56
    HTML(css+div)登录界面
  • Android基本布局和登录界面设计

    万次阅读 2018-06-19 20:15:51
    设计登录界面是我们最先接触的时候基本都要涉及到的一个过程,这之前我们先把基本的只是介绍一下,这里我们借鉴了一些其他博主的介绍。 主要内容 1、EditText概述:文本编辑框控件,继承自TextView类,用来进行...
  • android一个登陆界面设计

    万次阅读 2011-12-04 15:42:20
    说起登陆界面设计,大家可能都会说这个挺简单的的啊,弄个布局,加几个控件一个登陆界面就出来了,但我今天想说一下自己在设计一个登陆界面时遇到的问题,而我这个登陆界面设计重点就是在一个水平布局上放了一个...
  • C# 界面开发-登陆窗体(包括欢迎界面) ...我们在开发一个需要身份验证系统软件的时候,一个必不可少的界面便是登陆界面,只有我们在登陆界面中输入正确的用户名和密码,才能登陆到主界面,有时
  • 登录界面测试用例设计

    万次阅读 多人点赞 2017-02-08 21:32:02
    登录界面测试用例设计   一、界面测试点:  1、界面设计风格是否与UI的设计风格统一;  2、界面中的文字简洁易懂;  3、界面中没有错别字;  二、用户名与密码在输入时,要考虑:  1、...
  • Qt利用ui制作登录界面

    千次阅读 2017-11-08 22:14:43
    描述:用QT的ui编辑器制作程序的登录界面...用Qt创建ui设计类,在ui设计界面中实现上面的界面。 (3)具体实现 1.账号输入框: 包括两个部分:外部的QLabel和内部的QLineEdit. 外部的QLabel: 实现方法:创建外部的QLa
  • Android漂亮好看的登陆,注册界面!程序源码

    千次下载 热门讨论 2020-07-30 23:32:27
    Android漂亮好看的登陆,注册界面
  • 用QT实现简单请求登陆界面设计

    万次阅读 2017-04-05 18:35:23
    mainWindows.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include #include #include #include class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent
  • HTML5+CSS3 精美登陆界面源码

    千次下载 热门讨论 2020-07-30 23:30:25
    3个很精美的登陆界面,全都是用HTML5+CSS3开发的,所以可能不适合低版本IE浏览器。大家可以下来看看,做的超级漂亮的。
1 2 3 4 5 ... 20
收藏数 54,864
精华内容 21,945
关键字:

登录界面设计