フロントエンドドッキング問題の分析

フロントエンドドッキング問題の分析

1つ、JSON

概念：
JavaScript Object Notation JavaScriptオブジェクト表記（初期：JavaScriptでは、jsonはオブジェクトを表すために使用されていました）

例：var p = {"name"： "Zhang San"、 "age"： "23"、 "gender"： "男"};

JSONは通常、サーバーとデータを交換するために使用されます。サーバーデータを受信する場合、通常は文字列です。JSON.parse（）メソッドを使用して、データをJavaScriptオブジェクトに変換できます。
構文：
データは名前と値のペアになります。jsonデータは、キーと値のペアで構成されるキーであり、引用符（シングルとダブル）で囲まれるか、引用符なしで囲まれます。
値の値型：

1. 数値（整数または浮動小数点）
2. 文字列（二重引用符で囲む）
3. 論理値（trueまたはfalse）
4. 配列（角括弧内）{"persons"：[{}、{}]}（複数の人を含めることができます）
5. オブジェクト（中括弧内）{"address"：{"province"： "Shaanxi" ...}}
6. ヌル

注意：

データはコンマで区切られます：複数のキーと値のペアはコンマで区切られます。中
括弧はオブジェクトを保存します：{}を使用してjson形式を定義します。
角括弧は配列を保存します：[]

元のリンク：https：//blog.csdn.net/weixin_46008168/article/details/106314239

二、AJAX

AJAX =非同期JavaScriptおよびXML（非同期JavaScriptおよびXML）。

コンセプト：Ajaxは、Webページを非同期的に更新し、ページ全体をリロードせずにWebページの一部を更新します。

アヤックス属性：キャッシュ、PROCESSDATA、contentTypeの
①をcache：
要求が開始された後、キャッシュは、キャッシュの形で得られた結果を格納する要求が再び開始されるとキャッシュの値がtrueの場合、それは直接になります。再度リクエストを行う代わりに、キャッシュから読み取ります。
キャッシュの動作原理から、キャッシュの機能は通常、getリクエストでのみ使用されると結論付けることができます。

② processData：プロセスデータ
デフォルトでは、processDataの値はtrueです。これは、オブジェクトの形式でアップロードされたすべてのデータが文字列に変換されてアップロードされることを意味します。ファイルをアップロードするときは、文字列に変換する必要がないため、falseに変更してください。

③ contentType：送信データのフォーマット
とcontentTypeの属性はdataTypeで、バックエンドからの受信が予想されるデータのフォーマットを表します。通常、json、text ...など、contentTypeがあります。 dataTypeに対応し、フロントエンドから送信されるデータの形式を表します

デフォルト値：application / x-www-form-urlencoded
はajaxデータを表します。id= 2019＆password = 123456などの文字列の
形式です。このデータ形式を使用すると、multi-などの複雑なデータを送信できません。次元配列、ファイルなど。

送信するデータ形式がajaxのcontentType形式と一致しているかどうかに注意する必要がある場合があります。一貫していない場合は、データを変換する方法を見つける必要があります。contentTypeをfalseに変更すると、以前のデフォルトのデータ形式が変更されます。 。エラーは報告されません。

元のリンク：https：//blog.csdn.net/qq_41564928/article/details/90580375

パラメータの紹介：

$.ajax( [settings] ); //パラメータ設定は$ .ajax（）メソッドのパラメータリストであり、Ajaxリクエストのキーと値のペアのコレクションを構成するために使用されます。

jQueryに基づくAjaxパッケージ

$.ajax({
    
    
    type:'GET',	//请求的类型,GET、POST等	
    url:'www.baidu.com',	//向服务器请求的地址。
    contentType:'application/json',	//向服务器发送内容的类型，默认值是：application/x-www-form-urlencoded
    dataType:'JSON',	//预期服务器响应类型
    async:true,	//默认值是true,表示请求是异步的，false是同步请求，同步请求会阻碍浏览器的其他操作（不建议使用）
    timeout:'5000',	//设置本地的请求超时时间（单位是毫秒）
    cache:true,	//设置浏览器是否缓存请求的页面
    success:function(result,status,XMLHttpRequest){
    
    		//请求成功是执行的函数,result：服务器返回的数据，    status：服务器返回的状态，
              }，
    error:function(xhr,status,error){
    
    	//请求失败是执行的函数
              }，
    complete：function(xhr,status){
    
         //不管请求失败还是请求成功，都执行的函数
              }
            })

