Vue3 リストインターフェースデータ表示の詳細

Vue3 リストインターフェースデータ表示の詳細

1. リストインターフェースの表示例

ここで必要なのは、ページに入力されたデータのスタイルを設定すること、つまり見た目を良くすることです。

以前、「Vue3 (パート 2) Ant Design Vue の統合」という記事で、コンポーネントの使用について説明しました。フロントエンドがあまり良くない場合 (バックエンドもあまり良くない場合)、「必要なものだけを採用する」という精神で、既成のものを使用するのが最良かつ最も便利な方法です。

簡単に言えば、 Ant Design Vueの既成コンポーネントを見つけて、コンポーネントのスタイルに従ってインターフェイス上にリストデータを表示します。

1. お気に入りのリストスタイルを選択する

https://2x.antdv.com/components/list-cnからlistを見つけて、好きなスタイルを見つけてください。

次の図に示すように:

2. データを表示する

2.1. コンポーネントがリストに表示される

次に、 homeに変更を加え、先ほど対応するコンポーネントの場所を見つけて、対応するコードをhomeにコピーし、変更を加えるだけです。

サンプルコードは次のとおりです。

<テンプレート>
  <a-レイアウト>
    <a-layout-sider width="200" style="background: #fff">
      <a-メニュー
          モード="インライン"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ 高さ: '100%', 右境界線: 0 }"
      >
        <a-サブメニューキー="sub1">
          <テンプレート #タイトル>
                <span>
                  <ユーザーによるアウトライン />
                  サブナビ1
                </span>
          </テンプレート>
          <a-menu-item key="1">オプション1</a-menu-item>
          <a-menu-item key="2">オプション2</a-menu-item>
          <a-menu-item key="3">オプション3</a-menu-item>
          <a-menu-item key="4">オプション4</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub2">
          <テンプレート #タイトル>
                <span>
                  <ラップトップのアウトライン />
                  サブナビ2
                </span>
          </テンプレート>
          <a-menu-item key="5">オプション5</a-menu-item>
          <a-menu-item key="6">オプション6</a-menu-item>
          <a-menu-item key="7">オプション7</a-menu-item>
          <a-menu-item key="8">オプション8</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub3">
          <テンプレート #タイトル>
                <span>
                  <通知の概要 />
                  サブナビ3
                </span>
          </テンプレート>
          <a-menu-item key="9">オプション9</a-menu-item>
          <a-menu-item key="10">オプション10</a-menu-item>
          <a-menu-item key="11">オプション11</a-menu-item>
          <a-menu-item key="12">オプション12</a-menu-item>
        </a-サブメニュー>
      </a-メニュー>
    </a-layout-sider>
    <a-list 項目レイアウト="垂直" サイズ="大" :pagination="ページ区切り" :data-source="リストデータ">
      <テンプレート #フッター>
        <div>
          <b>アリのデザインビュー</b>
          フッター部分
        </div>
      </テンプレート>
      <テンプレート #renderItem="{ アイテム }">
        <a-list-item キー="item.title">
          <テンプレート #アクション>
          <span v-for="{ type, text } アクション内" :key="type">
            <コンポーネント v-bind:is="type" style="margin-right: 8px" />
            {{ 文章 }}
          </span>
          </テンプレート>
          <テンプレート #extra>
            <画像
                幅="272"
                alt="ロゴ"
                src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
            />
          </テンプレート>
          <a-list-item-meta :description="item.description">
            <テンプレート #タイトル>
              <a :href="item.href" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >{{ item.title }}</a>
            </テンプレート>
            <テンプレート #アバター><a-アバター :src="item.avatar" /></テンプレート>
          </a-リスト項目メタ>
          {{item.content}}
        </a-リスト項目>
      </テンプレート>
    </a-リスト>
  </a-レイアウト>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、onMounted、ref、reactive、toRef} をインポートします。
'axios' から axios をインポートします。
'@ant-design/icons-vue' から { StarOutlined、LikeOutlined、MessageOutlined } をインポートします。
const listData: レコード<文字列, 文字列>[] = [];

