细胞的作战实验室

Power by hugo

© 2019. All rights reserved.

2-5 前端页面

Thu, Jul 5, 2018

 

前端部分，展示了如何串联三个服务器方面的知识，所以还是很有必要好好看下的。所以写了这篇wiki。

想知道

前端应该如何使用cookie和session把身份验证流程打通？

ajax如何和服务端进行交互？

前端 → 代理服务器 → 业务服务器 的完整链条是怎样的？

前端基础

$(document).ready(function () {
    alert("主文档加载完毕")
})

//  js入口函数
window.onload = function () {
    // 执行代码
    alert("js装载完毕")
}

引用

JS

js内部引用别的js文件：

document.write "<script src='another.js'></script>";

本质上是应该在html中再引一个js文件的

<script type="text/javascript" src="/statics/scripts/home.js"></script>

CSS

<link rel="stylesheet" type="text/css" href="/statics/style.css" />

变量

var: 申明了一个要么是全局，要么是函数级的变量

let: 申明了一个块级域的局部变量，并且可以给它一个初始化值

const: 创建一个只读常量，在不同浏览器上表现为不可修改；建议申明后不修改；拥有块级作用域

jQuery简明

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

实例:

Promise

简明Demo

function runAsync(){
    var def = $.Deferred();
    //做一些异步操作
    setTimeout(function(){
        var num = Math.ceil(Math.random()*10); //生成1-10的随机数
        console.log(num);
        if(num<=5){
            console.log("数字OK");
            def.resolve(num);
        }
        else{
            console.log("数字太大了");
            def.reject('数字太大了');
        }
    }, 2000);
    return def.promise(); //就在这里调用
}

var d = runAsync();

d.then(function(data){
    console.log(data);
    return runAsync();
}, function (err) {
    console.log("错误的回调", err)
}).then(function(data){
    console.log(data);
    return runAsync();
}, function (err) {
    console.log("错误的回调", err)
}).then(function(data){
        console.log(data);
}, function (err) {
    console.log("错误的回调", err)
});

选取

选择器文档

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()

选谁语法目标
标签<xxx>

$("button").click(function(){})

$("p").hide()


id$("#test").hide();<p id="test">pick me</p>
class$(".test")
<p class="test">这是一个段落。</p>
所有$("*")
当前 HTML 元素$(this)
(组合) 标签 + class$("p.intro")<p class="intro">这是一个段落，点击按钮隐藏。</p>
(组合) 标签 + 排序$("p:first")
(组合) 标签+标签+排序$("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素

$("ul li:first-child")选取每个 <ul> 元素的第一个 <li> 元素

$("[href]")选取带有 href 属性的元素

$("a[target='_blank']")选取所有 target 属性值等于 "_blank" 的 <a> 元素

$("a[target!='_blank']")选取所有 target 属性值不等于 "_blank" 的 <a> 元素

$(":button")选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")选取偶数位置的 <tr> 元素

$("tr:odd")选取奇数位置的 <tr> 元素

响应

使用jQuery让元素响应各种「事件」

事件方法文档

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclick 双击keydownchangeresize
mouseenter 鼠标指针穿过元素keyupfocusscroll
mouseleave 鼠标指针离开元素
blurunload

使用示例：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

操纵

效果方法文档

$("button").click(function(){
  $("p").hide(1000);
});

其他

HTML插元素

Ajax

javascript请求网络的异步库

文档

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});


$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

工程实现

基本思路：

1.绑定事件

PS：数据请求回来、根据数据生成好DOM → 就是initPage方法


2. 根据接口返回结果，刷新界面


所有页面都是这样的。然后，跳转新页面的逻辑和时机，是服务端控制的。


home.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="./scripts/home.js"></script>
    <script type="text/javascript" src="./scripts/requests.js"></script>
</head>

<body id="main-back">

<div class="top-nav">
    <a class="active" href="#home">Home</a>
    <a href="#news">{{.Name}}</a>
    <a href="#about">Help</a>
</div>

<div class="topic-back" style="padding-left:16px">
    <h2 id="title">嗨，这里是你的体内，我是红血球...请随意参观~</h2>
</div>

<form method="post" id="reg-submit" action="/userhome" style="width: 500px; margin: 0 auto;">
    <div class="container">
        <h1>Register</h1>
        <hr>

        <label for="email"><b>User name</b></label>
        <input id="username" type="text" placeholder="Enter user name" name="username" required>

        <label for="psw"><b>Password</b></label>
        <input id="pwd" type="password" placeholder="Enter Password" name="pwd" required>

        <hr>
        <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

        <button id="reg-btn" type="submit" class="register-btn">Register</button>
    </div>

    <div class="container sign-in">
        <p>Already have an account? <a id="sign-in-href" href="#">Sign in</a>.</p>
    </div>
</form>

<form method="post" id="sign-in-submit" action="/userhome" style="width: 500px; margin: 0 auto; display: none;">
    <div class="container">
        <h1>Sign In</h1>
        <hr>

        <label for="email"><b>User name</b></label>
        <input id="s-username" type="text" placeholder="Enter user name" name="username" required>

        <label for="psw"><b>Password</b></label>
        <input id="s-pwd" type="password" placeholder="Enter Password" name="pwd" required>

        <hr>
        <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

        <button id="sign-in-btn" type="submit" class="register-btn">Sign In</button>
    </div>

    <div class="container sign-in">
        <p>Don't have an account? <a id="register-href" href="#">Register</a>.</p>
    </div>
</form>

</body>
</html>

呈现

注意点：css & js文件路径不能直接用html的相对路径，而要用之前通过web服务绑定的「静态资源」路径

r.ServeFiles("/statics/*filepath", http.Dir("./template")) // 把template文件做了静态资源绑定

所以，css和js的引用路径：

❌ <link rel="stylesheet" type="text/css" href="./style.css">
✅ <link rel="stylesheet" type="text/css" href="/statics/style.css" />

参考：问答