記事ディレクトリ

序文
1. フロントエンドフレームワーク - VUE
2、要素コンポーネント

序文

提示：这里可以添加本文要记录的大概内容：

1. フロントエンドフレームワーク - VUE

今日の目標:

VUE で一般的なコマンドと補間式を使用する機能

VUEライフサイクル機能を利用できる機能を搭載

単純な要素ページの変更を行う機能

すべてのクエリ機能を完了できる

機能を追加する機能

1.1 概要

次に、フロントエンドフレームワークである VUE について学習します。

Vue は、ネイティブ JavaScript での DOM 操作を免除し、記述を簡素化するフロントエンドフレームワークのセットです。

バックエンドフレームワークはコードの作成を簡素化するために使用されますMybatisが、フロントエンドフレームワークはコードのも以前に学びました。前日に、次のような多くの DOM 操作が実行される包括的なケースを作成しました。MybatisjdbcVUEJavaScript

ここに画像の説明を挿入

を学習しVUEた後は、コードのこの部分を記述する必要はなくなります。VUEでは、 DOM の記述を簡素化するにはどうすればよいでしょうか?

==MVVM (Model-View-ViewModel) の考え方に基づいて、データの双方向のバインディングが実現され、プログラミングの焦点はデータにあります。==DOM 操作に焦点を当てる前に、MVVMアイデアを、まずMVCアイデアについて説明する必要があります (以下の図にMVCアイデア
ここに画像の説明を挿入

C は js コード、M はデータ、V はページに表示されるコンテンツです。次の図は、前に書いたコードです。

ここに画像の説明を挿入

MVC思考は双方向に束縛されることはできません。双方向バインドとは、データモデルデータが変更されると、それに応じてページ表示が変更され、フォームデータが変更されると、バインドされたモデルデータもそれに応じて変更されることを意味します。次に、MVVMアイデア。次の図は 3 つのコンポーネントの図です。

図内のはデータModelでありView、ビュー、つまりページラベル、ユーザーがブラウザを通じて見ることができるコンテンツであり、オブジェクトを通じて双方向にバインドされておりModel、オブジェクトはによって提供されます。次に双方向バインドの効果を見てみましょう. 次の図はあらかじめ用意したコードで、入力ボックスとモデル。ViewViewModelViewModelVueusername{ {}}username

ブラウザでこのページを開くと以下のページが表示されます

入力ボックスにコンテンツを入力すると、入力したコンテンツが入力ボックスの背後にリアルタイムで表示されます。これは双方向バインディングの効果です。

1.2 クイックスタート

Vue の使い方は比較的簡単で、次の 3 つのステップに分かれています。

新しい HTML ページを作成し、Vue.js ファイルをインポートします。
```
<script src="js/vue.js"></script>
```
JS コード領域で、データバインディング用の Vue コアオブジェクトを作成します。
```
new Vue({
      
      
    el: "#app",
    data() {
      
      
        return {
      
      
            username: ""
        }
    }
});
```
Vue オブジェクトを作成するときは、js オブジェクトを渡す必要があり、オブジェクトには次の属性が必要です。
- el: Vue によって管理されるタグを指定するために使用されます。この属性#appのapp管理対象ラベルの id 属性値である必要があります。
- data: データモデルの定義に使用されます
- methods: 関数を定義するために使用されます。これは後で使用します
ビューの書き込み
```
<div id="app">
    <input name="username" v-model="username" >
    {
     
     {username}}
</div>
```
{ {}}Vue で定義されており插值表达式、その中にデータモデルが書かれており、そのときのこの位置にモデルのデータ値が表示されます。

全体的なコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {
   
   {username}}
</div>
<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
      
      
        el:"#app",
        data(){
      
        // data() 是 ECMAScript 6 版本的新的写法
            return {
      
      
                username:""
            }
        }

        /*data: function () {
            return {
                username:""
            }
        }*/
    });

</script>
</body>
</html>

1.3 Vue ディレクティブ

**命令: **HTML タグ上の v- プレフィックスが付いた特別な属性。異なる命令は異なる意味を持ちます。例: v-if、v-for...

一般的に使用されるコマンドは次のとおりです。

命令	効果
vバインド	hrefやcssスタイルの設定など、HTMLタグの属性値をバインドします。
v モデル	フォーム要素に双方向のデータバインディングを作成する
ヴオン	HTMLタグのバインディングイベント
v-if	条件付きで要素をレンダリングし、判定が true の場合にレンダリングし、それ以外の場合はレンダリングしない
v-その他
v-else-if
Vショー	条件に応じて要素を表示します。表示属性の値が切り替わる点が異なります
v-for	リストのレンダリング、コンテナーの要素またはオブジェクトのプロパティの走査

次に、これらの指示を 1 つずつ学習しましょう。

1.3.1 v-bind および v-model ディレクティブ

vバインド

このディレクティブは、モデルデータをタグの元の属性にバインドできます。このようにモデルデータが変化し、それに伴ってタグの属性値も変化します。

例えば：
```
<a v-bind:href="url">百度一下</a>
```
上記v-bind:"は:次のように簡略化できます。
```

<a :href="url">百度一下</a>
```
v モデル

このディレクティブは、モデルデータを項目タグを形成するようにバインドできます。このようにして、双方向の結合効果を達成できます。例えば：
```
<input name="username" v-model="username">
```