(i = 0; i < 23; i++ とします) {
  リストデータ.push({
    href: 'https://www.antdv.com/',
    タイトル: `ant design vue part ${i}`,
    アバター: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    説明：
        「バックグラウンド アプリケーションのデザイン言語である Ant Design が、Ant UED チームによって改良されました。」
    コンテンツ：
        「当社は、製品のプロトタイプを美しく効率的に作成できるように、一連のデザイン原則、実用的なパターン、高品質のデザイン リソース (Sketch および Axure) を提供しています。」
  });
}

エクスポートデフォルトdefineComponent({
  コンポーネント:
    星のアウトライン、
    アウトラインのように、
    メッセージアウトライン、
  },
  名前: 'ホーム'、
  設定（）{
    const ページネーション = {
      onChange: (ページ: 番号) => {
        console.log(ページ);
      },
      ページサイズ: 3,
    };
    constアクション: Record<文字列, 文字列>[] = [
      { タイプ: 'StarOutlined'、テキスト: '156' },
      { タイプ: 'LikeOutlined'、テキスト: '156' },
      { タイプ: 'MessageOutlined'、テキスト: '2' },
    ];
    console.log('セットアップ');
    //データバインディングにはrefを使用します。const ebooks=ref();
    // リアクティブデータバインディングを使用する const ebooks1 = reactive({books:[]})
    マウント時(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(応答 =>{
        console.log("マウントされた状態");
        const データ = 応答.データ;
        ebooks.value=データコンテンツ;
        ebooks1.books = データコンテンツ;
      })
    })
    戻る {
      リストデータ、
      ページネーション、
      行動、
      電子書籍1: 電子書籍、
      ebooks2:toRef(ebooks1、"書籍")
    }

  }
});
</スクリプト>

次のように再コンパイルして実行し、効果を確認します。

2.2. インターフェースから返されたデータはリストに表示される

明らかに、これで、使用したいリスト スタイルがページに正常に表示されていることがわかりますが、これは私が望んでいることではありません。私が望んでいるのは、バックエンド インターフェイスによって返されたデータ、つまりデータ ソースがここに表示されることです。次に、 Homeコードを再度調整してみましょう。

サンプルコードは次のとおりです。

<テンプレート>
  <a-レイアウト>
    `<a-layout-sider width="200" style="background: #fff">
      <a-メニュー
          モード="インライン"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ 高さ: '100%', 右境界線: 0 }"
      >
        <a-サブメニューキー="sub1">
          <テンプレート #タイトル>
                <span>
                  <ユーザーによるアウトライン />
                  サブナビ1
                </span>
          </テンプレート>
          <a-menu-item key="1">オプション1</a-menu-item>
          <a-menu-item key="2">オプション2</a-menu-item>
          <a-menu-item key="3">オプション3</a-menu-item>
          <a-menu-item key="4">オプション4</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub2">
          <テンプレート #タイトル>
                <span>
                  <ラップトップのアウトライン />
                  サブナビ2
                </span>
          </テンプレート>
          <a-menu-item key="5">オプション5</a-menu-item>
          <a-menu-item key="6">オプション6</a-menu-item>
          <a-menu-item key="7">オプション7</a-menu-item>
          <a-menu-item key="8">オプション8</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub3">
          <テンプレート #タイトル>
                <span>
                  <通知の概要 />
                  サブナビ3
                </span>
          </テンプレート>
          <a-menu-item key="9">オプション9</a-menu-item>
          <a-menu-item key="10">オプション10</a-menu-item>
          <a-menu-item key="11">オプション11</a-menu-item>
          <a-menu-item key="12">オプション12</a-menu-item>
        </a-サブメニュー>
      </a-メニュー>
    </a-layout-sider>`
    <a-list item-layout="垂直" size="大" :pagination="ページ区切り" :data-source="ebooks1">
      <テンプレート #renderItem="{ アイテム }">
        <a-list-item キー="item.name">
          <テンプレート #アクション>
          <span v-for="{ type, text } アクション内" :key="type">
            <コンポーネント v-bind:is="type" style="margin-right: 8px" />
            {{ 文章 }}
          </span>
          </テンプレート>
          <a-list-item-meta :description="item.description">
            <テンプレート #タイトル>
              <a :href="item.href" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >{{ item.name }}</a>
            </テンプレート>
            <テンプレート #アバター><a-アバター :src="item.cover" /></テンプレート>
          </a-リスト項目メタ>
        </a-リスト項目>
      </テンプレート>
    </a-リスト>
  </a-レイアウト>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、onMounted、ref、reactive、toRef} をインポートします。
