當一個陣列是原始結構，例：[1,2,3,4,5]
若新增一個項目進去時，一般在html上，v-model會直接綁定那個項目的值，如以下程式

<td v-for="item in list">
      <input type="text" v-model="item" />
</td>

但這樣，在新增項目的input上改變值時，會沒辦法binding到vue值。

這時解決的方式如下，將程式加入index，v-model直接綁定到陣列的索引值，這樣就能改變vue的值

<td v-for="(item, index) in list">
      <input type="text" v-model="list[index]" />
</td>

PS. 若是陣列裡面是物件的結構，使用v-model可直接綁定物件的key值
例：[
 {
    name: "中文",
    value: 1
 },
{
    name: "英文",
    value: 2
 },
{
    name: "日文",
    value: 3
 },
]
<td v-for="item in list">
      <input type="text" v-model="item.name" />
</td>

PromiseAll: async function (array) {

    let taskList = [];

    let propList = [];

    for (let obj of array) {

        for (let prop in obj) {

            taskList.push(obj[prop]);

            propList.push(prop);

        }

    }

    let resp = await Promise.all(taskList);

    let result = {};

    let counter = 0;

    for (let prop of propList) {

        result[prop] = resp[counter];

        counter += 1;

    }

    return result;

}

PromiseAll 是將API一次發送並接收回傳值的工具
使用方法範例:

const taskList = [{

    adPosition : BannerPositionDataService.GetList(),

    big : BannerDataService.GetList(100),

    smallTop : BannerDataService.GetOne(200),

    smallBottom : BannerDataService.GetOne(300),

    section2 : BannerDataService.GetList(400),

    section3 : BannerDataService.GetList(500),

    section4 : BannerDataService.GetList(600),

    recommends : ProductDataService.GetRndList()

}];



let resps = await UJ.PromiseAll(taskList);

要特別記得TaskList中的Method不需要做await,不然就沒有意義了

DeepBinding: function (vueData, data) {



    if (Array.isArray(data)) {

        if (!Array.isArray(vueData)) {

            vueData = [];

        } else {

            vueData.splice(0);

        }

        for (let prop in data) {

            vueData.push(data[prop]);

        }

    }

    else if (typeof (data) === 'object') {

        if (Object.keys(data).length === 0) {

            return;

        }

        for (let prop in data) {

            if (vueData[prop] === undefined || data[prop] === null ||

                (!Array.isArray(vueData[prop] && vueData !== null && typeof (data) !== 'object'))) {

                vueData[prop] = data[prop];

            } else {

                this.DeepBinding(vueData[prop], data[prop]);

            }

        }

    } else {

        vueData = data;

    }

}

在資料回傳後要Binding到Vue Data上面或是任意Object的Property上可以使用這個,
不使用DeepBinding是因為瀏覽器版本限制,這個方式不受瀏覽器版本限制,但是只有提供一階,需要多階請自行改寫.
使用方法範例:

UJ.DeepBinding(this, resp);

這邊的this代表的是Vue的Data
 

程式碼上色

https://highlightjs.org/

Vue
https://github.com/highlightjs/vue-plugin

中文
https://fenxianglu.cn/highlight.html?theme=atom-one-light

 

1. 建立 API Server
     .Net 6.0
     .Cross Site
     .無 Session
     .評分機制

2. 前端修改
    . 改寫內容頁及編輯頁
    . 使用 Vue 及 API
    . 增加評分功能
    . 上傳圖片問題處理
    . 搜尋改用 Google Site Sarch

 

vMain.data = { ...res[0] }; //用展開的, 不要直接用 vMain.data = res[0]

這樣 computed 的結果才不會有不更新的問題