コードデモ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">点击一下</a>
    <a :href="url">点击一下</a>
    <input v-model="url">
</div>

<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
      
      
        el:"#app",
        data(){
      
      
            return {
      
      
                username:"",
                url:"https://www.baidu.com"
            }
        }
    });
</script>
</body>
</html>

ブラウザーで上記のページを開き、チェックを使用してハイパーリンクのパスを表示します。ハイパーリンクと入力ボックスは同じモデルデータにバインドされているため、入力ボックスに入力されたパスに応じて変更されます。

1.3.2 v-on ディレクティブ

ページ上にボタンを定義し、v-onコマンドを。HTML コードは次のとおりです。

<input type="button" value="一个按钮" v-on:click="show()">

使用するv-on場合はv-on:に置き換えて簡略化した書き方もできます@。htmlコードは以下の通りです

<input type="button" value="一个按钮" @click="show()">

上記のコードのバインディングはshow()、 Vue オブジェクトのmethodsプロパティで定義する必要があります。

new Vue({
    
    
    el: "#app",
    methods: {
    
    
        show(){
    
    
            alert("我被点了");
        }
    }
});

注:v-on:次のイベント名は、削除前の元のイベント属性名です。

例えば：

クリックイベント: イベント属性名は onclick で、vue で使用されます。v-on:click

ロストフォーカスイベント: イベント属性名は onblur で、vue で使用される場合v-on:blur

ページ全体のコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="一个按钮" v-on:click="show()"><br>
    <input type="button" value="一个按钮" @click="show()">
</div>
<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
      
      
        el:"#app",
        data(){
      
      
            return {
      
      
                username:"",
            }
        },
        methods:{
      
      
            show(){
      
      
                alert("我被点了...");
            }
        }
    });
</script>
</body>
</html>

1.3.3 条件判定命令

次に、コードを通じてそれを示してみましょう。次のようにVue でcountデータ。

//1. 创建Vue核心对象
new Vue({
    
    
    el:"#app",
    data(){
    
    
        return {
    
    
            count:3
        }
    }
});

countモデルのデータが 3 の場合はdiv1ページにコンテンツが表示され、countモデルdiv2ページにコンテンツが表示され、countモデルのデータがそれ以外の値の場合はページにコンテンツが表示されます。ページdiv3。ここでは、モデルデータcountの、countモデルデータをバインドする別の入力ボックスを定義します。htmlコードは次のとおりです。

<div id="app">
    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <input v-model="count">
</div>

ページ全体のコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <input v-model="count">
</div>

<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
      
      
        el:"#app",
        data(){
      
      
            return {
      
      
                count:3
            }
        }
    });
</script>
</body>
</html>

ブラウザでページを開き、入力ボックスに別の値を入力すると、次のような効果が得られます。

次にv-show命令.count モデルデータの値が 3 の場合はdiv v-showコンテンツ, それ以外の場合は表示されません. HTML ページのコードは次のとおりです

<div v-show="count == 3">div v-show</div>
<br>
<input v-model="count">

ブラウザを開いた場合の影響は次のとおりです。

上記の実証により、とは同じ効果があることがv-showわかりましたが、両者の違いは何でしょうか? v-ifブラウザの検査機能と照らし合わせてソースコードを表示します

上の図から、非表示の原則は、対応するラベルに css 属性を追加し、その属性値をに設定することで、非表示効果を実現しているv-showことがわかります。条件が満たされない場合はまったくレンダリングされないという指示です。displaynonev-if

1.3.4 v-for ディレクティブ

この命令は、その名前を見ると、それがトラバーサルに使用されることがわかります。この命令で使用される形式は次のとおりです。

<标签 v-for="变量名 in 集合模型数据">
    {
   
   {变量名}}
</标签>

注: ラベルは循環する必要があり、v-for命令はそのラベルに書かれています。

ページ上のコレクションモデルデータのインデックスを使用する必要がある場合は、次の形式を使用する必要があります。

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {
   
   {索引变量 + 1}} {
   
   {变量名}}
</标签>

