1. 有會web前端的嗎,問一下這個登錄頁面該用什麼方法做。
前端【使用響應式設計bootstrap】
jquery表單驗證加ajax請求後台用戶及密碼驗證
後台【可使用thinkphp】
驗證碼直接調用tp自帶的驗證碼插件
2. web前端怎麼寫登錄頁面,求個demo包括後端驗證。謝謝
我寫了個Demo 你可以看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<p>姓名:<input type="text" id="tel"></p>
<p>密碼:<input type="password" id="pwd"></p>
<p class="pl40"><input type="submit" id="login" ></p>
</body>
<script>
$("#login").click(
function (){
var tel=$("#tel").val();//獲取頁面中登錄名和密碼
var pwd=$("#pwd").val();
if(tel==""|| pwd==""){//判斷兩個均不為空(其他判斷規則在其輸入時已經判斷)
alert("手機號密碼均不能為空!")
return false;
}else{//以上均符合要求,則調用登錄esb介面
$.ajax({
url:'login.json',//相對應的esb介面地址
type:'post',
data:{"mobile":tel,"password":pwd},//向伺服器(介面)傳遞的參數
success:function(data){//伺服器(介面)返回來的數據
if(data.mobile==tel&&data.password==pwd){//如果返回來的信息說明提交的信息為正確的
window.location.href='logon.html';//正確登錄後頁面跳轉至
}
else{//如果返回來的信息說明提供的信息為錯誤的
if(tel != data.tel){//判斷是用戶名還是密碼錯誤,提示相應信息
alert(data.message);
$("#tel").val("");
$("#pwd").val("");
return false;
}
if(pwd != data.pwd){
alert(data.message);
$("#pwd").val("");
return false;
}
}
}
})
}
}
);
/*直接點擊enter免除手動點擊登錄按鈕*/
$(document).keyup(function(event){
if(event.keyCode ==13){
$("#login").trigger("click");
}
});
</script>
</html>
json文件內容
{
"mobile":"admin",
"password":"123",
"message":"用戶名或密碼錯誤"
}
3. Web前端工程師應該知道的經典代碼
今天小編要跟大家分享的文章是關於Web前端工程師應該知道的經典代碼。Web工程師作為一名程序員,每天坐在電腦前敲敲打打那些重復重復再重復的語句,習慣性的思維總是被套進去,有些時候很容易把簡單的事情想復雜了!不過,我們反其道而行之,新手們只要是把下面的語句牢記,很多情況下都是會事半功倍的!下面就讓我們一起來學習一些這些代碼都是什麼吧,希望能夠對你有所幫助。
1.將徹底屏蔽滑鼠右鍵,無右鍵菜單
也可以用於網頁中Table框架中no
2.取消選取、防止復制
3.不準粘貼
4.防止復制
5.IE地址欄前換成自己的圖標
說明:關於favicon.ico文件的製作。你可以先在FW中做一個圖片,屬於你自己站點一個小圖標。然後在ACD
see將文件屬性改為*.ico,然後將你做的*.ICO文件傳到你的伺服器目錄中,然後就可以使用以上代碼來實現,當別人登陸你的站點時,地址欄里使用的就是你自定義的圖標了。
6.可以在收藏夾中顯示出你的圖標
說明:製作方法和上面的一樣。只是顯示的方式不同,這個是在別人收藏你的網頁地址時顯示的個性圖標。
7.關閉輸入法
說明:這段代碼是在表格提交時用到的。也就是在輸入數據時不可以使用其他輸入法模式。
8.永遠都會帶著框架
說明:frames.htm為你的網頁,這也是保護頁面的一種方法
9.防止被人frame
10.網頁將不能被另存為
說明:
11.查源文件
onclick=window.location='view-source:'+target=_blank>#/test.htm'>
12.COOKIE腳本記錄,有很大的用處哦functionget_cookie(Name){
varsearch=Name+=
varreturnvalue=;
if(documents.cookie.length>0){
offset=documents.cookie.indexOf(search)
if(offset!=-1){//ifcookieexists
offset+=search.length
//setindexofbeginningofvalue
end=documents.cookie.indexOf(;,offset);
//setindexofendofcookievalue
if(end==-1)
end=documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset,end))
}
}
returnreturnvalue;
}
functionloadpopup(){
if(get_cookie('popped')==''){
openpopup()
documents.cookie=popped=yes
}
}
說明:以上是JS代碼,請自己加起始符和結束符
13.內框架