前端实现淘宝的登录注册功能_前端怎么实现登录和注册

A. 网站的用户注册与登陆是怎样实现的

用户注册：在数据库中建立表分别的用户名和密码表，当你注册的时候你所填写的信息就会进入到数据库中的对应的表单中。

登入：根据填写的ID在数据库中调取数据，对照密码是否相等，相等则登入成功。

需要学习：数据库，熟练运用sql语句，熟悉PHP语言，熟悉web前端基本操作。

已经成为互联网的品牌、网上商标保护必备的产品之一。通俗的说，域名就相当于一个家庭的门牌号码，别人通过这个号码可以很容易的找到你。以一个常见的域名为例说明，网址是由二部分组成，标号“”是这个域名的主域名体，而最后的标号“com”则是该域名的后缀，代表的这是一个com国际域名，是顶级域名。而前面的www.是网络名，为www的域名。

DNS规定，域名中的标号都由英文字母和数字组成。每一个标号不超过63个字符，也不区分大小写字母。标号中除连字符（-）外不能使用其他的标点符号。级别最低的域名写在最左边，而级别最高的域名写在最右边。

空间

常见网站空间：虚拟主机，虚拟空间，独立服务器，云主机，VPS。

虚拟主机是在网络服务器上划分出一定的磁盘空间供用户放置站点、应用组件等；提供必要的站点功能、数据存放和传输功能。所谓虚拟主机，也叫“网站空间”，就是把一台运行在互联网上的服务器划分成多个“虚拟”的服务器。每一个虚拟主机都具有独立的域名和完整的Internet服务器（支持WWW、FTP、E-mail等）功能。虚拟主机是网络发展的福音，极大的促进了网络技术的应用和普及。同时虚拟主机的租用服务也成了网络时代新的经济形式。虚拟主机的租用类似于房屋租用。

VPS即指虚拟专用服务器，是将一个服务器分区成多个虚拟独立专享服务器的技术。每个使用VPS技术的虚拟独立服务器拥有各自独立的公网IP地址、操作系统、硬盘空间、内存空间、CPU资源等，还可以进行安装程序、重启服务器等操作，与运行一台独立服务器完全相同。

B. HTML实现简单的登陆

最简单的方法也得是在后台连接数据库进行用户信息的判断，这是登录和注册的基本流程！设计出登录和注册的页面，做好你的前台验证工作，如非空，格式等验证；然后添加按钮方法，在后台进行数据库连接，然后判断用户的用户名是否存在，如果存在再判断密码是否正确！

C. 在一个页面点击登录或者注册在本页面弹出个登陆或注册的框框是怎么实现的

用javascript就可以实现
//关闭,父窗口弹出对话框,子窗口直接关闭
this.Response.Write("<script language=javascript>window.close();</script>");

//关闭,父窗口和子窗口都不弹出对话框,直接关闭
this.Response.Write("<script>");
this.Response.Write("{top.opener =null;top.close();}");
this.Response.Write("</script>");

//弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有
this.Response.Write("<script language=javascript>window.open('rows.aspx','newwindow','width=200,height=200')</script>");

//弹出窗口刷新当前页面
this.Response.Write("<script language=javascript>window.open('rows.aspx')</script>");
this.Response.Write("<script>window.open('WebForm2.aspx','_blank');</script>");

//弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)
this.Response.Write (" <script language=javascript>alert('注册成功'); window.window.location.href='WebForm2.aspx';</script> ");

//关闭当前子窗口,刷新父窗口
this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>");
this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>");

//子窗口刷新父窗口
this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");
this.Response.Write("<script>window.opener.location.href='WebForm1.aspx';</script>");

//弹出提示窗口.确定后弹出子窗口(WebForm2.aspx)
this.Response.Write("<script language='javascript'>alert('发表成功！');window.open('WebForm2.aspx')</script>");

//弹出提示窗口,确定后,刷新父窗口
this.Response.Write("<script>alert('发表成功！');window.opener.location.href=window.opener.location.href;</script>");

//弹出相同的一页
<INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)">

//
Response.Write("parent.mainFrameBottom.location.href='yourwebform.aspx?temp=" +str+"';");

<SCRIPT LANGUAGE="javascript">

</SCRIPT>

D. 动态html页面。用html实现注册和登录的一些问题。

登录页面 login.html