コードデモ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-for="addr in addrs">
        {
   
   {addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
        {
   
   {i+1}}--{
   
   {addr}} <br>
    </div>
</div>

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

    //1. 创建Vue核心对象
    new Vue({
      
      
        el:"#app",
        data(){
      
      
            return {
      
      
                addrs:["北京","上海","西安"]
            }
        }
    });
</script>
</body>
</html>

ブラウザで開いた場合の効果は次のとおりです。

1.4 ライフサイクル

ライフサイクルの 8 つのフェーズ: ライフサイクルイベントがトリガーされるたびに、ライフサイクルメソッドが自動的に実行されます。これらのライフサイクルメソッドはフックメソッドとも呼ばれます。

以下の図は、Vue の作成から Vue オブジェクトの影響を受けるまでの全体プロセスと、Vue 公式 Web サイトで提供されている各段階に対応するフック関数を示しています。

上の図を見ると、この図にあまり注意を払う必要はありません。これらのフックメソッドにのみ注意する必要mountedが。

mounted: マウントが完了し、Vue が正常に初期化され、HTML ページが正常にレンダリングされました。そして、このメソッドの後半で、非同期リクエストを送信してデータをロードします。

1.5ケース

1.5.1 要件

Vue を使用してブランドリストデータクエリを簡素化し、前日に ajax を学習した後に実行した関数を追加します。

このケースでは、Vue を使用してフロントエンドコードを最適化するだけであり、バックエンドコードを変更する必要はありません。

1.5.2 すべての関数のクエリ

brand.html ページに vue js ファイルを導入します。
```
<script src="js/vue.js"></script>
```

Vueオブジェクトを作成する

Vue オブジェクトでモデルデータを定義する
フック関数で非同期リクエストを送信し、応答データをデータモデルに割り当てます。

new Vue({
      
      
    el: "#app",
    data(){
      
      
        return{
      
      
            brands:[]
        }
    },
    mounted(){
      
      
        // 页面加载完成后，发送异步请求，查询数据
        var _this = this;
        axios({
      
      
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
      
      
            _this.brands = resp.data;
        })
    }
})

ビューを変更する

Definition <div id="app"></div>、divタグが
上記のタグと同様に、bodyタグ内のすべてのコンテンツをコピーしますdiv
テーブルの冗長なデータ行を削除し、1 行だけを残します

v-forディレクティブを使用してテーブル内のデータ行を反復処理します。

<tr v-for="(brand,i) in brands" align="center">
    <td>{
       
       {i + 1}}</td>
    <td>{
       
       {brand.brandName}}</td>
    <td>{
       
       {brand.companyName}}</td>
    <td>{
       
       {brand.ordered}}</td>
    <td>{
       
       {brand.description}}</td>
    <td>{
       
       {brand.statusStr}}</td>
    <td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>

ページ全体のコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <!--
            使用v-for遍历tr
        -->
        <tr v-for="(brand,i) in brands" align="center">
            <td>{
   
   {i + 1}}</td>
            <td>{
   
   {brand.brandName}}</td>
            <td>{
   
   {brand.companyName}}</td>
            <td>{
   
   {brand.ordered}}</td>
            <td>{
   
   {brand.description}}</td>
            <td>{
   
   {brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>

<script>
    new Vue({
      
      
        el: "#app",
        data(){
      
      
            return{
      
      
                brands:[]
            }
        },
        mounted(){
      
      
            // 页面加载完成后，发送异步请求，查询数据
            var _this = this;
            axios({
      
      
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp) {
      
      
                _this.brands = resp.data;
            })
        }
    })
</script>
</body>
</html>

1.5.3 機能の追加

ページ操作の効果は次のとおりです。

全体的なプロセスは次のとおりです

注: フロントエンドコードの重要な点はv-model、コマンド。

addBrand.html ページに vue js ファイルを導入します。
```
<script src="js/vue.js"></script>
```

Vueオブジェクトを作成する

Vue オブジェクトでモデルデータを定義するbrand
ボタンにバインド機能を提供するsubmitForm()関数を定義します。提交
submitForm()関数内でajax リクエストを送信し、brandモデルデータをパラメータとして渡します

new Vue({
      
      
    el: "#app",
    data(){
      
      
        return {
      
      
            brand:{
      
      }
        }
    },
    methods:{
      
      
        submitForm(){
      
      
            // 发送ajax请求，添加
            var _this = this;
            axios({
      
      
                method:"post",
                url:"http://localhost:8080/brand-demo/addServlet",
                data:_this.brand
            }).then(function (resp) {
      
      
                // 判断响应数据是否为 success
                if(resp.data == "success"){
      
      
                    location.href = "http://localhost:8080/brand-demo/brand.html";
                }
            })

        }
    }
})

ビューを変更する

Definition <div id="app"></div>、divタグが
上記のタグと同様に、bodyタグ内のすべてのコンテンツをコピーしますdiv

モデルデータを各フォーム項目タグにバインドします。最後に、これらのデータはbrandオブジェクト

<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" v-model="brand.status" value="0">禁用
        <input type="radio" name="status" v-model="brand.status" value="1">启用<br>

        <input type="button" id="btn" @click="submitForm" value="提交">
    </form>
</div>

ページ全体のコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" v-model="brand.status" value="0">禁用
        <input type="radio" name="status" v-model="brand.status" value="1">启用<br>

        <input type="button" id="btn" @click="submitForm" value="提交">
    </form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
      
      
        el: "#app",
        data(){
      
      
            return {
      
      
                brand:{
      
      }
            }
        },
        methods:{
      
      
            submitForm(){
      
      
                // 发送ajax请求，添加
                var _this = this;
                axios({
      
      
                    method:"post",
                    url:"http://localhost:8080/brand-demo/addServlet",
                    data:_this.brand
                }).then(function (resp) {
      
      
                    // 判断响应数据是否为 success
                    if(resp.data == "success"){
      
      
                        location.href = "http://localhost:8080/brand-demo/brand.html";
                    }
                })
            }
        }
    })
</script>
</body>
</html>

上記の最適化により、フロントエンドコードは実際に大幅に簡素化されます。しかし、まだ見栄えの悪いページなので、ページを美しくする Element を学びましょう。

2、要素コンポーネント

2.0 Element コンポーネントの概要

要素: Ele.me のフロントエンド開発チームによって提供される Vue ベースの Web サイトコンポーネントライブラリのセットであり、Web ページを迅速に構築するために使用されます。

Element は、私たちが使用できる多くのコンポーネント (Web ページを構成する部品) を提供します。ハイパーリンク、ボタン、画像、表など~

下の写真の左側はページを書くときに見るボタン、上の写真の右側はElementが提供するページエフェクトで、その効果は一目瞭然です。

Element が実際に、コンポーネントを公式 Web サイトから独自のページにコピーして変更する方法を学習していることがわかります。公式 Web サイトの URL は次のとおりです。

https://element.eleme.cn/#/zh-CN

公式サイトにアクセスすると以下のページが表示されます

ここに画像の説明を挿入

次に直接クリックすると组件、次のページが表示されます

ここに画像の説明を挿入

2.1 クイックスタート

リソース04-资料\02-elementの下のフォルダーをelement-uiプロジェクトwebappにコピーします。ディレクトリ構造は次のとおりです

ページを作成し、Element の CSS、js ファイル、Vue.js をページに導入します。

<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

.Vueコアオブジェクトの作成

Element は Vue に基づいているため、Element を使用する場合は Vue オブジェクトを作成する必要があります
```
<script>
    new Vue({
        
        
        el:"#app"
    })
</script>
```
公式WebサイトからElementコンポーネントのコードをコピーします。

左側のメニューバーでそれを見つけてButton 按钮、好みのボタンスタイルを見つけてクリックすると显示代码、対応するコードが下に表示されます。そのコードを自分のページにコピーするだけです。

ページ全体のコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <el-row>
     	<el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">删除</el-button>
    </el-row>
    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
      
      
        el:"#app"
    })