'axios' から axios をインポートします。
'@ant-design/icons-vue' から { StarOutlined、LikeOutlined、MessageOutlined } をインポートします。
const listData: レコード<文字列, 文字列>[] = [];

(i = 0; i < 23; i++ とします) {
  リストデータ.push({
    href: 'https://www.antdv.com/',
    タイトル: `ant design vue part ${i}`,
    アバター: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    説明：
        「バックグラウンド アプリケーションのデザイン言語である Ant Design が、Ant UED チームによって改良されました。」
    コンテンツ：
        「当社は、製品のプロトタイプを美しく効率的に作成できるように、一連のデザイン原則、実用的なパターン、高品質のデザイン リソース (Sketch および Axure) を提供しています。」
  });
}

エクスポートデフォルトdefineComponent({
  コンポーネント:
    星のアウトライン、
    アウトラインのように、
    メッセージアウトライン、
  },
  名前: 'ホーム'、
  設定（）{
    const ページネーション = {
      onChange: (ページ: 番号) => {
        console.log(ページ);
      },
      ページサイズ: 3,
    };
    constアクション: Record<文字列, 文字列>[] = [
      { タイプ: 'StarOutlined'、テキスト: '156' },
      { タイプ: 'LikeOutlined'、テキスト: '156' },
      { タイプ: 'MessageOutlined'、テキスト: '2' },
    ];
    console.log('セットアップ');
    //データバインディングにはrefを使用します。const ebooks=ref();
    // リアクティブデータバインディングを使用する const ebooks1 = reactive({books:[]})
    マウント時(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(応答 =>{
        console.log("マウントされた状態");
        const データ = 応答.データ;
        ebooks.value=データコンテンツ;
        ebooks1.books = データコンテンツ;
      })
    })
    戻る {
      リストデータ、
      ページネーション、
      行動、
      電子書籍1: 電子書籍、
      ebooks2:toRef(ebooks1、"書籍")
    }

  }
});
</スクリプト>
<スタイル>
.ant-layout-sider{
  フロート: 左;
}
</スタイル>

次のように再コンパイルして実行し、効果を確認します。

2.3 インターフェースデータ変換

明らかにリスト データは小さすぎるため、複数のデータを返すようにインターフェイスを変更しました。

serviceから、渡される内容に関係なく、ハードコードされたファジークエリが実行されるということが簡単にわかります。ここでは、これを動的SQLに変更できます。

サンプルコードは次のとおりです。

パッケージ com.rongrong.wiki.service;

com.rongrong.wiki.domain.EBook をインポートします。
com.rongrong.wiki.domain.EBookExample をインポートします。
com.rongrong.wiki.mapper.EBookMapper をインポートします。
com.rongrong.wiki.req.EBookReq をインポートします。
com.rongrong.wiki.resp.EBookResp をインポートします。
org.springframework.stereotype.Service をインポートします。
org.springframework.util.ObjectUtils をインポートします。

javax.annotation.Resource をインポートします。
java.util.List をインポートします。

static com.rongrong.wiki.util.CopyUtil.copyList をインポートします。

/**
 * @著者 ロンロン
 * @バージョン 1.0
 * @説明
 * @日付 2021/10/13 23:09
 */
