1. 程式人生 > >JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(一)

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(一)

前言:出於某種原因,需要學習下Knockout.js,這個元件很早前聽說過,但一直沒嘗試使用,這兩天學習了下,覺得它真心不錯,雙向繫結的機制簡直太爽了。今天打算結合bootstrapTable和Knockout去實現一個簡單的增刪改查,來體驗一把神奇的MVVM。關於WebApi的剩餘部分,博主一定抽時間補上。

一、Knockout.js簡介

1、Knockout.js和MVVM

如今,各種前端框架應接不暇,令人眼花繚亂,有時不得不感嘆作為程式猿也真是苦逼,總有學不完的技術,何時是盡頭,除非你轉化!苦海無邊,回頭是不是岸,由你決定!

Knockout.js是一個基於MVVM模式的輕量級的前端框架,有多輕?根據官網上面顯示的最新版本v3.4.0,僅22kb。能夠友好地處理資料模型和介面DOM的繫結,最重要的是,它的繫結是雙向的,也就是說資料模型變化了,介面DOM上的資料也會跟著發生變化,反過來,介面DOM上的資料變化了,資料模型也會相應這個變化。這樣能夠大大減少我們的前端程式碼量,並且使得我們介面易於維護,再也不用寫一大堆事件監控資料模型和介面DOM的變化了。下面博主會根據一個使用例項來說明這兩點。

MVVM模式:這是一種建立使用者介面的設計模式,MVVM把它拆分成三塊就是Model、View、ViewModel,Model就是資料模型,View就是我們的檢視,ViewModel就是一個檢視模型,用來繫結資料模型和檢視上面的dom元素。如果你使用過WPF和Silverlight,理解這個應該不是啥問題;沒有使用過也什麼關係,看完此文,你會有一個大致的認識。

2、最簡單的例項

 一般來說,如果你從零開始使用Knockout.js,你至少需要做以下四部

2.1、去官網下載knockout.js檔案,然後引用到view頁面裡面。

<script src="~/scripts/knockout/knockout-3.4.0.min.js"
></script>

注意:knockout.js並不需要jquery的支援,如果你的專案需要用到jquery的相關操作,則引用jquery;否則只引用以上檔案即可。

2.2、定義ViewModel

viewmodel是什麼?其實,在js裡面,它看上去就像一個json物件。我們定義一個viewmodel:

        var myViewModel = {
            Name: "Lilei",
            profession: "軟體工程師",
        };

2.3、view視圖裡面定義繫結data-bind的標籤

    <div> 
        姓名:<label data-bind="text:Name"></label><br />
        職業:<input type="text" data-bind="textinput:Profession" />
    </div>

注意:對應input標籤的文字,需要使用textinput,而普通標籤的文字使用text即可。

2.4、啟用繫結

做了以上三步,還需要啟用knockout的繫結

ko.applyBindings(myViewModel);

做到這四部,基本實現了一個最簡單的viewmodel的資料繫結。得到效果:

如果你夠細心,會發現ko.applyBindings()方法有兩個引數,第一個就是我們需要繫結的viewmodel,第二個又是什麼呢?由 ko.applyBindings(myViewModel); 可知,第二個引數是一個可選引數,它表示viewmodel繫結的標籤的作用域,比如,我們將以上程式碼改一下:

    <div> 
        姓名:<label id="lb_name" data-bind="text:Name"></label><br />
        職業:<input type="text" data-bind="textinput:Profession" />
    </div>
ko.applyBindings(myViewModel,document.getElementById("lb_name"));

得到結果:

由此可知:第二個引數限定了myViewModel的作用範圍,也就是說,只有在id="lb_name"的標籤上面繫結才會生效,如果第二個引數是div等容器標籤,它表示該繫結的範圍為該div下面的所有子標籤。

3、監控屬性

截止到上面的四步,我們看不到任何效果,看到的無非就是將一個json物件的的資料繫結到了html標籤上面,這樣做有什麼意義呢?不是把簡單的問題複雜化嗎?別急,馬上見證奇蹟!上文說了,knockout最重要的意義在於雙向繫結,那麼如何實現我們的雙向繫結呢?答案就是監控屬性。