</script>

</body>
</html>

2.2 要素の配置

Element には、次の 2 つのレイアウトメソッドが用意されています。

レイアウトレイアウト
コンテナレイアウトコンテナ

2.2.1 部分的なレイアウト

基本的な 24 列でレイアウトをすばやく簡単に作成できます。つまり、行はデフォルトで 24 列に分割され、各列が占める列の数はページ要件に従って設定されます。

左側のメニューバーで見つけてLayout 布局、好みのボタンスタイルを見つけてクリックすると、显示代码対応するコードが下に表示されます。表示されたコードにはスタイルとHTMLタグが含まれています。スタイルを自分のページのheadタグ、htmlタグを<div id="app"></div>タグにコピーします。

ページ全体のコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-row {
      
      
            margin-bottom: 20px;
        }
        .el-col {
      
      
            border-radius: 4px;
        }
        .bg-purple-dark {
      
      
            background: #99a9bf;
        }
        .bg-purple {
      
      
            background: #d3dce6;
        }
        .bg-purple-light {
      
      
            background: #e5e9f2;
        }
        .grid-content {
      
      
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
      
      
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
      
      
        el:"#app"
    })
</script>
</body>
</html>

次に、8 つのグリッドを表示するための行を追加する必要があります。計算すると、各グリッドは 3 列を占めます。具体的な HTML コードは次のとおりです。

<!--
添加一行，8个格子  24/8 = 3
-->
<el-row>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

2.2.2 コンテナレイアウトコンテナ

レイアウトに使用されるコンテナコンポーネントは、ページの基本構造をすばやく構築するのに便利です。次の図は、レイアウトコンテナーの効果です。

次の図は、公式 Web サイトが提供する Container レイアウトコンテナーの例です。

エフェクトコードには、スタイル、ページタグ、モデルデータが含まれます。内部のスタイル<style>をhead独自のページのタグにコピーし、 html タグを<div id="app"></div>タグ、データモデルをvueオブジェクトdata()にコピーします。

ページ全体のコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-header {
      
      
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
      
      
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-submenu index="2-1">
                        <template slot="title">选项1</template>
                        <el-menu-item index="2-1-1">选项1-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
      
      
        el:"#app",
        data() {
      
      
            const item = {
      
      
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
      
      
                tableData: Array(20).fill(item)
            }
        }
    })
</script>
</body>
</html>

2.3 事例

他のコンポーネントは、ページを完成させることで学習します。

次のページ効果を完成させたいと考えています

ページを完成させるには、まずページを分析してページが構成されている場所を確認し、それを公式 Web サイトにコピーして変更する必要があります。ページには合計次のコンポーネントがあります

ここに画像の説明を挿入

もう 1 つは、新增ボタン

2.3.1 基本ページの準備

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
      
      
        el: "#app"
    })
</script>
</body>
</html>

2.3.2 フォーム表示を完了する

Element を使用する全体的な考え方は次のとおりです。コピー+変更。

2.3.2.1 コピー

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-Dwm36pjK-1659351169452)(assets/image-20210831185937618.png)]

左側のメニューバーを見つけてクリックするTable 表格と、右側の本体がテーブルを見つけ、必要なテーブル効果 (上の図を参照) を見つけて、クリックして显示代码このテーブルのコードを表示します。

次のように、 HTML タグ<div id="app"></div>をに。

次のように、 CSS スタイルをページのheadタグ。

メソッドとモデルデータを Vue オブジェクトで指定された場所にコピーします。

コピーが完了したら、ブラウザで開いてテーブルの効果を確認します。

[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-Lo2ugx9m-1659351169452)(assets/image-20210831191234876.png)]

テーブル効果は出ていますが、表示されるヘッダーとデータが目的のものではないため、次にページのコードを修正する必要があります。

2.3.2.2 修正

ヘッダーとデータを変更する

以下は、フォームコードに対して実行される分析の図です。以下の図の指示に従って、列の数と列名を変更します。

ページを変更した後は、バインドされたモデルデータを変更する必要があります。次の図は、モデルデータの分析を示しています。
テーブルにアクション列を追加する