コード内のパラメーターの説明は、以下のリンクでも確認できます。

元のリンク：https：//blog.csdn.net/qq_32325367/article/details/52291889

応用例：

注：$。ajax（）メソッドのパラメーター構文は特別です。パラメータリストは中括弧「{}」のペアの間に含める必要があり、各パラメータは「パラメータ名」：「パラメータ値」の形式で記述されます。複数のパラメータがある場合は、カンマで区切ります "、 ";

function addmovie(){
    
    
  var inputvalue = document.getElementById("inputmovie").value;//获取input框的内容
  console.log(inputvalue);//打印查看
  $.ajax({
    
    
    method: 'POST',//请求方式
    processData: false,
    url: '/api/movie/add',// 请求路径
    contentType: "application/json;charset=UTF-8",
    dataType:"json",//设置接受到的响应数据的格式
    data:JSON.stringify({
    
     //请求参数
      name:inputvalue,
    }),
    success(res) {
    
    
      try {
    
    
        if(res.code==200)
        {
    
    
          movielist();
        }
      }catch(e) {
    
    
        console.log(e)
      }
    },//响应成功后的回调函数
    error(e) {
    
    
      console.log('xhr error code is ' + e)
    }//表示如果请求响应出现错误，会执行的回调函数
  })
}

分析：上記のコードは、AjaxのネイティブJavaScript実装よりもはるかに簡潔で明確であり、いくつかのパラメーターを設定するだけで済みます。その中で、成功関数は応答を処理するために使用されます。これは、ネイティブJavaScriptがAjaxを実装するときにコールバック番号で成功するはずのブランチに相当します。エラー関数は、エラーブランチに相当します。 「待機」というメッセージを表示するなど、プログラムエラーが実行されます。また、特別に設定する必要のないパラメータは省略できることに注意してください。

3、MD5

MD5（一方向ハッシュアルゴリズム）は、MD2、MD3、およびMD4から開発されたMessage-Digest Algorithm 5（メッセージダイジェストアルゴリズム）の略です。

アプリケーション環境：

カード番号やパスワードなどの機密情報や個人情報を送信する場合、getメソッドを使用してrlでパスワードとユーザー名を公開し、postメソッドを使用してコンソールでデータ情報を簡単に見つけることができるため、MD5メソッドを使用します。パスワードの暗号化に使用されます。

機能：
任意の長さの入力情報、処理後、出力は128ビット情報（デジタル指紋）、
異なる入力によって得られた異なる結果（一意性）
、128ビット出力結果に基づいて入力情報を推測することは不可能（不可逆的））;

jsを紹介します：

<script src="js/md5.js" type="text/javascript"></script>

一般的に使用される関数：

hex_md5(value)

b64_md5(value)

str_md5(value)

hex_hmac_md5(key, data)

b64_hmac_md5(key, data)

str_hmac_md5(key, data)

例：

var password="hello"; 

var md5password = hex_md5(password);  

四、クッキー

ブラウザは一時的に一部のデータを保存し、コンピュータに保存します（最終アクセス時間、ログイン時にユーザー名を保存し、ログイン後にホームページに「ようこそ、ユーザー名！」などのデータを表示する必要があります）

jsを紹介します：

<script src="cookie.js"></script>

使用例：

Cookies.set("username",username);//设置cookie
Cookies.remove("username");//删除cookie
Cookies.get('name');//获取cookie

5、JQueryパッケージ

コンセプト：
jQuery = javaScript +クエリを使用して、jsコードを介してページ要素をすばやくクエリします

