2017.11.23 接口傳參編碼問題、AppCan前端速度優(yōu)化零聚、簡單三層袍暴、顯示日期段中去掉的日子、C#(Winform的幾個小知識點)

第一組:楊昊 接口傳參編碼問題

在新框架使用時遇到這樣一個問題:


image.png

如上圖所示隶症,管理頁面有一個富文本編輯器政模,現(xiàn)在要把編輯器里的內(nèi)容通過接口傳到后臺,實際上蚂会,編輯器里的內(nèi)容是含有HTML標簽的字符串览徒,像這樣:


image.png

這樣的話會有一個問題,在將含有標簽的字符串轉化成Json的過程中颂龙,由于標簽中特殊字符的存在(,/?:@&=+$# 等)习蓬,會將Json的結構完全破壞,因此接口傳輸?shù)臇|西便會錯誤措嵌。

解決方案:

使用JS中的encodeuricomponent()函數(shù)躲叼,該函數(shù)可以將傳入的字符串中的中文以及特殊字符轉換為UTF-8的編碼格式,像這樣:

我們將使用 encodeURIComponent() 對 URI 進行編碼:

<script type="text/javascript">
document.write(encodeURIComponent("http://www.loongair.cn"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#"))
</script>

輸出:
http%3A%2F%2Fwww.loongair.cn
%2C%2F%3F%3A%40%26%3D%2B%24%23

不過這樣會出現(xiàn)新的問題:

新框架中后臺會將URL中的UTF-8字符自動解碼企巢,這就造成即使前端將特殊字符轉換成UTF-8枫慷,但是在保存進數(shù)據(jù)庫之前,后臺已經(jīng)自動解碼浪规,于是又會出現(xiàn)結構被破壞的問題(相當于沒有編碼或听,只是保證了傳輸過程中的結構不被破壞)。

新的解決方案:

先使用Base64進行編碼笋婿,Base64編碼的具體方式不再贅述誉裆,可參考該鏈接JS實現(xiàn)Base64編碼解碼(轉載)。這樣一來缸濒,存入數(shù)據(jù)庫的是轉碼的字符串足丢,需要前臺顯示的時候再進行解碼粱腻,并不會破壞結構。


第二組:趙彩鳳 AppCan前端速度優(yōu)化方案

1. 開啟硬件加速
  • 開啟硬件加速會極大提升頁面切換速度

開啟方法是在config.xml文件中配置 <hardware>true</hardware>

  • 某些場景下硬件加速會與業(yè)務邏輯沖突

決方案為:全局開啟硬件加速保證速度斩跌,在特定場景關閉硬件加速绍些,保證業(yè)務邏輯正常;

 var extras = {
     extraInfo: {//網(wǎng)頁配置
         hardware: 0//是否開啟硬件加速耀鸦,0:否柬批,1:開啟(僅Android)
     }
 };
uexWindow.open('singlePage_normal', '0', 'singlePage_normal.html', 10, '', '', 0, 500, JSON.stringify(extras));
2. 單頁面(webview)改造

單webview改造會明顯提升運行速度,且只有單webview時袖订,才能實現(xiàn)打開新頁面時input自動彈出鍵盤的功能

  • 依賴

須引入

ui-base.css
appcan.js
appcan.control.js
**
需要頁面彈動時引入氮帐,可實現(xiàn)下拉刷新和下載加載功能
appcan.scrollbox.js
需要tab選項卡時引入,常用于主界面著角,可免去預加載處理
template.import.js
appcan.tab.js
  • 普通單頁面

模板代碼如下揪漩,根據(jù)注釋,將對應內(nèi)容填入對應區(qū)域即可:

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
    <title>普通單頁面</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="css/ui-box.css">
    <link rel="stylesheet" href="css/ui-base.css">
    <link rel="stylesheet" href="css/ui-color.css">
    <link rel="stylesheet" href="css/appcan.icon.css">
    <link rel="stylesheet" href="css/appcan.control.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="page_0" class="bc-bg" data-control="PAGE">
    <!--header開始-->
    <div id="header" class="uh bc-head ub ubb bc-border bc-text-head" data-control="HEADER">
        <!--左邊-->
        <div class="nav-btn" id="nav-left">
            <!--返回按鈕圖標-->
            <div class="ub ub-img tagimg tagwh"></div>
        </div>
        <!--中間-->
        <h1 id="title" class="ut ub-f1 ulev-3 ut-s tx-c">普通單頁面</h1>
        <!--右邊-->
        <div class="nav-btn" id="nav-right">右邊</div>
    </div>
    <!--header結束-->
    <!--content開始-->
    <div id="content" data-control="CONTENT">
        <div id="scrollBox" class="" data-control="ScrollBOX" data-bounce="1">
            <div data-control="BounceBox">
                <!--下拉刷新控件-->
                <div class="box_bounce ub ub-ver ub-pc">
                    <div class="ub-f1"></div>
                    <!--正在下拉-->
                    <div id="draging" class="bounce_status"></div>
                    <!--觸發(fā)下拉刷新的界限-->
                    <div id="dragToReload" class="bounce_status"></div>
                    <!--下拉刷新回調(diào)觸發(fā)后-->
                    <div id="releaseToReload" class="bounce_status"></div>
                </div>
                <!--內(nèi)容區(qū)域吏口,在這里放界面的HTML代碼-->
                <!--內(nèi)容區(qū)域結束-->
            </div>
        </div>
    </div>
    <!--content結束-->
</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/appcan.scrollbox.js"></script>
</body>
<script>
    /**
     * 下拉刷新和上拉加載
     * Scroll BOX function DEMO START
     */
    (function ($) {
        //初始化下拉刷新
        initPullDownRefresh(
                //下拉刷新的回調(diào)
                function () {
                    console.log("下拉刷新");
                    endPullDownRefreshLately(500);
                }
                //上拉到底部的回調(diào)
                , function () {
                    console.log("上拉加載");
                }
                //是否顯示提示語
                , true
        );
    })($);
    //插件加載完成的回調(diào)
    appcan.ready(function () {
        console.log("appcan.ready");
        //手動調(diào)用下拉刷新
        pullDownRefresh();
    });
    //導航欄點擊事件
    appcan.button(".nav-btn", "btn-act", function () {
        //左側
        this.id == "nav-left" && appcan.window.close(-1);
        //右側
        //this.id == "nav-right" &&;
    });
</script>
</html>
  • 帶有tab欄的單頁面

需要注意的地方:

  • 每個tab.html的css和js都要在主頁面被引入
  • 如果不需要導航欄header奄容,先刪除header的部分,還需要將data-control="CONTENT"修改為data-control="CONTENT_NO_HEADER"产徊,原理很簡單昂勒,即為去掉CONTENT的padding-top = 2.75em屬性
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
    <title>帶有tab欄的單頁面</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="css/ui-box.css">
    <link rel="stylesheet" href="css/ui-base.css">
    <link rel="stylesheet" href="css/ui-color.css">
    <link rel="stylesheet" href="css/appcan.icon.css">
    <link rel="stylesheet" href="css/appcan.control.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="page_0" class="bc-bg" tabindex="0" data-control="PAGE">
    <!--header開始-->
    <div id="header" class="uh bc-head ub ubb bc-border bc-text-head" data-control="HEADER">
        <!--左邊-->
        <div class="nav-btn" id="nav-left">
            <!--返回按鈕圖標-->
            <div class="ub ub-img tagimg tagwh"></div>
        </div>
        <!--中間-->
        <h1 id="title" class="ut ub-f1 ulev-3 ut-s tx-c">帶有tab欄的單頁面</h1>
        <!--右邊-->
        <div class="nav-btn" id="nav-right">右邊</div>
    </div>
    <!--header結束-->
    <!--header結束--><!--content開始-->
    <div id="content" class="" data-control="CONTENT">
        <div class="" data-control="ScrollBOX" data-bounce="1">
            <div data-control="BounceBox">
                <div class="box_bounce ub ub-ver ub-pc">
                    <div class="ub-f1"></div>
                    <div class="bounce_status">
                        下拉更新......
                    </div>
                    <div class="bounce_status">
                        松手更新......
                    </div>
                    <div class="bounce_status">
                        更新中......
                    </div>
                </div>
                <!--內(nèi)容區(qū)域,在這里放界面的HTML代碼-->
                <div class="tab_pane active" data-import="tab1.html">
                </div>
                <div class="tab_pane" data-import="tab2.html">
                </div>
                <div class="tab_pane" data-import="tab3.html">
                </div>
                <!--內(nèi)容區(qū)域結束-->
            </div>
        </div>
    </div>
    <!--content結束-->
    <div id="tabview" class="uf sc-bg ubt sc-border-tab" data-control="FOOTER"></div>
</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/appcan.listview.js"></script>
<script src="js/appcan.scrollbox.js"></script>
<script src="js/template.import.js"></script>
<script src="js/appcan.tab.js"></script>
</body>
<script>
    //插件加載完成的回調(diào)
    appcan.ready(function () {

    });
    //導航欄點擊事件
    appcan.button(".nav-btn", "btn-act", function () {
        //左側
        this.id == "nav-left" && appcan.window.close(-1);
        //右側
        //this.id == "nav-right" &&;
    });
    //按鈕點擊事件
    appcan.button(".btn", "btn-act", function () {
    });
    /**
     * 下拉刷新和上拉加載
     * Scroll BOX function DEMO START
     */
    (function ($) {
        //初始化下拉刷新
        initPullDownRefresh(
                //下拉刷新的回調(diào)
                function () {
                    console.log("下拉刷新");
                    endPullDownRefreshLately(500);
                }
                //上拉到底部的回調(diào)
                , function () {
                    console.log("上拉加載");
                    //添加數(shù)據(jù)
                    addData();
                }
                //是否顯示提示語
                , true
        );
    })($);
    /**
     * 底部tab欄點擊事件
     * Scroll BOX function DEMO END
     */
    var tabview = appcan.tab({
        selector: "#tabview",
        hasIcon: true,
        hasAnim: true,//控制是否有下方滑塊和動畫
        hasLabel: false,
        hasBadge: false,
        data: [{
            label: "QQ",
            "icon": "fa-qq"
        }, {
            label: "微軟",
            "icon": "fa-windows"
        }, {
            label: "微信",
            "icon": "fa-weixin"
        }]
    });
    tabview.on("click", function (obj, index) {
        $(".tab_pane").removeClass("active");
        $($(".tab_pane")[index]).addClass("active");
    });
</script>
</html>

第三組:蔡永堅 簡單三層

敲了這么久的代碼舟铜,回到最基本的開始:我們是否知道如何去搭建一個項目戈盈,項目中每個目錄到底什么用的?該如何去創(chuàng)建它們谆刨。要想知道這些塘娶,必須得了解簡單三層結構。

三層構架,說到底就是一個簡單的分層概念,一個數(shù)據(jù)訪問層,業(yè)務邏輯層,和UI層痊夭。

1. 三層體系架構
  • 表示層(UI):主要表示W(wǎng)EB方式刁岸,也可以表示成WINFORM方式。如果邏輯層相當強大和完善她我,無論表現(xiàn)層如何定義和更改虹曙,邏輯層都能完善地提供服務。

  • 業(yè)務邏輯層(BLL):主要是針對具體的問題的操作番舆,也可以理解成對數(shù)據(jù)層的操作酝碳,對數(shù)據(jù)業(yè)務邏輯處理。如果說數(shù)據(jù)層是積木恨狈,那邏輯層就是對這些積木的搭建疏哗。

  • 數(shù)據(jù)訪問層(DAL):主要是對原始數(shù)據(jù)(數(shù)據(jù)庫或者文本文件等存放數(shù)據(jù)的形式)的操作層,而不是指原始數(shù)據(jù)拴事,也就是說沃斤,是對數(shù)據(jù)的操作圣蝎,而不是數(shù)據(jù)庫刃宵,具體為業(yè)務邏輯層或表示層

2. 具體區(qū)分
  • 表示層:主要對用戶的請求接受衡瓶,以及數(shù)據(jù)的返回,為客戶端提供應用程序的訪問牲证。

  • 業(yè)務邏輯層:主要負責對數(shù)據(jù)層的操作哮针,也就是說把一些數(shù)據(jù)層的操作進行組合。

  • 數(shù)據(jù)訪問層:主要看你的數(shù)據(jù)層里面有沒有包含邏輯處理坦袍,實際上他的各個函數(shù)主要完成各個對數(shù)據(jù)文件的操作十厢,而不必管其他操作。

3. 總結

三層結構是一種嚴格分層方法捂齐,即數(shù)據(jù)訪問層(DAL)只能被業(yè)務邏輯層(BLL)訪問蛮放,業(yè)務邏輯層只能被表示層(UI)訪問,用戶通過表示層將請求傳送給業(yè)務邏輯層奠宜,業(yè)務邏輯層完成相關業(yè)務規(guī)則和邏輯包颁,并通過數(shù)據(jù)訪問層訪問數(shù)據(jù)庫獲得數(shù)據(jù),然后按照相反的順序依次返回將數(shù)據(jù)顯示在表示層压真。有的三層結構還加了Factory娩嚼、Model等其他層,實際都是在這三層基礎上的一種擴展和應用.

一個簡單的三層結構程序一般包括DAL BLL WEB Model幾個項目滴肿,它們的相互引用關系如下

1) WEB引用 BLL,Model
2)BLL引用 DAL,Model
3)DAL引用Model
4)Model無引用

而common放的則是公共類岳悟,如用于計算的Math類就放在Common下。
目前系統(tǒng)是將DAL和BLL層合在了一起建的類庫DB泼差。


第四組:傅云 顯示日期段中去掉的日子

我們經(jīng)常會進行日期查詢贵少,但是如果要顯示日期段中去掉的日子該如何操作?如我們有10月8日堆缘,10月9日滔灶,在10月中去除這兩天。便可進行如下操作:

image.png
List < DateTime > cannotUseList = new List < DateTime > (); //定義一個時間數(shù)組
int count = int.Parse((timeTo.AddDays(1) - timeFrom).TotalDays.ToString()); //獲取需要的時間段中天數(shù)
for (int i = 0; i < count; i++) {
    DateTime dateParam = timeFrom;
    dateParam = dateParam.AddDays(i);
    bool ifMatch = false;
    foreach(var item in flightInfoArr) {
        if (item.VF_FlightDate == dateParam) {
            ifMatch = true; //判斷是否在時間段內(nèi)
            break;
        }
    }
    if (!ifMatch) {
        cannotUseList.Add(dateParam);
    }
}
foreach(var adddate in cannotUseList) {
    cannotUseDates = adddate + ";" + cannotUseDates; //獲取去除之后的日期
}

第五組:王炳鈞 C#(Winform的幾個小知識點)

  • 在WinForm中使多個控件共享一個事件的實現(xiàn):