前のテーブルから列をコピーして変更します。ボタンは公式 Web サイトのButton 按钮コンポーネント
テーブルにチェックボックス列とラベル列を追加する

テーブルにチェックボックスとラベル列を追加すると、次のような効果が得られます。

この効果もElementの公式Webサイトからコピーされています。まず、対応するテーブル効果を見つけて、その対応するコードをコードにコピーします。以下は、公式Webサイトのチェックボックス列の効果図とコードです。

ここに画像の説明を挿入

ここで注目すべきは、<el-table>タグ@selection-change="handleSelectionChange"。ここでバインドされている関数も、公式 Web サイトから独自のページのコードにコピーする必要があります。関数コードは次のとおりです。

ここに画像の説明を挿入

この関数から、モデルデータが必要であることがわかりmultipleSelection 、モデルデータを定義する必要があります。

ラベル列も同様にコピーおよび変更されます。

2.3.3 完全な検索フォームの表示

Element公式サイトで横長フォームエフェクトを見つけて、コードをコピーして修正します。
ここに画像の説明を挿入

上記をクリックする显示代码と、対応するコードが表示されます。以下は、コードのこの部分の分析の図です。

[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-RUNIJD8F-1659351169454)(assets/image-20210831194835721.png)]

次に、必要な効果に応じてコードを変更します。

2.3.4 完全一括削除と追加ボタン表示

Element公式Webサイトから着色効果のあるボタンを見つけて、コードを独自のページにコピーします

2.3.5 ダイアログボックスの表示を完了する

Element 公式 Web サイトで次のダイアログボックスを見つけます。

公式ウェブサイトで提供されているコードを以下で分析します

上図で解析したモデルデータをVueオブジェクトに定義する必要があります。

2.3.6 ページネーションバーの表示を完了する

Element の公式 Web サイトで見つけてPagination 分页、次のようにページのメイン部分で必要なエフェクトを見つけます。

クリックして対応する显示代码コードを見つけ、コードを分析します完整功能

上記のコード属性の説明:

page-size: ページごとに表示するエントリの数
page-sizes：各ページに数量セレクターのオプション設定を表示します。

:page-sizes="[100,200,300,400]"対応するページ効果は次のとおりです。
currentPage: 現在のページ番号。そのページ番号をクリックすると、この属性の値がいくつか表示されます。
total：合計。データエントリの総数を設定するために使用されます。このプロパティを設定すると、Element は分割する必要があるページ数を自動的に計算し、対応するページ番号を表示します。

イベントの説明:

size-change:pageSize が変更されたときに発生します。つまり、各ページに表示されるアイテムの数を変更すると、このイベントがトリガーされます。
current-change:currentPage が変更されると発生します。つまり、他のページ番号をクリックすると、イベントがトリガーされます。

2.3.7 完全なページコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
      
      
            background: oldlace;
        }
        .el-table .success-row {
      
      
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->
    <el-row>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>
    
    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>
            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>

</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
      
      
        el: "#app",
        methods: {
      
      
            tableRowClassName({
       
       row, rowIndex}) {
      
      
                if (rowIndex === 1) {
      
      
                    return 'warning-row';
                } else if (rowIndex === 3) {
      
      
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
      
      
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
      
      
                console.log(this.brand);
            },
            // 添加数据
            addBrand(){
      
      
                console.log(this.brand);
            },
            //分页
            handleSizeChange(val) {
      
      
                console.log(`每页 ${ 
        val} 条`);
            },
            handleCurrentChange(val) {
      
      
                console.log(`当前页: ${ 
        val}`);
            }
        },
        data() {
      
      
            return {
      
      
                // 当前页码
                currentPage: 4,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,

                // 品牌模型数据
                brand: {
      
      
                    status: '',
                    brandName: '',
                    companyName: '',
                    id:"",
                    ordered:"",
                    description:""
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{
      
      
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
      
      
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
      
      
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
      
      
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }]
            }
        }
    })
</script>
</body>
</html>

3. 包括的なケース

3.1 機能紹介

以上が包括的な場合に実現したい機能です。データの追加、削除、変更、クエリの機能に加えて、批量删除、分页查询、条件查询その他の関数などの複雑な関数もいくつかあります。

批量删除機能: 各データの前にチェックボックスがあり、複数のデータを選択して批量删除ボタンをバックエンドにリクエストが送信され、データベースに指定された複数のデータが削除されます。
分页查询機能: データベース内のデータが多い場合、すべてのデータを 1 ページに表示することができないため、データをページ単位で表示する必要があります。
条件查询機能: データベースが大きい場合、見たいデータを正確にクエリする必要があり、このとき、条件によってクエリを実行する必要があります。

ここで修改品牌のとの删除品牌コースでは説明されず、学生の演習として残されます。

3.2 環境の準備

環境整備主に以下の2つを行います。

データのブランドケースモジュールをアイデアにインポートします
データで提供されている tb_brand.sql スクリプトを実行します。

3.2.1 プロジェクトの準備

プロジェクトを私たち自身のアイデアに04-资料\01-初始工程インポートします。brand-caseプロジェクトの構造は次のとおりです。

3.2.2 テーブルの作成

以下はテーブルを作成するステートメントです

-- 删除tb_brand表
drop table if exists tb_brand;
-- 创建tb_brand表
create table tb_brand (
    -- id 主键
    id           int primary key auto_increment,
    -- 品牌名称
    brand_name   varchar(20),
    -- 企业名称
    company_name varchar(20),
    -- 排序字段
    ordered      int,
    -- 描述信息
    description  varchar(100),
    -- 状态：0：禁用  1：启用
    status       int
);
-- 添加数据
insert into tb_brand (brand_name, company_name, ordered, description, status)
values 
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1);

