WebStorm开发应用——前端页面 2

最新推荐文章于 2023-12-01 14:13:23 发布

XuXinCHN

最新推荐文章于 2023-12-01 14:13:23 发布

阅读量1.2k

点赞数 1

分类专栏： WebStorm 前端页面文章标签： html5

本文链接：https://blog.csdn.net/qq_42069571/article/details/106363288

版权

WebStorm 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端页面

2 篇文章 0 订阅

订阅专栏

相比于上一篇博客 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;即可。这是一种山不过来我便过去的思想，如果按钮低于屏幕影响点击的话，那么就让标题栏高出屏幕即可！这样也不会在滚动页面时由于相对定位而导致标题栏被覆盖。反正标题栏也不具有交互性~