在knockout裡面,核心的有三個監控屬性:Observables,DependentObservables,ObservableArray,Observe的意思翻譯過來是觀察、觀測的意思,如果說成觀察屬性或者觀測屬性感覺不太恰當,我們暫且叫監控屬性。

3.1、Observables:監控屬性

我們將上面的例子改成這樣:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index3</title>
    <script src="~/scripts/jquery-1.9.1.min.js"></script>
    <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
</head>
<body>
    <div> 
        姓名:<label data-bind="text:Name"></label><br />
        職業:<input type="text" data-bind="textinput:Profession" />
    </div>
    <div>
        <input type="text" id="txt_testobservable" />
    </div>
    <script type="text/javascript">
        //1.定義ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: "軟體工程師",
        };

        //2.啟用繫結
        ko.applyBindings(myViewModel);

        $(function () {
            //註冊文字框的textchange事件
            $("#txt_testobservable").on("input", function () {
                myViewModel.Name($(this).val());
            });
        });
    </script>
</body>

 ko.observable("Lilei") 這一句的意義是將viewmodel的Name屬性新增成為監控屬性,一定Name屬性變成監控屬性,神奇的事情就發生了,我們來看看當我們寫myViewModel.的時候:

Name由原來的屬性變成方法了,也就是說一旦添加了ko.observable(),那麼對應的屬性就會變成方法,那麼對於Name的取值和賦值都需要使用myViewModel.Name()來處理。我們先來看看效果:

程式碼釋疑:很顯然  myViewModel.Name($(this).val()); 這一句將當前文字框的值賦給了Name屬性,由於介面綁定了Name屬性,所以label裡面的值也隨之發生了變化。或者你會說,這個使用textchange事件也可以做到的,只要將當前文字框的值賦給label標籤,也可以達到這個效果,這個不算什麼。確實,你的寫法也可以達到目的,但是我們的監控屬性的意義在於,任何地方改變了Name的值,介面都會隨之變化,而不用每個地方去給label標籤賦值,JS裡面只需要把關注點方法myViewModel.Name()上面即可。是不是很厲害~~

3.2、DependentObservables:監控依賴屬性

如果看了上面的監控屬性還沒過癮?下面再來看看監控依賴屬性的使用。

我們將程式碼再改下看看:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index3</title>
    <script src="~/scripts/jquery-1.9.1.min.js"></script>
    <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
</head>
<body>
    <div> 
        姓名:<input type="text" data-bind="textinput:Name" /><br />
        職業:<input type="text" data-bind="textinput:Profession" /><br />
        描述:<label data-bind="text:Des"></label>
    </div>
    <script type="text/javascript">
        //1.定義ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: ko.observable("軟體工程師"),
        };
        myViewModel.Des = ko.dependentObservable(function () {
            return "本人姓名——" + myViewModel.Name() + ",職業——" + myViewModel.Profession();
        });

        //2.啟用繫結
        ko.applyBindings(myViewModel);</script>
</body>

先來看看效果:

程式碼釋疑:通過新增監控依賴屬性  ko.dependentObservable() 將Des屬性的值能同時監控到Name和Profession兩個的變化,其中任何一個發生變化,Des繫結的標籤都會觸發改變,這樣做的最大好處就是避免了我們js去操作dom的麻煩,有點意思吧。

3.3、ObservableArray;監控陣列

除了上面兩種,ko還支援對陣列物件的監控。我們來看一個例子:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index3</title>
    <script src="~/scripts/jquery-1.9.1.min.js"></script>
    <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
</head>
<body>
    <div><select data-bind="options:deptArr,
                           optionsText:'Name'"></select>

    </div>
    <div>
        <input type="text" id="txt_testobservable" /><input type="button" id="btn_test" value="新增部門" />
    </div>
    <script type="text/javascript">
            var deptArr = ko.observableArray([
                { id: 1, Name: '研發部' },
                { id: 2, Name: '行政部' },
                { id: 3, Name: '人事部' }
            ]);
            var viewModel = {
                deptArr: deptArr,
            };

            ko.applyBindings(viewModel);

            var i=4;
            $(function () {
                $("#btn_test").on("click", function () {
                    deptArr.push({ id: i++, Name: $("#txt_testobservable").val() });
                });
            });
    </script>
</body>

看看效果:

程式碼釋疑:以上通過ko.observableArray()這個方法添加了對陣列物件的監控,也就是說,js裡面任何地方只要對deptArr陣列物件做了陣列的改變,都會觸發UI給出相應。需要注意的一點是,監控陣列實際上是監控的陣列物件本身,對於陣列物件裡面的子物件屬性發生變化,是無法監控到的。比如我們將點選事件改成這樣:

            $(function () {
                $("#btn_test").on("click", function () {
                    deptArr[1].Name = "aaa";
                });
            });

效果:

由此說明陣列監控實際上監控的是陣列物件本身,對於數組裡面元素的屬性變化不會監控。如果確實需要對資料裡面物件的屬性變化進行監控,需要再對資料裡面物件屬性使用ko.observable(),兩者聯合使用。有興趣的可以試試。

4、ko裡面常見的data-bind屬性

上文中,我們使用了多個data-bind屬性,那麼在knockout裡面,到底有多少個這種data-bind的屬性呢。這裡我們列出一些常用的屬性。

4.1、text和inputText

text,顧名思義就是文字的意思,這個繫結屬性一般用於<label>、<span>、<div>等標籤顯示文字,當然,如果你願意,任何標籤都可以使用這個繫結。它是使用基本上沒什麼好說的。如果沒有使用ko.observable(),則是靜態繫結,否則是動態繫結。

inputText,input標籤的文字,相當於input標籤的value屬性。

  <div> 
        姓名:<label data-bind="text:Name"></label><br />
        職業:<input type="text" data-bind="textinput:Profession" />
    </div>
     //1.定義ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: "軟體工程師",
        };

        //2.啟用繫結
        ko.applyBindings(myViewModel);

4.2、value

這個繫結屬性一般用於input標籤,和上面的inputText基本相似。只不過value更加規範。

和value一起使用的還有一個引數valueUpdate,它表示介面做一個什麼操作的時候更新該value。valueUpdate主要取值有change/keyup/keypress/afterkeydown等。分別表示文字變化、鍵盤縮起、鍵盤按下、鍵盤按下之後等操作時候更新value對應的viewmodel的值。

姓名:<input type="text" data-bind="value:Name,valueUpdate:'keyup'" /><br />
    var myViewModel = {
            Name: ko.observable("Lilei"),
        };//2.啟用繫結
        ko.applyBindings(myViewModel);

上述程式碼表示鍵盤收起的時候更新文字框的value屬性和myViewModel的Name屬性。

4.3、checked

checked繫結一般用於checkbox、radio等可以選中的表單元素,它對應的值是bool型別。和value的用法基本相似,就不做重複說明。

4.4、enable

enable繫結一般用於是否啟用標籤元素,一般用於表單元素的啟用和禁用。和disabled相反,對應的值也是bool型別。

   <div>
        <input type="text" data-bind="enable:IsMen"/>
    </div>
    <script type="text/javascript">
        //1.定義ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: ko.observable("軟體工程師"),
            Age: ko.observable(40),
            IsMen:ko.observable(true)
        };

        //2.啟用繫結
        ko.applyBindings(myViewModel);
        myViewModel.IsMen(false);

    </script>

由於IsMen屬性變成了false,所有對應的文字框會顯示禁用狀態。

4.5、disabled

和enable相反,用法和enable類似。

4.6、options

上文中在使用select的繫結時候使用過options,它表示select標籤的option的集合,對應的值為一個數組,表示這個下拉框的資料來源。可以使用observableArray啟用對這個資料來源的監控。用法見上面。

4.7、html

text繫結實際上是對標籤innerText的設定和取值,那麼同理,html繫結也是對innerHTML的設定和取值。它對應的值為一段html標籤。

4.8、css

css繫結是新增或刪除一個或多個樣式(class)到DOM元素上。使用格式:

    <style type="text/css">
        .testbold {
        background-color:powderblue;
        }
    </style>
<div data-bind="css:{testbold:myViewModel.Name()=='Lilei'}">aaaa</div>
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: ko.observable("軟體工程師"),
            Age:ko.observable(40)
        };

該div會顯示背景色。

如果需要增加或移除多個樣式,只要稍微改下即可,比如:

<div data-bind="css:{testbold:myViewModel.Name()=='Lilei',testborder:myViewModel.Profession()=='PHP工程師'}">aaaa</div>

4.9、style

如果css繫結的作用是向標籤動態新增或移除class樣式,那麼style繫結的作用就是想標籤動態新增或移除某一個樣式。比如:

<div data-bind="css:{background-color:myViewModel.Name()=='Lilei'?'red':'white'}">aaaa</div>

如果是新增或者移除多個,同css繫結的用法

4.10、attr

attr繫結主要用於向標籤新增移除某一個或多個屬性(包括自定義屬性),永和和css類似。

4.11、click

click繫結表示在對應的DOM元素上面新增點選事件的執行方法。可以在任意元素上面使用。

    <div>
        <input type="button" value="測試click繫結" data-bind="click:ClickFunc" />
    </div>
     var myViewModel = {
            ClickFunc:function(){
                alert($(event.currentTarget).val());
            }
        };

        ko.applyBindings(myViewModel);

event.currentTarget表示當前點選的DOM元素。有時為了簡便,我們直接使用匿名函式的方式繫結,比如:

    <div>
        <input type="button" value="測試click繫結" data-bind="click:function(){
                alert('點選了');
            }" />
    </div>

但是這種將js揉到html裡面的寫法讓博主難以接受,並且覺得維護起來相對不方便,尤其是點選事件裡面的邏輯略複雜時。所以,如非必須,不建議直接寫這種匿名函式的方式。

4.12、其他

關於data-bind的所有繫結,可以看官網上面的介紹,這裡就不一一列舉了。需要用的時候去官網上查下就好了。看看官網上面列舉的所有繫結:

5、Json物件和監控屬性的轉化及關係

我們知道,為了避免不同語言直接的展現方式,一般情況下我們前端和後端互動的時候統一使用Json格式的資料,我們通過http請求從後端取到的資料模型,而要使用我們的ko的一些特性,必須要將這些普通的資料模型轉換成ko的監控屬性;反過來,我們使用ko的監控屬性,有時又需要把這些屬性轉換為普通的json資料傳到後臺,那麼如何實現這個轉換呢?

5.1、JSON物件轉換成ViewModel

比如我們從後臺取到一個Json物件,然後把它變成到我們的viewmodel,然後繫結到我們的介面DOM。

            $.ajax({
                url: "/Home/GetData",
                type: "get",
                data: {},
                success: function (data, status) {
                    var oJson = data;
                }
            });

我們傳送一個請求到後端,取到一個json物件,賦值到oJson,然後我們把oJson轉換成viewmodel,最直觀的方式就是手動轉換了。比如我們可以這樣:

    var myViewModelJson = {
            DeptName: ko.observable(),
            DeptLevel: ko.observable(),
            DeptDesc:ko.observable()
        };
        ko.applyBindings(myViewModelJson);

然後在ajax請求的success裡面

                success: function (data, status) {
                    var oJson = data;
                    myViewModelJson.DeptName(oJson.DeptName);
                    myViewModelJson.DeptLevel(oJson.DetpLevel);
                    myViewModelJson.DeptDesc(oJson.DeptDesc);
                }

這樣,通過手動繫結,實現了json物件到viewmodel的繫結。這樣做的好處就是靈活,壞處顯而易見,手工程式碼量太大。

還好,有我們萬能的開源,總有人想到更好的辦法,我們使用knockout.Mapping元件就能很好地幫助我們介面json物件到viewmodel的轉換。

knockout.Mapping開源地址:下載

下面來簡單看看它如何使用,還是上面的例子,我們不用實現定義任何viewmodel,首先需要引用knockout.mapping.js

    <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
    <script src="~/scripts/knockout/extensions/knockout.mapping-latest.js"></script>

注意:這裡knock.mapping-lastest.js必須要放在knockout-3.4.0.min.js的後面,否則呼叫不到ko.mapping。

然後直接在success函式裡面這樣使用

         success: function (data, status) {
                    var myViewModelJson2 = ko.mapping.fromJS(data);
                    ko.applyBindings(myViewModelJson2);
                }

我們來看效果:

