使用Ajax+jQuery來實現前端收到的數據在console上顯示+簡單的主頁設計與bootstrap插件實現圖片輪播


1.實現前端輸入的數據在console上顯示 
上一篇是解決了在前端的輸入信息在cygwin上顯示,這次要給前台們能看見的數據,因為數據庫里插入的數據少,所以寫的語句翻來覆去就那幾個詞,emmm···當然實現了個不靠譜的,在前台還能看見用戶密碼 ·····功能是這個意思hhhh 
在register也就是注冊界面部分的代碼:

 <script>
            $('#submit').on("click ", function () { var a = $('#login input[name="username"]')[0] if (a.value.length == 0) { alert('郵箱賬號未輸入!') return false } var p = $('#login input[name="password"]')[0] if (p.value.length == 0) { alert('密碼未輸入!') return false } console.log(a.value) console.log(p.value) $.ajax({ url: '/', type: 'POST', data: { username: a.value, password: p.value }, dataType: 'json' }) .success(function (res) { console.log(res) }) }) </script>

這里我還犯了非常尷尬的錯誤,因為HTML底子太弱,在#調用login標簽的時候寫完一運行發現一直request error 急的直冒汗,后來才知道要在用戶輸入的用戶名和密碼部分有id=login的標簽包圍起來才能去調用它,而且,還知道了div標簽的屬性:id和name,在console上的顯示結果: 
這里寫圖片描述

2.注冊和登錄頁面做完了 下面就是做個主頁了,看了菜鳥教程的主頁排版,用了table標簽簡單的布了局,之后可能還是會改,我覺得還是很丑~~ 
這里寫圖片描述
hhhh我就是這么有勇氣
~~~ 
上面還有兩塊的登錄和注冊 明天多做一點 
3.bootstrap插件實現圖片輪播

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> --> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

把想要的圖片放在文件夾里,之前的static就可以 后面粘上每個圖片的路徑,就可以了。 
4.每次運行都有一個ico的提醒404 看着好別扭 就找了個jpg格式的用在線轉換器轉成了ico格式的,之后把ico格式的圖片放在static目錄下再在head標簽中寫上下面的語句,就OK了;

<link rel="shortcut icon" href="../static/bitbug_favicon.ico"> 

今天的總結就到這里啦,還有一個前台顯示在數據庫上的還沒弄懂,哭···


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM