WebStorm開發應用——前端頁面 2

相比于上一篇部落格 WebStorm開發應用——前端頁面，這次又做了一個登入頁面。就是這個樣子！

  我們都知道登入時賬号和密碼和如果正确的話，就跳轉到相應頁面上。那麼該如何實作這一功能呢？如果是賬戶密碼固定的話，利用js腳本可以這樣寫來做一個簡單判斷：

var useName = document.querySelector("#L_account").value;
          var pwd = document.querySelector("#L_pwd").value;
            if (useName =="hskj" && pwd =="123456" ){
              location.href = "DropletService.html";
            }else{
                alert("賬号或密碼不正确")
            }
           

  但是真實情況肯定不可能是這樣的，且不說賬号名密碼不可能是隻有這一個（是以不能寫死），就從安全性考慮這也很幼稚的，因為js腳本内容可以輕易地在頁面浏覽器通過審查元素的方式看到，是以賬号密碼暴露無疑。再者說前端是不可能知道賬号密碼是多少的，是以比較合适的做法應該是應從頁面擷取，然後和後端資料庫進行比較。

  這時，就不得不提一個比較好用的工具了 Ajax（Asynchronous JavaScript and XML）但在這之前，先聊聊什麼前端和後端。

  前端又叫用戶端，是用來展示資料的，你能看到的頁面，驚豔的也好醜陋的也罷，都是前端。web頁面（浏覽器）和app都可以充當用戶端 ，而寫前端的語言常見的比如H5，Android，iOS等。（H5具有跨平台的特性，功能較為強大，應用面光，是以也比較火熱）

  後端又叫服務端，是用來向前端提供資料的，需要資料庫的配合。常見的語言如java，php，go，.net，node.js，Python，c++等。

  前後端互動會用到各種協定，如http，tcp/ip，udp，這些協定就是用來互動資料。而Ajax就可以看做一個工具，前端向後端要資料，然後把資料解析，展示資料。

下面就是利用Ajax将資料從表單中收集然後發給伺服器，在資料庫中進行比對再傳回結果資料的過程：

<script>
        var btn = document.querySelector("#L_btn");
        btn.onclick = function (){
            var  userName = encodeURIComponent(document.querySelector("#L_account").value); //encodeURIComponent 可把字元串作為 URI 元件進行編碼。
            var pwd = encodeURIComponent(document.querySelector("#L_pwd").value);

            //第一步：建立一個請求對象（負責去服務端要資料）
            var xhr = new XMLHttpRequest();
            //第二步：建立與服務端的連接配接（找到哪個伺服器去要資料)
            xhr.open('post','https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/login');//baseURL告訴對象去哪個伺服器要資料 加個/login 一個伺服器好多資料
           //設定頭資訊，告訴伺服器讓資料以表單的形式傳遞過去
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            var par ="username="+userName+"&pwd="+pwd;
            //第三步：發送請求 把我的使用者名密碼發給服務端
            xhr.send(par);
            //第四步：接收伺服器傳回的資料
            xhr.onreadystatechange = function () {
                //xhr.readyState == 4 代表資料請求完成
                //xhr.status == 200 資料傳回成功

                if(xhr.readyState == 4 && xhr.status == 200){
                    var responseData = JSON.parse(xhr.responseText);//json串   JSON.parse() 方法用于将一個 JSON 字元串轉換為對象。
                    var str = responseData.data;
                    if (str == "登入成功"){
                        location.href = "DropletService.html";
                    }
                     else{
                        alert(responseData.data);
                    }
                }
            }
        }
    </script>
           

模拟的接口如下：

baseURL：https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c
登入：
    url: /login
    methods: post
    form-data參數：username   pwd     
    響應：json
       {
           "code": 1,   // 0失敗   1成功
           "data":"登入成功"   
       }
    form寫法：<form action="xxx" enctype="multipart/form-data">...</form>

   登入成功的操作 預設使用者名
        使用者名:admin   密碼:admin
        使用者名:hskj    密碼:123456
        使用者名:test    密碼:123456

   登入失敗：
        使用者名:aaa   密碼: 123456
        使用者名:bbb    密碼:123456
        使用者名:ccc    密碼:123456
           

同樣的道理在上篇部落格中 平台風采頁面Platform.html 是我們自己手打的文字，如果利用ajax擷取該如何寫呢？其實和上面的差不多，隻是不需要點按鈕來觸發，就不需要寫function（），直接寫在

<script/>

标簽裡就好啦~如下

<article>
    <h3 id="title"></h3>
    <h4 id="subTitle"></h4>
    <p id="info"></p>
    <script>

            //第一步：建立一個請求對象（負責去服務端要資料）
            var xhr = new XMLHttpRequest();
            //第二步：建立與服務端的連接配接（找到哪個伺服器去要資料)
            xhr.open('get','https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/aboutus');//baseURL告訴對象去哪個伺服器要資料 加個/login 一個伺服器好多資料
            //設定頭資訊，告訴伺服器讓資料以表單的形式傳遞過去
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            //第三步：發送請求 把我的使用者名密碼發給服務端
            xhr.send();
            //第四步：接收伺服器傳回的資料
            xhr.onreadystatechange = function () {
                //xhr.readyState == 4 代表資料請求完成
                //xhr.status == 200 資料傳回成功

                if(xhr.readyState == 4 && xhr.status == 200){
                    var responseData = JSON.parse(xhr.responseText);//json串   JSON.parse() 方法用于将一個 JSON 字元串轉換為對象。
                    var obj = responseData.data;

                    var h3 = document.getElementById("title");
                    var h4 = document.getElementById("subTitle");
                    var p = document.getElementById("info");

                    h3.innerHTML = obj.title;
                    h4.innerHTML = obj.subTitle;
                    p.innerHTML = obj.info;
                }
            }

    </script>
</article>
           

模拟接口：

baseURL：https://mockapi.eolinker.com/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c

公司資訊：
    url: /aboutus
    methods: get 
    參數：無
    響應：josn
       {
           "code": 1,   // 0失敗   1成功
           "data":{...}   // 公司資訊資料
       }

           

這樣寫在script裡在頁面一開始時就會加載進來，從後端直接擷取資料，這樣就便捷多了！ 子產品化思想，降低了依賴性。

然後，我們把登入頁面和前幾個頁面聯系起來，可以在 我的小滴頁面MyDroplet.html 頁面把登出按鈕寫上邏輯，點選跳轉到index.html頁面。可以用js這樣寫：

<button onclick="exit()">登出</button>
        <script>
            function exit(){
                location.href = "index.html"
            }
        </script>
           

  但是點選會發現并沒有起作用，這是為什麼呢？注意到之前我們的

z-index: -1;

這個了嗎，就是這個導緻跳轉按鈕出了問題，相當于按鈕在螢幕的後方，像是被一次玻璃隔開了，看得見摸不着。怎麼解決呢，把這行代碼删除，在css樣式裡的header标簽裡追加上一行

z-index: 1;

即可。這是一種山不過來我便過去的思想，如果按鈕低于螢幕影響點選的話，那麼就讓标題欄高出螢幕即可！這樣也不會在滾動頁面時由于相對定位而導緻标題欄被覆寫。反正标題欄也不具有互動性~