程式碼釋疑:通過ajax請求從後臺取到的json物件,通過ko.mapping.fromJS(),很方便地將其轉換成了viewmodel,是不是猴犀利!當然除了這種用法,還可以更新已經存在viewmodel,使用如下:

    var myViewModelJson = {
            DeptName: ko.observable(),
            DeptLevel: ko.observable(),
            DeptDesc:ko.observable()
        };
        ko.applyBindings(myViewModelJson);
        $(function () {
            $.ajax({
                url: "/Home/GetData",
                type: "get",
                data: {},
                success: function (data, status) {
                    ko.mapping.fromJS(data, myViewModelJson)
                }
            });
        });

在success裡面,根據data的值去更新myViewModelJson這個viewmodel。

5.2、ViewModel轉換成JSON物件

 上面說了JSON物件轉化為viewmodel,那麼反過來,如果我們需要將viewmodel轉換為Json物件傳遞到後端,怎麼辦呢?

knockout裡面提供了兩個方法:

  • ko.toJS():將viewmodel轉換為JSON物件
  • ko.toJSON():將viewmodel轉換為序列化過的Json string。

比如我們的程式碼如下:

     $(function () {
            var oJson1 = ko.toJS(myViewModelJson);
            var oJson2 = ko.toJSON(myViewModelJson);
        });
        var myViewModelJson = {
            DeptName: ko.observable("研發部"),
            DeptLevel: ko.observable("2"),
            DeptDesc: ko.observable("開發一夥人")
        };
        ko.applyBindings(myViewModelJson);

那麼我們來監控下oJson1和oJson2的值:

程式碼釋疑:通過上面這張圖,很容易理解兩個方法的區別,這裡需要說明一點的是,這兩個方法是ko自帶的,並不需要mapping元件的支援。

6、建立自己的data-bind屬性

上面講了那麼多,都是介紹knockout裡面的一些繫結和監控,那麼,有些時候,我們需要自定義我們的data-bind,型如: <label data-bind="myBind:Name"></label> ,這種需求再做元件封裝的時候尤其有用,是否可以實現呢?當然可以。

在knockout裡面,提供了ko.bindingHandlers屬性,用於自定義data-bind屬性,它的語法如下:

ko.bindingHandlers.MySelect = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {

    },

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

    }
};

就這樣申明一下,然後在我們的html標籤裡面就可以使用自定義data-bind了。

    <div> 
        <select data-bind="MySelect:$root">
            <option id="1">研發部</option>
            <option id="2">人事部</option>
            <option id="3">行政部</option>
        </select>
    </div>

MySelect就是我們自定義的繫結屬性,$root暫且可以理解為初始化(雖然這樣解釋並不嚴謹,如果有更加合理的解釋歡迎指正)。

程式碼釋疑:通過上面的ko.bindingHandlers就能簡單實現自定繫結屬性,需要說明兩點:

  • init,顧名思義初始化自定義繫結,它裡面包含多個引數,一般使用較多的是前兩個引數,第一個引數表示初始化自定義繫結的DOM元素,第二個引數一般用來傳遞初始化的引數。
  • update,更新回撥,當對應的監控屬性變化時,會進入到這個方法。如果不需要回調,此方法可以不宣告。

 在此博主就結合原來分享過的一個下拉框元件MutiSelect來簡單說明下自定義繫結的使用。

6.1、最簡單的MutiSelect

一般情況下,如果我們需要使用ko去封裝一些通用元件,就需要用到我們的ko.bindingHandlers,下面博主就結合MutiSelect元件來說說如何使用。

首先宣告自定義的ko.bindingHandlers,在init方法裡面初始化我們的select標籤

ko.bindingHandlers.MySelect = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).multiselect();
    },

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

    }
};

然後在頁面標籤裡面使用

    <div style="text-align:center;"> 
        <select data-bind="MySelect:$root">
            <option id="1">研發部</option>
            <option id="2">人事部</option>
            <option id="3">行政部</option>
        </select>
    </div>

最後第三部,啟用繫結

$(function () {
    var MultiSelect = {};
    ko.applyBindings(MultiSelect);
});

如果不需要傳遞引數,這裡只需要繫結一個空的viewmodel即可。有人疑惑了,第三部感覺沒啥實際意義呢。博主的理解是,DOM元素需要使用data-bind去繫結資料,必須要啟用ko的繫結,也就是這裡的ko.applyBindings()。

得到效果:

6.2、引數傳遞

 第一步還是自定義ko.bindingHandlers