JavaScript関数コードは、HTMLドキュメント処理、イベント処理、およびAjAXインタラクションを最適化するためにカプセル化されています。

注意：

jquery自体はJavaScript関数ライブラリであるため、jsファイルに直接jqueryコードを記述できます。また、jqueryを使用するには、公式のjquery.jsファイルを参照する必要があります。（独立したjsファイルはjquery.jsファイルを参照する必要はありません。対応するhtml Webページで引用する必要があるのはjquery.jsファイルと.jsファイルのみです。jqueryファイル参照は.jsファイルの前にある必要があります。）

jsを紹介します：

<script src="./js/lib/jquery-3.4.1.js"></script>

関連する構文は、次のリンクにあります。

元のリンク：https：//blog.csdn.net/qq_34477549/article/details/52821889

6、フロントエンドリクエストパラメータの形式

GETそして、GETが指定されたサーバーからデータを取得するPOST2つの方法、POSTがデータを指定されたサーバーに送信して処理する

GETメソッドでは、データのパラメーターがURLにスプライスされ、POSTメソッドでは、データがjsonに変換されて送信されます。

7、クロスドメインの問題の解決について

クロスドメインの問題とは何ですか？

ブラウザの同一生成元ポリシーがリクエストを拒否しました。いわゆる同一生成元とは、同じドメイン名、プロトコル、およびポートが同じであることを意味し、同じ生成元を持つスクリプトは、ブラウザーがスクリプトを実行するときにのみ実行されます。同じオリジンでない場合、データを要求すると、ブラウザはコンソールに上記の例外を報告し、アクセスを拒否するように求めます。これは、同じブラウザで複数のWebサイトを開いたときに、WebサイトAのログイン情報がWebサイトBによってWebサイトAにアクセスするために使用されないようにするためです。WebサイトBのログイン情報についても同様です。

例：ローカルで実行した後のフロントエンドプロジェクトのアドレスはhttp：// localhost：8080 /です。この時点で、バックエンドインターフェイスhttp://192.168.123.43:8000/api/にアクセスする場合xxx / xxx、クロスドメインの問題が発生しますアクセスできません。

同一生成元ポリシー：https：//developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

# 同源的例子
http://example.com/app1/index.html  # 只是路径不同
http://example.com/app2/index.html
 
http://Example.com:80  # 只是大小写差异
http://example.com
# 不同源的例子
http://example.com/app1   # 协议不同
https://example.com/app2
 
http://example.com        # host 不同
http://www.example.com
http://myapp.example.com
http://example.com        # 端口不同
http://example.com:8080

クロスドメインの問題を解決する方法は？

nginxを使用して解決する

nginx：

リバースプロキシ：実際、クライアントはプロキシを認識していません。クライアントは構成なしでアクセスできるため、リバースプロキシサーバーに要求を送信するだけでよく、リバースプロキシサーバーはターゲットサーバーを選択してデータを取得します。クライアントに戻るとき、リバースプロキシサーバーとターゲットサーバーは外部サーバーであり、プロキシサーバーアドレスを公開し、実サーバーのIPアドレスを非表示にします。

リバースプロキシとフォワードプロキシの違いは、フォワードプロキシプロキシクライアント、リバースプロキシプロキシサーバーです。

オリジナル：https：//www.cnblogs.com/ysocean/p/9392908.html#_label0

Nginxの手順：

start nginx #启动
nginx -s reload #重新加载Nginx配置文件，然后以优雅的方式重启Nginx
nginx -s stop #强制停止Nginx服务

8.バックエンドから返されたjsonデータでページを埋める方法

方法：テンプレートエンジンを使用する

テンプレートエンジン

テンプレートエンジンはサードパーティのモジュールです。

開発者がよりわかりやすい方法で文字列をつなぎ合わせて、プロジェクトコードをより明確にし、保守しやすくします。

アートテンプレートテンプレートエンジン

1つは、テンプレート構文です。

標準構文：読み取りと書き込みが簡単。

{
    
    {
    
    if user}}
<h2>{
    
    {
    
    user.name}}</h2>
{
    
    {
    
    /if}}