@サービス
パブリッククラスEBookService {

    @リソース
    プライベート EBookMapper eBookMapper;

    パブリックリスト<EBookResp> リスト(EBookReq eBookReq) {
        EBookExample を新しい EBookExample() に追加します。
        //ここでのコードの意味は、Sql where 条件 EBookExample.Criteria criteria = eBookExample.createCriteria(); を作成することと同じです。
        //波線は推奨されていないことを示しています。ソースコードを見て置き換えてみましょう if(!ObjectUtils.isEmpty(eBookReq.getName())){
            条件.andNameLike("%"+eBookReq.getName()+"%");
        }
        リスト<EBook> eBookList = eBookMapper.selectByExample(eBookExample);
        //List<EBookResp> eBookRespList = 新しいArrayList<>();
        // (EBook eBook: eBookList) の場合 {
        // //EBookResp eBookResp = new EBookResp();
        // ////Spring Boot 独自の BeanUtils がオブジェクトのコピーを完了します// //BeanUtils.copyProperties(eBook, eBookResp);
        // //eBookResp.setId(12345L);
        // // 単一コピー // EBookResp copy = copy(eBook, EBookResp.class);
        // eBookRespList.add(コピー);
        //
        //リストのコピー List<EBookResp> respList = copyList(eBookList, EBookResp.class);
        respList を返します。
    }
}

次のようにして、インターフェースによって返されたデータを表示します。

2.4. リストは1行に複数のデータを表示します

インターフェイスの変更は完了です。次に、リストの表示内容を変更する必要があります。同様に、リスト リストでグリッド リストを見つけます。 homeでも変更します。サンプル コードは次のとおりです。

<テンプレート>
  <a-レイアウト>
    `<a-layout-sider width="200" style="background: #fff">
      <a-メニュー
          モード="インライン"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ 高さ: '100%', 右境界線: 0 }"
      >
        <a-サブメニューキー="sub1">
          <テンプレート #タイトル>
                <span>
                  <ユーザーによるアウトライン />
                  サブナビ1
                </span>
          </テンプレート>
          <a-menu-item key="1">オプション1</a-menu-item>
          <a-menu-item key="2">オプション2</a-menu-item>
          <a-menu-item key="3">オプション3</a-menu-item>
          <a-menu-item key="4">オプション4</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub2">
          <テンプレート #タイトル>
                <span>
                  <ラップトップのアウトライン />
                  サブナビ2
                </span>
          </テンプレート>
          <a-menu-item key="5">オプション5</a-menu-item>
          <a-menu-item key="6">オプション6</a-menu-item>
          <a-menu-item key="7">オプション7</a-menu-item>
          <a-menu-item key="8">オプション8</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub3">
          <テンプレート #タイトル>
                <span>
                  <通知の概要 />
                  サブナビ3
                </span>
          </テンプレート>
          <a-menu-item key="9">オプション9</a-menu-item>
          <a-menu-item key="10">オプション10</a-menu-item>
          <a-menu-item key="11">オプション11</a-menu-item>
          <a-menu-item key="12">オプション12</a-menu-item>
        </a-サブメニュー>
      </a-メニュー>
    </a-layout-sider>`
    <a-list 項目レイアウト="垂直" サイズ="大"
            :grid="{ ガター: 16, 列: 3 }" :data-source="ebooks1">
      <テンプレート #renderItem="{ アイテム }">
        <a-list-item キー="item.name">
          <テンプレート #アクション>
          <span v-for="{ type, text } アクション内" :key="type">
            <コンポーネント v-bind:is="type" style="margin-right: 8px" />
            {{ 文章 }}
          </span>
          </テンプレート>
          <a-list-item-meta :description="item.description">
            <テンプレート #タイトル>
              <a :href="item.href" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >{{ item.name }}</a>
            </テンプレート>
            <テンプレート #アバター><a-アバター :src="item.cover" /></テンプレート>
          </a-リスト項目メタ>
        </a-リスト項目>
      </テンプレート>
    </a-リスト>
  </a-レイアウト>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、onMounted、ref、reactive、toRef} をインポートします。
'axios' から axios をインポートします。
'@ant-design/icons-vue' から { StarOutlined、LikeOutlined、MessageOutlined } をインポートします。
const listData: レコード<文字列, 文字列>[] = [];