3.3 すべての関数のクエリ

[外部リンク画像の転送に失敗しました。ソースサイトには盗難防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-qkTxr4vn-1659351169455)(../../../../ ../Chuanzhi Podcast/ 2021/Web ステージのドキュメント作成/JavaWeb コースのドキュメント/day14-包括的なケース/assets/image-20210825200138600.png)]

上図に示すように、ページ上のすべてのブランドデータを表示する効果をクエリします。この機能を実現するには、まず次の問題を理解する必要があります。

非同期リクエストはいつ送信すればよいですか?

ページが読み込まれた後は、すべてのブランドデータがページ上に表示される必要があります。したがって、mounted()この。
リクエストにはパラメータが必要ですか?

すべての関数をクエリするためにパラメータを運ぶ必要はありません。
レスポンスのデータ形式は何ですか?

バックエンドはList<Brand>オブジェクトを。応答データの形式は次のとおりです。

全体的なプロセスは次のとおりです

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-uoct9gEy-1659351169455)(../../../../. ./Chuanzhi Podcast/ 2021/Web ステージのドキュメント作成/JavaWeb コースのドキュメント/day14-包括的なケース/assets/image-20210825200332542.png)]

最初にバックエンドプログラムを実装し、次にフロントエンドプログラムを実装します。

3.3.1 バックエンドの実装

3.3.1.1 Daoメソッドの実装

com.itheima.mapper.BrandMapperインターフェイスで抽象メソッドを定義し、@Selectアノテーションを使用して SQL ステートメントを作成します。

/**
     * 查询所有
     * @return
     */
@Select("select * from tb_brand")
List<Brand> selectAll();

テーブル内の一部のフィールド名はエンティティクラスの属性名に対応していないため、com/itheima/mapper/BrandMapper.xmlマッピングresultMapタグを使用する必要があります。マッピング設定ファイルの内容は次のとおりです。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.mapper.BrandMapper">

    <resultMap id="brandResultMap" type="brand">
        <result property="brandName" column="brand_name" />
        <result property="companyName" column="company_name" />
    </resultMap>
</mapper>

結果のマッピング関係を定義した後、インターフェイスselectAll()メソッド。@ResultMap("brandResultMap")注釈を使用する

完全なインターフェイスのselectAll()メソッドは次のとおりです。

/**
     * 查询所有
     * @return
     */
@Select("select * from tb_brand")
@ResultMap("brandResultMap")
List<Brand> selectAll();

3.3.1.2 サービスメソッドの実装

com.itheima.servicepackageの下にインターフェイスを作成しBrandService、このインターフェイス内のすべての抽象メソッドを定義してクエリします。

public interface BrandService {
    
    

    /**
     * 查询所有
     * @return
     */
    List<Brand> selectAll();
}

そして、com.itheima.service配下にimpl;implこれは、サービス層インターフェースの実装クラスを置くパッケージであることを意味します。このパッケージの下に、という名前のBrandServiceImplクラス

public class BrandServiceImpl implements BrandService {
    
    

    @Override
    public List<Brand> selectAll() {
    
    
    }
}

なぜここでサービスのインターフェースを定義するのでしょうか? サービスがインターフェイスを定義した後、次のようにサーブレット内でサービス実装クラスのオブジェクトをポリモーフィズムの形式で作成できるためです。

ここでポリモーフィズムが使用されているのは、後で結合を解除しServletたりservice。上記のコードから、クラスとクラスが結合されているSelectAllServletことがわかります。後で他のより適切な実装クラス ( など) が存在する場合は、クラス。後でフレームワークを、クラスと赤いボックスで囲まれたコードを分離できます。しかし、今はデカップリングを行うことはできません。ここで必要なのは、インターフェイスが定義されている理由を理解することだけです。BrandServiceImplBrandServiceBrandServiceImplSelectAllServletSpringSelectAllServlet

BrandServiceImplクラスコードは次のとおりです。

public class BrandServiceImpl implements BrandService {
    
    
    //1. 创建SqlSessionFactory 工厂对象
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

    @Override
    public List<Brand> selectAll() {
    
    
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        List<Brand> brands = mapper.selectAll();

        //5. 释放资源
        sqlSession.close();

        return brands;
    }
}

3.3.1.3 サーブレットの実装

com.itheima.web.servletパッケージの下で、 SelectAllServletAll という名前のクエリを定義しますservlet。servletロジックは次のとおりです。

サービスselectAll()メソッドすべてのブランドデータをクエリすると、インターフェイスが結果を返します。
返された結果をjsonデータに変換する
レスポンスのjsonデータ

コードは以下のように表示されます。

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    
    

    private BrandService brandService = new BrandServiceImpl();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        //1. 调用service查询
        List<Brand> brands = brandService.selectAll();
        //2. 转为JSON
        String jsonString = JSON.toJSONString(brands);
        //3. 写数据
        response.setContentType("text/json;charset=utf-8"); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码
        response.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        this.doGet(request, response);
    }
}

3.3.1.4 バックエンドプログラムのテスト

ブラウザでサーブレットにアクセスするためのリソースパスを入力しhttp://localhost:8080/brand-case/selectAllServlet、エラーがなく以下の情報が表示されれば、バックエンドプログラムに問題がないことを意味します。

ここに画像の説明を挿入

3.3.2 フロントエンドの実装

フロントエンドはページがロードされた後に ajax リクエストを送信する必要があるため、リクエストを送信するロジックをmounted()フック。応答によって返されたデータは、テーブルによってバインドされたデータモデルに割り当てる必要があります。以下の図から、テーブルによってバインドされたデータモデルが次のとおりであることがわかります。tableData

フロントエンドのコードは次のとおりです。

 mounted(){
    
    
     //当页面加载完成后，发送异步请求，获取数据
     var _this = this;

     axios({
    
    
         method:"get",
         url:"http://localhost:8080/brand-case/selectAllServlet"
     }).then(function (resp) {
    
    
         _this.tableData = resp.data;
     })
 }

3.4 機能の追加

上図はデータを追加するダイアログボックスで、提交ボタンデータをバックエンドに送信し、データベースに保存する必要があります。次の図は全体的なプロセスを示しています。

ここに画像の説明を挿入

ページがリクエストを送信するとき、入力ボックスに入力された内容をバックエンドプログラムに送信する必要があり、ここでは json 形式で渡されます。具体的なデータ形式は次のとおりです。
ここに画像の説明を挿入

注: データが追加されるため、上記の JSON データの ID には値がありません。

3.4.1 バックエンドの実装

3.4.1.1 Daoメソッドの実装

BrandMapperインターフェースでadd メソッドを定義しadd()、@InsertアノテーションをSQL ステートメントを記述します。

/**
     * 添加数据
     * @param brand
     */
@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void add(Brand brand);

3.4.1.2 サービスメソッドの実装

BrandServiceインターフェイスにadd()データを追加するビジネスロジックメソッドを定義する

/**
     * 添加数据
     * @param brand
     */
void add(Brand brand);

BrandServiceImplクラス内のメソッドをオーバーライドしadd()てビジネスロジックを実装する

@Override
public void add(Brand brand) {
    
    
    //2. 获取SqlSession对象
    SqlSession sqlSession = factory.openSession();
    //3. 获取BrandMapper
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

    //4. 调用方法
    mapper.add(brand);
    sqlSession.commit();//提交事务

    //5. 释放资源
    sqlSession.close();
}

注: 追加、削除、変更操作ではトランザクションを送信する必要があります。

3.4.1.3 サーブレットの実装

com.itheima.web.servletパッケージ内にServlet という名前の定義を記述しますAddServlet。このサーブレットのロジックは次のとおりです。

ページによって送信されたデータを受信します。ページによって送信されるデータは json 形式であるため、ここでは入力ストリームを使用してデータを読み取る必要があります
受信したデータをBrandオブジェクト
サービスのadd()メソッドをビジネスロジック処理を追加します
ブラウザの応答に成功のロゴを追加します。ここでは、成功を示すsuccess文字列

サーブレットコードは次のように実装されます。

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    
    

    private BrandService brandService = new BrandServiceImpl();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    

        //1. 接收品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串
        //转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);
        //2. 调用service添加
        brandService.add(brand);
        //3. 响应成功的标识
        response.getWriter().write("success");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        this.doGet(request, response);
    }
}

3.4.2 フロントエンドの実装

ここに画像の説明を挿入

上の図の左側はページ効果で、その中の提交ボタンは上の図の右側からクリックイベントがバインドされており、イベントがaddBrand関数にバインドされていることがわかります。そのため、追加するためのロジックコードデータはaddBrand()関数。このメソッドでは、非同期リクエストを送信し、フォームに入力されたデータをパラメータとして渡す必要があります。次のように

// 添加数据
addBrand() {
    
    
    var _this = this;

    // 发送ajax请求，添加数据
    axios({
    
    
        method:"post",
        url:"http://localhost:8080/brand-case/addServlet",
        data:_this.brand
    }).then(function (resp) {
    
    
       	//响应数据的处理逻辑
    })
}

then関数内の無名関数は成功後のコールバック関数であり、resp.dataレスポンスで返されるデータを取得することができ、値がであればデータの追加に成功したsuccessことを意味します。成功したら、いくつかのロジック処理を行う必要があります。

「追加」ダイアログウィンドウを閉じます。

データを追加するダイアログボックスのコードを次の図に示します。コードから、ダイアログボックスがdialogVisibleデータ窓。
データの再クエリ

データの追加が成功したかどうかに関係なく、ユーザーがページ上でデータを表示できれば、追加は成功したことになります。ここでは、すべてのブランドデータを取得するために非同期リクエストを再送信する必要があります。このコードは查询所有関数ため、この関数コードを抽出してselectAll()関数に抽出できます。
```
// 查询所有数据
selectAll(){
      
      
    var _this = this;

    axios({
      
      
        method:"get",
        url:"http://localhost:8080/brand-case/selectAllServlet"
    }).then(function (resp) {
      
      
        _this.tableData = resp.data;
    })
}
```
次に、mounted()フック
```
mounted(){
      
      
    //当页面加载完成后，发送异步请求，获取数据
    this.selectAll();
}
```
同時に、新しい応答のコールバックを呼び出してデータselectAll()を再クエリします。
追加が成功したことをユーザーに通知するポップアップメッセージ

ここに画像の説明を挿入