<!doctypehtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<title>login</title>
	<script>
	
		window.addEventListener('load',function(){
			
			varform=document.forms[0];

			form.addEventListener('submit',function(e){
			
				e.preventDefault();
				
				varuserName=form.userName.value;
				varpwd=form.pwd.value;
				
				varuserInfo=JSON.parse(localStorage.getItem(userName));
				
				if(userInfo&&userInfo.pwd===pwd)
					returnalert('登录成功!');
				
				
				alert('登录失败请先注册!');
				
			});
			
			document.getElementsByTagName('button')[0].addEventListener('click',function(e){
				
				e.preventDefault();
				
				location.href='regist.html';
				
			});
		});
		
	</script>
</head>
<body>
	<formaction="#">
		<inputname="userName"type="text"placeholder="账户名"required>
		<inputname="pwd"type="password"placeholder="密码"required>
		<inputtype="submit"value="登录">
		<button>注册</button>
	</form>
</body>
</html>

注册页面 regist.html

<!doctypehtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<title>regist</title>
	<script>
	
		window.addEventListener('load',function(){
			
			varform=document.forms[0];
			vargetUserInfo=function(){
			
				varvalue={};
			
				for(vari=0,len=form.elements.length;i<len;i++){
					
					varel=form.elements[i];
					
					if(/text|password/.test(el.type)){
						value[el.name]=el.value;
					}
						
				}
				
				returnvalue;
			};
			form.addEventListener('submit',function(e){
			
				e.preventDefault();
				
				varuserInfo=getUserInfo();
				
				localStorage.setItem(userInfo.userName,JSON.stringify(userInfo));
				
				alert('注册成功!');
				
			});
			
			document.getElementsByTagName('button')[0].addEventListener('click',function(e){
				
				e.preventDefault();
				
				varvalue=getUserInfo();
				varout=[];
				for(varnameinvalue)
					out.push(name+'='+value[name]);
				alert(out.join(','));
				
			});
		});
		
	</script>
</head>
<body>
	<formaction="#">
		<inputname="userName"type="text"placeholder="账户名"required>
		<inputname="pwd"type="password"placeholder="密码"required>
		<inputname="confirmPwd"type="password"placeholder="确认密码"required>
		<inputtype="submit"value="注册">
		<button>验证</button>
	</form>
</body>
</html>

E. 怎样用JavaScript实现html的登录注册

F. html要怎样实现注册和登陆功能

$uname = $_POST['username'];
$pword = $_POST['password'];
$uname = htmlspecialchars($uname);
$pword = htmlspecialchars($pword);
$uLength = strlen($uname);
$pLength = strlen($pword);
if ($uLength >= 10 && $uLength <= 20) {
$errorMessage = "";
}
else {
$errorMessage = $errorMessage . "Username must be between 10 and 20 characters" . "<BR>";
}
if ($pLength >= 8 && $pLength <= 16) {
$errorMessage = "";
}
else {
$errorMessage = $errorMessage . "Password must be between 8 and 16 characters" . "<BR>";
}
$user_name = "root";
$pass_word = "";
$database = "login";
$server = "127.0.0.1";
$db_handle = mysql_connect($server, $user_name, $pass_word);
$db_found = mysql_select_db($database, $db_handle);
if ($db_found) {
}

$SQL = "SELECT * FROM login WHERE L1 = $uname";
$result = mysql_query($SQL);
$num_rows = mysql_num_rows($result);
if ($num_rows > 0) {
$errorMessage = "Username already taken";
}
else {
}

G. 做前端，如淘宝或其它网站，网页中其中一个功能，怎么解析代码，知道这个功能用到哪些代码。求具体

HTML,CSS,JS，大多是这几种，其实不知你说啥，要看网页代码，浏览器里有查看源文件

H. 2、javascript+CSS+Html实现用户注册及登录的格式验证。在用户登录功能中试加入图片验证码功能

下面是关键代码，如果剩下的你都搞不懂，我就无语了

JS
<script type="text/javascript" language="javascript">
function reloadcodeOne(){//刷新验证码函数
var verify = document.getElementById('checkCodeImg');
verify.setAttribute('src', 'validateCode?dt=' + Math.random());
}
<script type="text/javascript" >

html
<p>
<label>验证码：</label>
<input class="code" value="请输入验证码" title="请输入验证码" name="rendCode" id="rendCode" onfocus="if (value =='请输入验证码'){value =''}" onblur="if (value ==''){value='请输入验证码'}" type="text" size="6" />
<span><img id="checkCodeImg" src="validateCodeServlet" onclick="javascript:reloadcodeOne();" alt="" width="75" height="24" /></span>
</p>

