第一組:楊昊 接口傳參編碼問題
在新框架使用時遇到這樣一個問題:
如上圖所示隶症,管理頁面有一個富文本編輯器政模,現(xiàn)在要把編輯器里的內(nèi)容通過接口傳到后臺,實際上蚂会,編輯器里的內(nèi)容是含有HTML標簽的字符串览徒,像這樣:
這樣的話會有一個問題,在將含有標簽的字符串轉化成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月中去除這兩天。便可進行如下操作:
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)試,預覽效果溪掀。