上の図の左側は elementUI 公式 Web サイトで提供されている成功プロンプトコードであり、上の図の右側は具体的な効果です。

注: 上記の this は、VUE オブジェクトの this を表す必要があります。

要約すると、フロントエンドのコードは次のとおりです。

// 添加数据
addBrand() {
    
    
    var _this = this;

    // 发送ajax请求，添加数据
    axios({
    
    
        method:"post",
        url:"http://localhost:8080/brand-case/addServlet",
        data:_this.brand
    }).then(function (resp) {
    
    
        if(resp.data == "success"){
    
    
            //添加成功
            //关闭窗口
            _this.dialogVisible = false;
            // 重新查询数据
            _this.selectAll();
            // 弹出消息提示
            _this.$message({
    
    
                message: '恭喜你，添加成功',
                type: 'success'
            });
        }
    })
}

// 发送ajax请求，添加数据
axios({
    method:"post",
    url:"http://localhost:8080/brand-case/addServlet",
    data:_this.brand
}).then(function (resp) {
   	//响应数据的处理逻辑
})

}


在 `then` 函数中的匿名函数是成功后的回调函数，而 `resp.data` 就可以获取到响应回来的数据，如果值是 `success` 表示数据添加成功。成功后我们需要做一下逻辑处理：

1. **关闭新增对话框窗口**

   如下图所示是添加数据的对话框代码，从代码中可以看到此对话框绑定了 `dialogVisible` 数据模型，只需要将该数据模型的值设置为 false，就可以关闭新增对话框窗口了。

   <img src="../../../../../传智播客/2021年/web阶段文档编写/JavaWeb课程文档/day14-综合案例/assets/image-20210825223933953.png" alt="image-20210825223933953" style="zoom:70%;" />

2. **重新查询数据**

   数据添加成功与否，用户只要能在页面上查看到数据说明添加成功。而此处需要重新发送异步请求获取所有的品牌数据，而这段代码在 `查询所有` 功能中已经实现，所以我们可以将此功能代码进行抽取，抽取到一个 `selectAll()` 函数中

   ```js
   // 查询所有数据
   selectAll(){
       var _this = this;
   
       axios({
           method:"get",
           url:"http://localhost:8080/brand-case/selectAllServlet"
       }).then(function (resp) {
           _this.tableData = resp.data;
       })
   }

次に、mounted()フック

mounted(){
    
    
    //当页面加载完成后，发送异步请求，获取数据
    this.selectAll();
}

同時に、新しい応答のコールバックを呼び出してデータselectAll()を再クエリします。

追加が成功したことをユーザーに通知するポップアップメッセージ

[外部リンク画像転送...(img-bPupratK-1659351169457)]

上の図の左側は elementUI 公式 Web サイトで提供されている成功プロンプトコードであり、上の図の右側は具体的な効果です。

注: 上記の this は、VUE オブジェクトの this を表す必要があります。

要約すると、フロントエンドのコードは次のとおりです。

// 添加数据
addBrand() {
    
    
    var _this = this;

    // 发送ajax请求，添加数据
    axios({
    
    
        method:"post",
        url:"http://localhost:8080/brand-case/addServlet",
        data:_this.brand
    }).then(function (resp) {
    
    
        if(resp.data == "success"){
    
    
            //添加成功
            //关闭窗口
            _this.dialogVisible = false;
            // 重新查询数据
            _this.selectAll();
            // 弹出消息提示
            _this.$message({
    
    
                message: '恭喜你，添加成功',
                type: 'success'
            });
        }
    })
}

次のコードは継続的に更新されます...

JavaWebフロントエンドフレームワークVUEとElementコンポーネントの詳細説明

記事ディレクトリ

序文

1. フロントエンドフレームワーク - VUE

1.1 概要

1.2 クイックスタート

1.3 Vue ディレクティブ

1.3.1 v-bind および v-model ディレクティブ

1.3.2 v-on ディレクティブ

1.3.3 条件判定命令

1.3.4 v-for ディレクティブ

1.4 ライフサイクル

1.5ケース

1.5.1 要件

1.5.2 すべての関数のクエリ

1.5.3 機能の追加

2、要素コンポーネント

2.0 Element コンポーネントの概要

2.1 クイックスタート

2.2 要素の配置

2.2.1 部分的なレイアウト

2.2.2 コンテナレイアウトコンテナ

2.3 事例

2.3.1 基本ページの準備

2.3.2 フォーム表示を完了する

2.3.2.1 コピー

2.3.2.2 修正

2.3.3 完全な検索フォームの表示

2.3.4 完全一括削除と追加ボタン表示

2.3.5 ダイアログボックスの表示を完了する

2.3.6 ページネーションバーの表示を完了する

2.3.7 完全なページコード

3. 包括的なケース

3.1 機能紹介

3.2 環境の準備

3.2.1 プロジェクトの準備

3.2.2 テーブルの作成

3.3 すべての関数のクエリ

3.3.1 バックエンドの実装

3.3.1.1 Daoメソッドの実装

3.3.1.2 サービスメソッドの実装

3.3.1.3 サーブレットの実装

3.3.1.4 バックエンドプログラムのテスト

3.3.2 フロントエンドの実装

3.4 機能の追加

3.4.1 バックエンドの実装

3.4.1.1 Daoメソッドの実装

3.4.1.2 サービスメソッドの実装

3.4.1.3 サーブレットの実装

3.4.2 フロントエンドの実装

おすすめ