java代码
package com.hui.action.common;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.struts2.ServletActionContext;

import com.hui.action.base.BaseAction;

/**
* <p>
* 校验码控制器
* </p>
*
* @author liurong
* @version ValidateCodeServlet.java,v 0.1 2008-11-20 上午09:22:31 Administrator
* Exp
*/
public class ValidateCodeAction extends BaseAction {

private static final long serialVersionUID = 1L;

// 验证码图片的宽度。
private int width = 10;

// 验证码图片的高度。
private int height = 5;

// 验证码字符个数
private int codeCount = 5;

private int x = 0;

// 字体高度
private int fontHeight;

private int codeY;

/*char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'U', 'V', 'W',
'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '8', '9' };*/

char[] codeSequence = {'1', '2', '3', '4', '5', '6', '7', '8', '9', '0' };
HttpServletRequest req=ServletActionContext.getRequest();
HttpServletResponse resp=ServletActionContext.getResponse();

public String execute()
throws ServletException, java.io.IOException {
// 宽度
String strWidth = "70";
// 高度
String strHeight = "22";
// 字符个数
String strCodeCount = "5";
width = Integer.parseInt(strWidth);
height = Integer.parseInt(strHeight);
codeCount = Integer.parseInt(strCodeCount);
x = width / (codeCount);
fontHeight = height - 4;
codeY = height - 4;
// 定义图像buffer
BufferedImage buffImg = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
Random random = new Random();
// 将图像填充为白色
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height);

Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);
g.setFont(font);
g.setColor(Color.BLACK);
g.drawRect(0, 0, width - 1, height - 1);
g.setColor(Color.BLACK);
for (int i = 0; i < 15; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(8);
int yl = random.nextInt(8);
g.drawLine(x, y, x + xl, y + yl);
}
// randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
StringBuffer randomCode = new StringBuffer();
int red = 0, green = 0, blue = 0;
for (int i = 0; i < codeCount; i++) {
String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
red = 0;//random.nextInt(255);
green = 0;//random.nextInt(255);
blue = 0;//random.nextInt(255);
g.setColor(new Color(red, green, blue));
g.drawString(strRand, (i ) * x, codeY);
randomCode.append(strRand);
}
HttpSession session = req.getSession();
session.setAttribute("validateCode", randomCode.toString());

resp.setHeader("Pragma", "no-cache");
resp.setHeader("Cache-Control", "no-cache");
resp.setDateHeader("Expires", 0);
resp.setContentType("image/jpeg");

ServletOutputStream sos = resp.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.close();
return null;
}

public int getWidth() {
return width;
}

public void setWidth(int width) {
this.width = width;
}

public int getHeight() {
return height;
}

public void setHeight(int height) {
this.height = height;
}

public int getCodeCount() {
return codeCount;
}

public void setCodeCount(int codeCount) {
this.codeCount = codeCount;
}

public int getX() {
return x;
}

public void setX(int x) {
this.x = x;
}

public int getFontHeight() {
return fontHeight;
}

public void setFontHeight(int fontHeight) {
this.fontHeight = fontHeight;
}

public int getCodeY() {
return codeY;
}

public void setCodeY(int codeY) {
this.codeY = codeY;
}

public char[] getCodeSequence() {
return codeSequence;
}

public void setCodeSequence(char[] codeSequence) {
this.codeSequence = codeSequence;
}

public HttpServletRequest getReq() {
return req;
}

public void setReq(HttpServletRequest req) {
this.req = req;
}

public HttpServletResponse getResp() {
return resp;
}

public void setResp(HttpServletResponse resp) {
this.resp = resp;
}

}

I. 在自己制作的网页中,如何实现“新用户注册”与“登录”功能

这个不能分别叫做某一功能，而是一个系统的功能。首先在“新用户注册”应明确需要那些必要的注册信息，然后，在“登录”后又应该给予该用户什么样的权限，这两个应该是相互关系和作用的一系统工程。具体到网页上来实现，首先你需要设计相关的页面以及编写程序代码和数据库等。

J. 前端怎么实现登录和注册

登录注册设计到数据储存和读取，需要后端代码的支持下才能前端

前端实现淘宝的登录注册功能

与前端实现淘宝的登录注册功能相关的内容