オリジナルの文法：強力なロジック処理機能。

<% if (user) {
    
     %>
<h2><%= user.name %></h2>
<% } %>

2、インストール

コマンドラインツールでnpminstall art-templaetコマンドを使用して、ダウンロードします

3.使用方法

1.テンプレートエンジンを導入する

<script src="template-web.js"></script>

2.HTMLでテンプレートを作成します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <!-- 创建script标签创建模板 -->
        <!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" -->
        <!-- 2. 给 script 标签添加 id ，此 id 即为模板 id （也就是moviescript)-->
        <!-- 3. leval_1是对象，index-1是下标（也可用$value代替） -->
        <script id="moviescript" type="text/html">
            {
     
     {
     
     each shuffling leval_1 index_1}}
                <h1>{
     
     {
     
     leval_1.name}}</h1>
            {
     
     {
     
     /each}}
        </script>
    </div>
</body>
</html>
<!-- 引入模板引擎 -->
<!-- 注意：JS由于是解释型语言，是从上到下的顺序执行的，所以对于JS代码的引入一定要按照顺序，否则会报错
（后面的可能包含前面的，所以报错） -->
<script src="template-web.js"></script>
<script src="index.js"></script>

3. template（）メソッドを作成します

//数据内容
var mydata =[
    {
    
    
      name:'哈利波特',
    },
    {
    
    
      name:'匆匆那年',
    },
    {
    
    
      name:'哪吒',
    },
    {
    
    
      name:'漫威',
    },
  ]
  //获取html中需要被渲染的div盒子
  var movieget = document.querySelector('.box');
  //在控制台中打印相关信息
  console.log(movieget);
  // 基于模板名渲染模板，template(filename/id, data);
  //data即为后端传送过来的data主要渲染的信息，shuffling为index.html页面语法的变量名
  var moviexuanran = template('moviescript',{
    
    
    //第一种
    shuffling:mydata,
    //第二种：存放mydata.js里的json内容 
    shuffling:[{
    
    ……}],
  })
  //在定位的div盒子里innerHTML渲染的信息（写入）
  movieget.innerHTML = moviexuanran;

四、文法

以下では、例として標準構文（基本的なテンプレートと基本的なjs式をサポート）を使用しています

1.出力

{
    
    {
    
    value}}
{
    
    {
    
    data.key}}
{
    
    {
    
    data['key']}}
{
    
    {
    
    a ? b : c}}
{
    
    {
    
    a || b}}
{
    
    {
    
    a + b}}

2.元の出力

{
    
    {
    
    @ value}}

3.条件付き出力

<!-- 单 if 判断 -->
{
    
    {
    
    if value}} 
... 
{
    
    {
    
    /if}}

<!-- if ... else ... 判断 -->
{
    
    {
    
    if v1}} 
... 
{
    
    {
    
    else if v2}}
 ... 
{
    
    {
    
    /if}}

4.トラバース

{
    
    {
    
    each target}}
  {
    
    {
    
    $index}} {
    
    {
    
    $value}}
{
    
    {
    
    /each}}

注：これtargetは配列であり、配列eachをトラバースするために使用され、配列$indexの添え字$valueであり、配列の値です。

5.サブテンプレート

サブテンプレートを使用して、Webサイトの公開セクション（頭、下）を個別のファイルに抽出します。

{
   
   {include '模板'}}
{
   
   {include './header.art'}}
{
   
   {include './header.art' data}}

6.テンプレートの継承

テンプレート継承を使用すると、WebサイトのHTMLスケルトンを別のファイルに抽出でき、他のページテンプレートはスケルトンファイルを継承できます。

{
   
   {extend './layout.html'}}
{
   
   {block 'head'}}
...
{
   
   {/block}}

オリジナル：https：//www.jianshu.com/p/d8d8e19157e0

免責事項：情報の一部はインターネットからのものです。侵害がある場合は、削除するために私に連絡してください！
記事に誤りや混乱などがある場合は、批判や訂正を歓迎します！