試說明以下程式碼的功用, 以及可改進的部份.

        string EndDate = Request["EndDate"];



        DataTable qtyControls = U2.SQL.DTFromSQL("Select YA00, PD00 from QtyControl Where EndDate > '" + EndDate + "' and SoldQty >= InitQty");



        var values = qtyControls.AsEnumerable().Select(r => "('" + r.Field<string>("YA00") + "','" + r.Field<string>("PD00") + "')").ToList();



        var sqls = new List<string>();

        sqls.Add("Delete StopSaleYAP;");



        int start = 0;        

        while(start < values.Count)

        {

            var end = start + 999;

            if(end > values.Count - 1)

            {

                end = values.Count;

            }



            sqls.Add("insert into StopSaleYAP(YA00, PD00) Values" + string.Join(",", values.GetRange(start, end)) + ";");



            start = end + 1;

        }



        U2.SQL.ExecuteSQL(string.Join("\r\n", sqls));

        public static bool IsErrorOrder(Order.Input.CheckValidOrder dto)

        {

            if (dto.OrderNos == null || dto.OrderNos.Count == 0)

            {

                return false;

            }



            var orderCount = dto.OrderNos.Count();

            var orders = NpreoOrderMain.GetList(dto.OrderNos);

            if (orders.Count != orderCount || !dto.OrderNos.Any(x => orders.Select(o => o.Order_No).Contains(x)))

            {

                return true;

            }

            return false;

        }

        var fu = Request.Files[0];

        fu.SaveAs(Server.MapPath("UploadFiles/") + fu.FileName);

--

基本題:

1. 對 Linq 熟嗎.

2. 對 ASP.Net 的 Cache  熟悉嗎.

3. 用過什麼 ORM, 試說明優缺點.

4. 試說明 MVC 的架構.

資安相關問題:

1. 試說明 SQL Injection

2. 試說明 Cross Site Injection.

3. 上傳檔案要注意的事項.

4. 試說明 cookie 的安全設定 ? same site, secure, http only.


前端相關加分題:

1. jQuery 或 Vue 熟悉嗎 ?

2. 試說明 RWD

3. 試說明 bootstrap

進階問題:

1. 試說明 Reflection

2. 試說明 Dependency Injection

3.  試說明 singleton vs static

4. 試單有兩個欄位 Id, Status (付款待確認: 1.1;  已付款: 2,  訂單已出貨: 3; 訂單取消中: 5; )
狀態 1.1 和 狀態 2 的訂單可取消，取消後改為狀態 5

客人要取消訂單，訂單編號為 123, 試說明程式執行的過程。

VUE 的怪問題, 少了紅色的部份會出問題.

 
 
 

相關參考
https://vuejs.org/v2/guide/

1.
加入vue.js

2.
先"包裹"一層 要用到Vue的元素
個人覺得有點想原本習慣的<!--Content-->
但這次只要放入標籤(我是用Id)
像是範例為 vMain   
然後宣告js 物件 我是取名也叫做 vMain 不知道會不會有撞名問題
所以我的el: 就是 #vMain

3.
再來加入變數
{{Creat_Date}}  兩個括號 桃紅色的
如果data 這個物件裡面有一個叫Creat_Date 的資料他就會被放進去

這樣第一個app 就完成了。

其中 Vue 裡面包含幾樣東西 
el >> 標示 這個Vue 的標籤
data >> 裡面存放的資料變數
created >> 生命週期的
methods>>包含各種功能function

這次的列表頁需要用到以前用的 List Item 跟 Pager
對應到vue 會使用到
v-for for 迴圈
v-for" item in dt  ">> dt 為data中的一個array陣列 (此範例中 為PD 中的 DT)
item 則是在這裡的區域變數

有些要顯示有些要隱藏
v-if
v-if" pager.currentPage  > 1" pager 為data 中的一個物件 裡面有包含 currentPage 的變數

還有要傳ajax 回去要資料
所以要在 vue 中的 methods 建立 function
已這次的例子 getList就是目前的function 可以用到一些 data 裡面的資料
回傳成功之後資料也可以回寫在data上面

以及之前會在各種事件的觸發 
@click 觸發點擊事件
在標籤上加上 @click 可以觸發 類似 onclick 的事件 
但是是調用methods裡面function

日期格式
由於之前的套件PD 回傳的日期資料會是 yyyy-MM-ddTHH:mm:ss 這樣的格式
所以使用了 map  將 dt 裡面的日期 轉換成為我要的格式

v.dt.map(function (obj) {
      var rObj = obj;
      rObj["Create_Date"] = $.datepicker.formatDate('yy-mm-dd', new Date(obj["Create_Date"]));
      return rObj;
});

這是一篇加密文章，需輸入密碼才可閱讀

這是一篇加密文章，需輸入密碼才可閱讀