ko.bindingHandlers.MySelect = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var oParam = valueAccessor();
        $(element).multiselect(oParam);
    },

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

    }
};

第二步和上面相同,在html標籤裡面使用這個自定義繫結。

第三步,在啟用繫結的時候傳入引數

$(function () {
    var MultiSelect = {
        enableClickableOptGroups: true,//收起分組
        onChange: function (option, checked) {
            alert("選擇改變");
        }
    };
    ko.applyBindings(MultiSelect);
});

通過這三步即可將引數傳到我們的MutiSelect的初始化裡面:

程式碼釋疑:init事件的第二個引數,我們說了,它主要作用是獲取我們viewmodel裡面傳過來的引數,只不過這裡要把它當做方法使用,為什麼會這麼用,還有待研究!

二、第一個增刪改查例項

至此基礎的東西終於是鋪墊完了,本來打算一篇搞定的,可以沒料到基礎的東西展開來這麼多篇幅!增刪改查的示例放到下篇吧。歡迎學習交流,當然也歡迎推薦

相關推薦

JS元件系列——BootstrapTable+KnockoutJS實現刪改解決方案

前言:出於某種原因,需要學習下Knockout.js,這個元件很早前聽說過,但一直沒嘗試使用,這兩天學習了下,覺得它真心不錯,雙向繫結的機制簡直太爽了。今天打算結合bootstrapTable和Knockout去實現一個簡單的增刪改查,來體驗一把神奇的MVVM。關於WebApi的剩餘部分,博主一定抽時間補上。

JS元件系列——BootstrapTable+KnockoutJS實現刪改解決方案

前言:上篇 JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(一) 介紹了下knockout.js的一些基礎用法,由於篇幅的關係,所以只能分成兩篇,望見諒!昨天就覺得應該快點完成下篇,要不然有點標題黨的感覺,思及此,博主心有不安,於是加班趕出了下篇。如果你也打算用ko去做

JS元件系列——BootstrapTable+KnockoutJS實現刪改解決方案:兩個Viewmodel搞定刪改

前言:之前博主分享過knockoutJS和BootstrapTable的一些基礎用法,都是寫基礎應用,根本談不上封裝,僅僅是避免了html控制元件的取值和賦值,遠遠沒有將MVVM的精妙展現出來。最近專案打算正式將ko用起來,於是乎對ko和bootstraptable做了一些封裝,在此分享出來供園友們參考。封裝

JS元件系列——BootstrapTable+KnockoutJS實現刪改解決方案:自定義T4模板快速生成頁面

前言:上篇介紹了下ko增刪改查的封裝,確實節省了大量的js程式碼。博主是一個喜歡偷懶的人,總覺得這些基礎的增刪改查效果能不能通過一個什麼工具直接生成頁面效果,啥程式碼都不用寫了,那該多爽。於是研究了下T4的語法,雖然沒有完全掌握,但是算是有了一個大致的瞭解,給需要自定義模板的園友們提供一個參考。於是乎有了今天

abp(net core)+easyui+efcore倉儲系統——展現層實現刪改之控制器