エクスポートデフォルトdefineComponent({
  コンポーネント:
    星のアウトライン、
    アウトラインのように、
    メッセージアウトライン、
  },
  名前: 'ホーム'、
  設定（）{
    const ページネーション = {
      onChange: (ページ: 番号) => {
        console.log(ページ);
      },
      ページサイズ: 3,
    };
    constアクション: Record<文字列, 文字列>[] = [
      { タイプ: 'StarOutlined'、テキスト: '156' },
      { タイプ: 'LikeOutlined'、テキスト: '156' },
      { タイプ: 'MessageOutlined'、テキスト: '2' },
    ];
    console.log('セットアップ');
    //データバインディングにはrefを使用します。const ebooks=ref();
    // リアクティブデータバインディングを使用する const ebooks1 = reactive({books:[]})
    マウント時(()=>{
      axios.get("http://localhost:8888/ebook/list?name=").then(レスポンス =>{
        console.log("マウントされた状態");
        const データ = 応答.データ;
        ebooks.value=データコンテンツ;
        ebooks1.books = データコンテンツ;
      })
    })
    戻る {
      ページネーション、
      行動、
      電子書籍1: 電子書籍、
      ebooks2:toRef(ebooks1、"書籍")
    }

  }
});
</スクリプト>
<スタイル>
.ant-layout-sider{
  フロート: 左;
}
</スタイル>

知識ポイント:

  • :grid="{ gutter: 16, column: 4 }"はグリッド表示用で、グリッド間隔は 16、行あたり 4 項目です。
  • ここで、 pagination="pagination" 、つまりページネーション表示を削除する必要があります。

再度コンパイルして、次のような効果を確認します。

2.5. リストコンテンツの前のアイコンスタイルを変更する

すべては良さそうですが、本の表紙は以下に示すように少し小さくて醜いです。

スタイルを変更するには、ホームで調整するだけです。サンプルコードは次のとおりです。

html
<テンプレート>
  <a-レイアウト>
    `<a-layout-sider width="200" style="background: #fff">
      <a-メニュー
          モード="インライン"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ 高さ: '100%', 右境界線: 0 }"
      >
        <a-サブメニューキー="sub1">
          <テンプレート #タイトル>
                <span>
                  <ユーザーによるアウトライン />
                  サブナビ1
                </span>
          </テンプレート>
          <a-menu-item key="1">オプション1</a-menu-item>
          <a-menu-item key="2">オプション2</a-menu-item>
          <a-menu-item key="3">オプション3</a-menu-item>
          <a-menu-item key="4">オプション4</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub2">
          <テンプレート #タイトル>
                <span>
                  <ラップトップのアウトライン />
                  サブナビ2
                </span>
          </テンプレート>
          <a-menu-item key="5">オプション5</a-menu-item>
          <a-menu-item key="6">オプション6</a-menu-item>
          <a-menu-item key="7">オプション7</a-menu-item>
          <a-menu-item key="8">オプション8</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub3">
          <テンプレート #タイトル>
                <span>
                  <通知の概要 />
                  サブナビ3
                </span>
          </テンプレート>
          <a-menu-item key="9">オプション9</a-menu-item>
          <a-menu-item key="10">オプション10</a-menu-item>
          <a-menu-item key="11">オプション11</a-menu-item>
          <a-menu-item key="12">オプション12</a-menu-item>
        </a-サブメニュー>
      </a-メニュー>
    </a-layout-sider>`
    <a-list 項目レイアウト="垂直" サイズ="大"
            :grid="{ ガター: 16, 列: 3 }" :data-source="ebooks1">
      <テンプレート #renderItem="{ アイテム }">
        <a-list-item キー="item.name">
          <テンプレート #アクション>
          <span v-for="{ type, text } アクション内" :key="type">
            <コンポーネント v-bind:is="type" style="margin-right: 8px" />
            {{ 文章 }}
          </span>
          </テンプレート>
          <a-list-item-meta :description="item.description">
            <テンプレート #タイトル>
              <a :href="item.href" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" >{{ item.name }}</a>
            </テンプレート>
            <テンプレート #アバター><a-アバター :src="item.cover" /></テンプレート>
          </a-リスト項目メタ>
        </a-リスト項目>
      </テンプレート>
    </a-リスト>
  </a-レイアウト>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、onMounted、ref、reactive、toRef} をインポートします。
