前端實現淘寶的登錄注冊功能_前端怎麼實現登錄和注冊

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. 前端怎麼實現登錄和注冊

登錄注冊設計到數據儲存和讀取，需要後端代碼的支持下才能前端

前端實現淘寶的登錄注冊功能

與前端實現淘寶的登錄注冊功能相關的內容