abp(net core)+easyui+efcore倉儲系統目錄 abp(net core)+easyui+efcore倉儲系統——ABP總體介紹(一) abp(net core)+easyui+efcore倉儲系統——解決方案介紹(二) abp(net

unity網路實戰開發叢林戰爭-前期知識準備011-c#連線資料庫並實現刪改以及sql注入問題

使用工具:VS2015,Mysql使用語言:c#作者:Gemini_xujian參考:siki老師-《叢林戰爭》視訊教程繼上一篇文章內容,這節課講解一下資料庫的前期連線準備以及通過c# 實現資料庫的增刪改擦操作。首先你需要自行安裝Mysql以及它的workbench元件。然後

springboot+jpa+thymeleaf刪改的示例

fse 生效 with sources set ide horizon prop table 這篇文章介紹如何使用jpa和thymeleaf做一個增刪改查的示例。 先和大家聊聊我為什麽喜歡寫這種腳手架的項目,在我學習一門新技術的時候,總是想快速的搭建起一個demo來試試它

BS(三層)—刪改——Web窗體aspx版本

   上一篇我們用一般處理程式寫了(ashx)寫了一遍增刪改查,今天我們將用Web窗體(aspx)寫一遍增刪改查。我們平時寫的時候到底用一般處理程式呢?還是用Web窗體呢?     簡單來說web窗體(aspx)是一般處理程式(ashx)的一個複雜版本

SSM 實訓筆記 -12- 開源 Spring+Spring MVC+JDBC Template 刪改 前期專案maven

SSM 實訓筆記 -12- 開源 Spring+Spring MVC+JDBC Template 增刪改查 前期專案(maven) 實訓前期小專案,大佬勿笑 僱員資訊管理系統 2019-01-11 專案簡介: 內容: Spring + Spring MVC

【pandas】[2] DataFrame 基礎,建立DataFrame和刪改基本操作1

作者:lianghc 地址:http://blog.csdn.net/zutsoft         DataFrame 是pandas最常用的資料結構,類似於資料庫中的表,不過DataFrame不僅僅限制於2維,可以建立多維資料表。DataFrame既有行索引,也有列

邏輯管理:解決方案 - 關於前端邏輯管理的設計和實現

切入思考點 元件化,解決了一組可以複用的功能,我們可使用一般的開源的公共元件,也可以針對我們特殊業務場景,沉澱出符合自己業務的業務元件; 工程化,解決了可控和規範性的功能,我們可使用開源的一些腳手架比如vue-cli、create-react-app等,或者公司內部自己沉澱的內部腳手架解決方案; 但是誰來解決

Mock.js簡易教程,脫離後端獨立開發,實現刪改功能

定義 數據 false 則表達式 type break 整數 增 刪 改 查 大於 在我們的生產實際中,後端的接口往往是較晚才會出來,並且還要寫接口文檔,於是我們的前端的許多開發都要等到接口給我們才能進行,這樣對於我們前端來說顯得十分的被動,於是有沒有可以制造假數據來模擬後

spring-boot react實現刪改 元件

在 spring-boot react一步一步實現增刪改查 中,用一個元件實現了表格和表單功能,所以現在需要將其拆分成元件獨立出來 拆分表格 建立Table.js import React, {Component} from 'react' class Tab

JS元件系列——BootstrapTable 行內編輯解決方案:x-editable

前言:之前介紹bootstrapTable元件的時候有提到它的行內編輯功能,只不過為了展示功能,將此一筆帶過了,罪過罪過!最近專案裡面還是打算將行內編輯用起來,於是再次研究了下x-editable元件,遇到過一些坑,再此做個採坑記錄吧!想要了解bootstrapTable的園友可以移步 JS元件系列——表格元

ABP入門系列5——展現層實現刪改

這一章節將通過完善Controller、View、ViewModel,來實現展現層的增刪改查。最終實現效果如下圖: 一、定義Controller ABP對ASP.NET MVC Controllers進行了整合,通過引入Abp.Web.Mvc名稱空間,建立Controller繼承自AbpControlle

Spring Boot入門系列如何整合Mybatis實現刪改

前面介紹了Spring Boot 中的整合Thymeleaf前端html框架,同時也介紹了Thymeleaf 的用法。不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/category/1657780.html。 今天主要講解Springboot整合M

Spring Boot入門系列十八整合mybatis,使用註解的方式實現刪改

之前介紹了Spring Boot 整合mybatis 使用xml配置的方式實現增刪改查,還介紹了自定義mapper 實現複雜多表關聯查詢。雖然目前 mybatis 使用xml 配置的方式 已經極大減輕了配置的複雜度,支援 generator 外掛 根據表結構自動生成實體類、配置檔案和dao層程式碼,減輕很大一

修改Haproxy文件配置,實現刪改

文件配置 str data bin 都是 [1] local def onf Haproxy 源文件 global log 127.0.0.1 local2 daemon maxconn 256 log 12

[python] 用pickle模塊實現刪改”的簡易功能

python pyckle模塊 #!/usr/bin/env python2 #coding:utf-8 """ pickle的作用: 1:pickle.dump(dict,file)把字典轉為二進制存入文件. 2:pickle.load(file)把文件二進制內容轉為字典. """ im

.NET EF 框架-實現刪改

ont int string dbcontext 增刪 base set cts cti 聲明一個EF上下文對象 Model dbContext=new Model(); 添加操作(向表中插入一條數據) //聲明一個表的實體 Contact contact =new Con