'axios' から axios をインポートします。
'@ant-design/icons-vue' から { StarOutlined、LikeOutlined、MessageOutlined } をインポートします。
const listData: レコード<文字列, 文字列>[] = [];

エクスポートデフォルトdefineComponent({
  コンポーネント:
    星のアウトライン、
    アウトラインのように、
    メッセージアウトライン、
  },
  名前: 'ホーム'、
  設定（）{
    const ページネーション = {
      onChange: (ページ: 番号) => {
        console.log(ページ);
      },
      ページサイズ: 3,
    };
    constアクション: Record<文字列, 文字列>[] = [
      { タイプ: 'StarOutlined'、テキスト: '156' },
      { タイプ: 'LikeOutlined'、テキスト: '156' },
      { タイプ: 'MessageOutlined'、テキスト: '2' },
    ];
    console.log('セットアップ');
    //データバインディングにはrefを使用します。const ebooks=ref();
    // リアクティブデータバインディングを使用する const ebooks1 = reactive({books:[]})
    マウント時(()=>{
      axios.get("http://localhost:8888/ebook/list?name=").then(レスポンス =>{
        console.log("マウントされた状態");
        const データ = 応答.データ;
        ebooks.value=データコンテンツ;
        ebooks1.books = データコンテンツ;
      })
    })
    戻る {
      ページネーション、
      行動、
      電子書籍1: 電子書籍、
      ebooks2:toRef(ebooks1、"書籍")
    }

  }
});
</スクリプト>
<スタイルスコープ>
.ant-layout-sider{
  フロート: 左;
}
.ant-アバター{
  幅: 50px;
  高さ: 50px;
  行の高さ: 50px;
  境界線の半径: 8%;
  マージン: 5px 0;
}
</スタイル>

再度コンパイルし、次の点を確認します。

Vue3 リストインターフェースデータ表示の詳細に関するこの記事はこれで終わりです。Vue3 リストインターフェースデータ表示の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • データバインディングとリストデータの表示にはVue3を使用する

<<:  UCenter ホームサイトに統計コードを追加

>>:  入力テキストボックスの入力実装プロパティを無効にする

推薦する

ウェブページのフラッシュアニメーションが表示されない問題の解決策

<br />解決手順は次のとおりです。スタート -> 実行 -> reged...

jQueryはショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...

mysql 一時テーブルの使用状況の分析 [クエリ結果は一時テーブルに保存できます]

この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...

Linux環境でユーザーにsudo権限を追加する方法

sudo 設定ファイルsudo のデフォルトの設定ファイルは /etc/sudoers です。一般的...

React+TypeScriptプロジェクト構築事例解説

React プロジェクトの構築は非常に簡単ですが、Typescript と組み合わせると、実際にはそ...

MySQL 8.0 再帰クエリの簡単な使用例

序文この記事では、MySQL 8.0 の新機能を使用して再帰クエリを実装します。詳細なサンプル コー...

MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更

この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...

ウェブ標準学習リソースの素晴らしいコレクション

これらの仕様は、下位互換性のあるドキュメントを Web 上で公開し、できるだけ幅広いユーザーがアクセ...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

Nginx 構成の実装 HTTPS セキュリティ認証

1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...

JavaScript 変数の昇格についての簡単な説明

目次序文1. どのような変数が促進されますか? 2. 可変プロモーションがあるのはなぜですか? （１...

MySQLのロック機構の詳細な説明

序文データの一貫性と整合性を確保するために、あらゆるデータベースにはロック メカニズムが備わっていま...

Docker-compose は Docker プライベート ウェアハウスのステップを迅速に構築します

docker-compose.ymlを作成し、次の内容を入力します。 バージョン: '3&#...

Vueでタイマーをエレガントにクリアする方法

目次序文最適化派生的な質問: beforeDestroy はトリガーされませんか?序文タイマーをクリ...

react+antd.3x は IP 入力ボックスを実装します

この記事では、IP入力ボックスを実装するための react+antd.3x の具体的なコードを参考ま...