フロントエンドでログイン認証コード機能の理解をする

前言
前端シロ1名、日常学習生活点滴を記録【2週目】
一、フロントエンドのログイン認証コード機能についての個人的な理解
この機能をする前に、その役割が何なのかを明らかにしなければなりません.「ウェブサイトにアクセスしているユーザーがプログラムではなく人であることを確認する」理由:どんな検証コード方式でも、プログラムが判断しにくく、判断しやすい原則で設計されています.
【ロボットによるユーザーの自動登録・登録・灌水防止】理由:セキュリティの観点から、ネットワーク速度の向上に伴い、防御機構がなければ、攻撃者は完全に狂った推測でユーザーのパスワードを得ることができ、ロボットによる自動登録・登録・灌水も可能である.どんなに恐ろしいか考えなさい.
一般的には、フロントエンドでログイン検証を行うにはいくつかのタイプがあるでしょう.【検証コードを送る】【パズルをドラッグして完成する】【ランダムに文字を生成する】【計算結果を入力する】など、個人的な理解では、純粋なフロントエンドの検証は、あまり面白くなく、少し自分をいじめているので、バックエンドと協力して検証するのが最も安全です.
実はこれらはよくありますが、自分で書くと、まだ時間がかかります.普通はネットでプラグインを探すことができます.ここではJQueryの家をお勧めします.使いやすいです.
今回の具体的な需要を言いましょう:ユーザーはランダムに文字を生成するのがあまりにもlowだと思って、高い上の検証方式を游びたいです.だから、私たちが初歩的に决めたのは「パズルをドラッグして完成させる」です.この机能は私にとってまだ少し难しいです.プラグインのソースコードを见てみると、相対的に复雑で、前后の処理はそんなに友好的ではありません.ドラッグしたオブジェクトとそのターゲットの空きは不規則なグラフィックで、canvasキャンバスで処理し、断固として放棄しなければなりません.ははは.
それから私の良い先生と相談して、やはり経験のあるプログラムの大物は違います.私の先生は最も簡単で、しかも前後の制御に最も適しています.最高の方法で検証を実現します.ユーザーは逆さまの画像をクリックするだけでいいです.利点は、フロントエンドは、ユーザーが選択した画像にチェックを入れるなど、フロントエンドのインタラクティブな機能を実現する必要があります.また、確定ボタンをクリックすると、長さ9の文字列を伝えるだけでいいです.例えば、2枚目の画像を逆さまに置くと、私は01000000ドルをバックエンドに伝えるだけでOKです.簡単ではありませんか.
私のレイアウトとJSの実現を簡単に話しましょう.
最も簡単なtableでレイアウトして、CSSスタイルは言わないで、どうせゆっくり調整する問題は、

<div class="box">
        <div class="lottery">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>td>
                    <td>td>
                    <td>td>
                tr>
                <tr>
                    <td>td>
                    <td>td>
                    <td>td>
                tr>
                <tr>
                    <td>td>
                    <td>td>
                    <td>td>
                tr>
            table>
        div>

        <div class="choose">
            <div class="sure">  div>
            <div class="refresh">  div>
        div>
    div>

JS部分は私が直接使ったJQuery://tdごとにユーザーがクリックしたかどうかを判断し、メモリ1をクリックし、CSSスタイルを追加し、逆に0を保存し、スタイルを追加しない.

$('.lottery table td').each(function (i, e) {
     
                $(this).on('click', function () {
     
                    if ($(this).data('check')) {
     
                        $(this).data('check', 0);
                        $(this).removeClass('active');
                    } else {
     
                        $(this).data('check', 1);
                        $(this).addClass('active');
                    }
                    // console.log(i);
                });
            });

//確定ボタンをクリックした後、生成した9つの数字を入れるための空欄コードを定義し、最後に印刷して確認する

 $('.sure').on('click', function () {
     
                var code = '';
                $('.lottery table td').each(function (i, e) {
     
                    if ($(this).data('check') == 1) {
     
                        code += '1';
                    } else {
     
                        code += '0';
                    }
                })
	console.log(code);

//リフレッシュ機能を実現することもできます.データを空にすることにほかならません.背景図は文字列を乱数につなぐことでURLを変更する目的を達成します.

$('.refresh').on('click', function () {
     
                $(".lottery table").css({
      "background-image": "url('./img/bg2.jpg?rnd=" + Math.random() + "')" })
                $('.lottery table td').each(function (i, e) {
     
                    $(this).data('check', 0);
                    $(this).removeClass('active');
                })
            })

まとめ:
はい、フロントエンドのインタラクションは多分これらで、バックエンドの検証について私はたぶん私の師匠とバックエンドの兄貴の秘密の交流を盗聴して、へへへ.登录をクリックした时点で、私のフロントエンドで生成された9桁の数はすでにバインドvalueの形式を通じてバックグラウンドに伝わって、バックグラウンドの判断もこの点に基づいて、どのようにバックグラウンドの画像を生成するのかについて、毎回バックグラウンドの画像の位置が异なって、PSと9宫格の画像を合成するこの3点は私达が暇があって分析して原因を分析するのはとても简単で、私の师父は私に教えてくれませんでした.