方法:按住Ctrl鍵套啤,一次選中多個控件宽气,選擇它們共有事件,雙擊即可潜沦。

例如:選擇多個Button萄涯,在事件中找到Button的單擊事件,雙擊進去唆鸡,在Click事件中編寫代碼涝影,這樣就實現(xiàn)了多個控件共享一個事件。

  • 在WinForm中使用DataGridView與數(shù)據(jù)庫綁定數(shù)據(jù)

在WinForm中使用DataGridView與數(shù)據(jù)庫綁定數(shù)據(jù)時争占,會出現(xiàn)中英文列名同時顯示的麻煩燃逻,這時只需一行代碼將英文列明顯示屏蔽掉既可以只顯示中文列名序目;

示例代碼:
this.DataGridView1.AutoGenerateColumns=false;

在Winform中清空窗體的簡單方法可以這樣寫:

public void Clear()
{
    foreach(Control c in this.Controls)
    {
       if(c is TextBox)
       {
          c.Text=string.Empty;
       }
       if(c is CheckBox)
       {
          CheckBox chb=c as CheckBox;
          chb.Checked=false;
       }
    }
}

但是這樣的話,如果我們想清空某個容器中的控件而不是所有的控件的話伯襟。我們只需要將foreach里面的this.Controls改為this.Panel1.Controls就可以了猿涨。

  • 在Winform窗體中添加滾動字幕:

我們需要三個控件:一個Label控件,兩個個Button控件姆怪,一個Timer控件叛赚,Timer控件來控制文字滾動的速度。編寫Timer控件的tick事件稽揭。

示例代碼如下:

private void Timer1_Tick(object sender,EventArgs e)
{
     Label1.Left-=2;    //Label向左減2
     if(this.Label1.Right<0)
     {
          this.Label1.Left=this.Width;
     }
}

下面編寫B(tài)utton1和Button2的單擊事件俺附,用來控制字幕滾動的開始和停止.

示例代碼如下:

//控制字幕滾動的開始
private void Button1_Click(object sender,EventArgs e)
{
   this.Timer1.Enabled=true;
}
//控制字幕滾動的結束
private void Button2_Click(object sender,EventArgs e)
{
    this.Timer2.Enabled=false;
}

啟動調(diào)試,預覽效果溪掀。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末事镣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子揪胃,更是在濱河造成了極大的恐慌璃哟,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件只嚣,死亡現(xiàn)場離奇詭異沮稚,居然都是意外死亡,警方通過查閱死者的電腦和手機册舞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門蕴掏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人调鲸,你說我怎么就攤上這事盛杰。” “怎么了藐石?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵即供,是天一觀的道長。 經(jīng)常有香客問我于微,道長逗嫡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任株依,我火速辦了婚禮驱证,結果婚禮上,老公的妹妹穿的比我還像新娘恋腕。我一直安慰自己抹锄,他們只是感情好,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著伙单,像睡著了一般获高。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上吻育,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天念秧,我揣著相機與錄音,去河邊找鬼扫沼。 笑死出爹,一個胖子當著我的面吹牛庄吼,可吹牛的內(nèi)容都是我干的缎除。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼总寻,長吁一口氣:“原來是場噩夢啊……” “哼器罐!你這毒婦竟也來了?” 一聲冷哼從身側響起渐行,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤轰坊,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后祟印,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肴沫,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年蕴忆,在試婚紗的時候發(fā)現(xiàn)自己被綠了颤芬。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡套鹅,死狀恐怖站蝠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情卓鹿,我是刑警寧澤菱魔,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站吟孙,受9級特大地震影響澜倦,放射性物質發(fā)生泄漏。R本人自食惡果不足惜杰妓,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一藻治、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧稚失,春花似錦栋艳、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晴叨。三九已至,卻和暖如春矾屯,著一層夾襖步出監(jiān)牢的瞬間兼蕊,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工件蚕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孙技,地道東北人。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓排作,卻偏偏與公主長得像牵啦,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子妄痪,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容