日客戶要求表內的數據依據某種分組生成HTML頁面進行展示,一般處理這種需求直接上編程工具就好了,從數據庫里讀取數據,根據規則生成字符串,最后將字符串寫出到文件。由于需求比較急,作為數據庫編程系列文章,如果能用SQL實現首選還是SQL,這樣處理既直接又快速,不過針對SQL要真的有耐心和信心寫完,調試更是崩潰。由于要寫出文件到硬盤,最后還是選擇MySQL作為數據庫工具,Navicat作為開發工具。
有兩張表計劃表、市縣表,二者依靠市縣編碼(sxbm)進行等值連接,計劃表內含有各個學校投放在各個市縣的專業代號(zydh),專業名稱(zymc)、招生備注(bz)、學制(xz)、要求的學歷(xl)、計劃數(jh)等字段組成的計劃信息,院校編碼(yxbm)為學校的兩位數編碼,院校代號(yxdh)為院校編碼(yxbm)+市縣編碼(sxbm)組成的四位數編碼,院校代號其實可以區分出學校在哪個市縣的投檔的專業計劃。要求以學校為單位創建HTML頁面,頁面首先要以市縣作為表格分割,然后根據專業代號排序。具體實現過程如下:
CREATE TABLE `zzjh2019v` ( `YXDH` varchar(9) COMMENT '學校代號', `YXMC` varchar(54) COMMENT '學校名稱', `ZYDH` varchar(2) COMMENT '專業代號', `ZYMC` varchar(28) COMMENT '專業名稱', `XZ` varchar(3) COMMENT '學制', `XL` varchar(4) COMMENT '學歷', `JH` varchar(6) COMMENT '招生計劃數', `BZ` varchar(200) COMMENT '備注', `yxbm` char(2) COMMENT '學校編碼', `sxbm` char(2) COMMENT '市縣編碼' ) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_bin ROW_FORMAT = Compact;
CREATE TABLE `sx` ( `sxbm` char(2) COMMENT '市縣編碼', `sxmc` varchar(20) COMMENT '市縣名稱' ) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_bin ROW_FORMAT = Compact;
糾結了很久這個東西怎么寫,最后采取游標、拼接字符串、字符串聚合,動態SQL,寫文件等一些列操作完成需求,創建的存儲過程如下:
CREATE DEFINER=`root`@`localhost` PROCEDURE `splitjh`() BEGIN declare done INT DEFAULT 0; declare pyxbm char(2); declare psxmc varchar(10); declare pyxmc varchar(50); declare pjhall int; declare pjhrows TEXT; declare yxjh cursor for select yxbm,yxmc,sum(jh) jhall from zzjh2019v a,sx b where a.sxbm=b.sxbm group by yxbm,yxmc order by yxbm; declare CONTINUE HANDLER FOR SQLSTATE '02000' SET done = 1; open yxjh; fetch yxjh into pyxbm,pyxmc,pjhall; while done !=1 do select group_concat(jhrow separator '') into pjhrows from (select concat('<tr class="subtitle"><td>',yxdh,'</td><td>',yxmc,'在 <span><font color="red">',b.sxmc,'</font></span> 招生計劃如下</td><td>',sum(jh),'</td><td></td><td></td></tr>',group_concat('<tr class="jhrow"><td>',zydh,'</td><td>',zymc,'(',bz,')</td><td>',jh,'</td><td>',xz,'</td><td>',xl,'</td></tr>' order by zydh separator '')) jhrow from zzjh2019v a,sx b where yxbm=pyxbm and a.sxbm=b.sxbm group by yxdh order by yxdh,zydh) jhs; set @pfilename = concat('''d:/32/1/1/jh11',pyxbm,'.html'''); set @sql =concat('select concat(''<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="zsjh.css" ><title>3+2計劃</title></head><body><h3></h3><table><tr class="subtitle"><th>代號</th><th>專業及名稱備注</th><th>人數</th><th>學制</th><th>學歷</th></tr>'',''',pjhrows,''',''</body></html>'') from dual into outfile ',@pfilename); prepare execsql from @sql; execute execsql; DEALLOCATE PREPARE execsql; fetch yxjh into pyxbm,pyxmc,pjhall; end while; close yxjh; END;
首先看效果,執行過程
call splitjh();
在磁盤形成的HTML文件效果如下圖(數據有一定的敏感性,進行了遮擋處理):
文件展示頁面
生成的文件列表如下圖:
生成的文件列表
這里一共有87所學校,所以生成了87的文件,添加CSS樣式文件,讓表格呈現如前圖所示。
技術點
1)MySQL的游標,以及循環讀取游標的方法,涉及的語句如下:
declare yxjh cursor for select yxbm,yxmc,sum(jh) jhall from zzjh2019v a,sx b where a.sxbm=b.sxbm group by yxbm,yxmc order by yxbm;#游標定義 declare CONTINUE HANDLER FOR SQLSTATE '02000' SET done = 1;#游標循環條件,注意此句一定要定義在游標之后,才起作用 open yxjh;#打開游標 fetch yxjh into pyxbm,pyxmc,pjhall;#將游標行內容賦值給變量。
2)執行動態SQL,由于MySQL into outfile 后接的文件名不能為變量,所以必須使用動態SQL的方法,涉及的語句如下:
prepare execsql from @sql;#從一個變量準備一個動態sql,注意execsql不用提前定義 execute execsql;#執行準備好的語句 DEALLOCATE PREPARE execsql;#銷毀語句
綜上就是使用MySQL數據庫,并借用MySQL寫文件的方式將數據從數據庫內按照需求導出文件,為何不用navicat導出呢?因為無法達到要求,又是聚合、又是格式,所以只能自己編寫過程通過SQL語句拼接字符串的方式來實現。沒有太多的技術難度,主要是想法和調試難度。后續在此基礎上又開發了以市縣為單位創建HTML文件,各招生學校作為分割的過程。本案例是實際需求催生出來的做法,在遇到這樣的需求前你是先想到SQL還是先想到開發工具呢?從實際效果看使用SQL這種方式更加靈活。這樣的SQL實現的字符串拼接是不是有點極限呢?
y_web.py(更新)
服務器軟件:Apache、IIS
瀏覽器是一個翻譯官,是一個解釋器。瀏覽器可以翻譯有HTML、CSS、JavaScript。
服務器端腳本程序:PHP、 .net、JSP、c#等
.php文件要由PHP腳本引擎來進行處理。
網站前臺(客戶端) 網站后臺(服務器端) 數據庫
HTML(結構) PHP MySQL
CSS JSP Oracle
JavaScript .net SqlServer
HTML結構:主要來說明,哪個地方是標題,哪個地方是段落,哪個地方是表格,哪個地方是表單。
CSS表現(格式):主要功能是,給相對應的HTML標記定義各種各樣的格式。
JavaScript行為:主要用于與計算機網頁進行交互(交流)。
塊元素和行內元素
塊元素:寬度單獨占一個通欄寬,塊元素的前臺的其它元素,都要另起一行來排。
比如:<p> <pre> <hr> <h1>……<h6> <ul> <ol> <li>
DIV和SPAN就是一個容器,容器中可以存放任何可以存放在<body>中的內容或標記。
行內元素:行內元素沒有寬度和高度的概念,也就是說通過CSS無法給行內元素增加寬和高。多個行內元素會放在同一行,不會另起一行來排版。
Direction:滾動的方向,取值:left、right、up、down
Behavior:滾動的方式,取值:scroll(滾動)、 alternate(彈動)、 slide(滾動一次)
Width:滾動的區域寬度,取值:px或%
Height;滾動的區域高度
bgColor:背景顏色,如:bgcolor=“#FF0000” bgcolor=“rgb(255,0,0)”
scrollAmount:滾動步長值,一步走多遠,值越大,走的越快
scrollDelay:兩次滾動的間隔時間,以毫秒為單位 1秒=1000毫秒
進制,就是一種進位方法。
10進制:有10個基本數,0、1、2、3、4、5、6、7、8、9,運算規則是:逢十進一
例如:9 10 19 20 29 30
2進制:有2個基本數,0、 1,運算規則是:逢二進一。比如:(10)2 11 100 101 110
8進制:有8個基本數,0、1、2、3、4、5、6、7,運算規則是:逢八進一。比如:(17)8 20 21 26 27 30
因為二進制太長,不方便記憶,因此小型機引入了八進制,八進制可以很好的反應二進制。
因此,一個八進制數,用3位二進制數來表示。
基R=2^3
16進制:有16個基本數,0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F,運算規則是:逢16進一
比如:EF F0 F1 F2 FE FF (100)16
16進制的一位對應4位二進制?;鵕=2^4
10進制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
2進制 | 1 | 10 | 11 | 100 | 101 | 110 | 111 | 1000 | 1001 | 1010 | 1011 | 1100 | |||||||
8進制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | |||
16進制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | 10 | 11 | 12 | 13 |
十進制轉成二進制
分為整數部分和小數部分,分別轉換。比如:將(10.125)10轉成二進制? 1010.001
(1)整數部分轉成二進制:除2取余法。每次將整數除以2,取余數,一直除下去,直到整數部分(商)為0。最后讀數時,從下往上讀取。
第N次 | 整數10 | 商 | 余數 | ||
第1次 | 10/2 | 5 | 0 | ||
第2次 | 5/2 | 2 | 1 | ||
第3次 | 2/2 | 1 | 0 | ||
第4次 | 1/2 | 0 | 1 | 最后結果為:1010 | |
(2)小數部分轉成二進制:乘2除整法。每次將小數部分乘以2,取整數,一直乘下去,直到小數部分為0。最后讀數時,從上往下讀取。
第N次 | 小數0.125 | 積 | 整數 | ||
第1次 | 0.125*2 | 0.25 | 0 | ||
第2次 | 0.25*2 | 0.5 | 0 | ||
第3次 | 0.5*2 | 1.0 | 1 | ||
最后結果為:001 | |||||
二進制轉成十進制
不分整數部分和小數部分,按權相加法。換句話說:二進制上的每一位,乘以所在位權(也就是2的幾次方),最后將各個位的乘相加,就能得到十進制。
1010.001 = 1*2^3 + 0*2^2 + 1*2^1 + 0*2^0 + 0*2^-1 + 0*2^-2 + 1*2^-3 = 8+2+ 1/8 = 10+0.125 = 10.125
計算機只能二進制,比如:a-z、A-Z、0-9、標點符號,計算機都不能直接識別。每個人都可以來約定一套字符編碼(比如:a用二進制100表示,b用二進制101表示,c用二進制的110表示等)
計算機是由美國人發明的,美國標準化局同樣制定了一套統一的編碼,叫ASCII碼。
ASCII碼
ASCII編碼用7位或8位(1個字節)二進制來表示,共可以表示128或256個字符。包括:大小寫字母、數字、標點符號、圖形符號等。
每個國家都想讓計算機能顯示或處理本國的語言,都對ASCII碼進行了擴展。
在中國(簡體字),ANSI編碼是指GB2312或GBK。
在臺灣(繁體字),ANSI編碼是指BIG5
在日本,ANSI編碼是指JIS。
……
注意:ANSI編碼是跟隨操作一齊安裝的,也就是,安裝了中文操作系統后,它的默認編碼就是GB2312。
GB2312是中國標準化局,在1980年制定的一套顯示簡體中文的編碼。
GB2312是用2個字節來顯示。共可以表示2^16=256*256=65536個字符。
GB2312共保存了6763個常用漢字,一級漢字3700個。
GBK編碼
對GB2312進行了擴充,可以顯示人名、古漢語中的一些罕見字等。
GBK也是用2個字節來表示。共存儲了2.3萬個左右的中文字符。
GBK的范圍,要比GB2312大的多。
BIG5編碼
BIG5用于臺灣、香港、澳門地區的繁體中文編碼。
Unicode編碼
用4個字節表示字符,共可以表示42個億個字符。
Unicode編碼可以顯示世界上所有國家的語言。
缺點:文件龐大,效率不高,不利于推廣。
UTF-8統一格式轉換
它會自動根據不同的字符,來選擇不同編碼長度。
<meta>標記是設置一些網頁文件頭方面的信息。主要包括:網頁編碼或字符集設置、網頁關鍵字、網頁描述、網頁刷新跳轉等。相當于一封信的信封,信封有地址、郵編等重要。
<head>標記中的內容在瀏覽器中,是不可見的。
主要用兩個常用的屬性:
http-equiv:主要設置一些控制信息,屬性值是固定的。比如:content-type
name:一般用于設置網頁描述信息,像關鍵字、網頁描述、網頁版權、作者等,屬性值是固定的。比如:keywords
content:是具體的參數或內容,與http-equiv和name屬性進行對應。
(1)設置網頁的字符集或編碼
<meta http-equiv=“content-type” content=“text/html;charset=GBK”>
(2)設置網頁刷新或跳轉
<meta http-equiv=“refresh” content=“5”> 表示每隔5秒鐘,刷新網頁
<meta http-equiv=“refresh” content=“5;url=http://www.baidu.com”> 表示5秒鐘后,跳轉到百度網
注意:刷新功能相當于瀏覽器中的刷新按鈕
(3)設置網頁關鍵字(SEO優化),給搜索引擎(搜索機器人)使用
<meta name=“keywords” content=“程序開發,平面設置,空間域名,網站維護”>
(4)設置網頁描述信息(SEO優化)
<meta name=“description” content=“廣州網站建設思優網絡公司,提供專業廣州網站制作及網站推廣相結合的建站方案,由專業廣州網站設計人員結合搜索引擎優化經驗為您設計網站;廣州網頁設計:020-87537332”>
XHTML是可擴展超文本標注語言,XHTML是更純凈的HTML,語法更嚴格。
XHTML的目的是為了取代HTML4.01。
XHTML是W3C的一個標準或規范。
編寫XHTML的規范,與HTML編寫有何不同?
1)所有的標記都必須被關閉。比如:<br>轉換<br /> <hr>轉換后 <hr />
2)XHTML要求所有的標記名稱必須小寫。比如:<meta><table><img><font>
3)XHTML要求所有的屬性名必須小寫,屬性值必須加引號。
4)XHTML要求所有的屬性必須有值。
<hr noshade=“noshade” />
<input type=“radio” checked=“checked” />
5)所有的標記要順序嵌套,不能交叉嵌套;
6)XHTML文件,必須要有DTD文檔類型定義;
DTD(Document Type Define)文檔類型定義
(1)嚴格型Strict
要求HTML代中,不能存在任何的表現,用CSS去代替。比如:<font>、bgcolor、background等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(2)過渡型transitional
可以使用任何表現的標記或屬性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(3)框架型Frameset
制作框架網頁時使用的一種類型,框架主要用于網站的后臺管理。
框架技術:是將一個瀏覽器窗口劃分成不同區域,每個區域(窗口)都可以顯示一個獨立的網頁。(HTML第四天單獨講框架,現在作個了解)
W3C是萬維網聯盟,是一個國際性的非盈利性組織,是WEB領域最具權威性的組織。已經制定多達200多項的標準。
比如:XHTML、CSS、ECMAScript(JavaScript)、DOM、 XML等。
超級鏈接的功能:就是點擊某個鏈接,可以跳轉到目標頁面或文件。
超級鏈接的分類:
(1)按內容分類:文本鏈接、圖片鏈接、多媒體等
(2)按URL分類:相對URL、絕對URL、錨點
URL,指網址或路徑
URL(Uniform Resource Locator,統一資源定位器),也就是指互聯網地址。
http://www.sina.com.cn/about/index.html
第一個部分:協議,指訪問什么類型的服務器,如:http://、FTP://、news://
第二個部分:主機名或主機的IP地址。如:www.sina.com.cn
第三個部分:文件夾名,如:about
第四個部分:文件名,如:index.html
格式:<a 屬性=“屬性值”>新浪網</a>
常用的屬性:
Href:指鏈接的目標文件或網址。比如:href=“http://www.toutiao.com”
Target:指目標文件的打開方式。
_blank:在新窗口中,來打開目標文件;
_self:在當前窗口中,來打開目標文件;
_top:在最頂層窗口中,來打開目標文件(在框架中講);
_parent:在父窗口中,來打開目標文件(在框架中講)
Name:設置錨點的名稱。錨點是指:鏈接到同一個頁面的不同部分
舉例:<a href=http://www.toutiao.com target=“_blank”>頭條號</a>
絕對URL:它總是以file:///協議開頭,去訪問目標文件。
如果將當前文件移動到其它地方,這個絕對URL路徑不需要修改。
絕對URL,只需要確定目標文件的路徑即可,與當前文件位置無關。
例如:<a href=“file:///E:/itcast/20140510/lesson/day2/4.html”>本地絕對路徑</a>
相對URL:要確定當前文件與目標文件的關系。
關系分為三種:
平級關系:直接寫目標文件的文件名即可。
下級關系:也就是目標文件所在的文件夾與當前文件是平級關系,當前文件與目標文件是上下級關系。
上級關系:目標文件位于上一層級。
../代表上一層文件夾
../../代表上二層文件夾
../../images/01.jpg
提示:在制作網站時,一般使用的都是相對路徑。
(3)下載鏈接:如果鏈接到的文件,網頁不能直接執行的話,都會出現下載提示。
瀏覽器可以直接執行的文件:.gif、.jpg、.png、html、.htm、.mp3、.swf等
(4)郵箱鏈接:mailto:beijing2000@126.com
第一步:定義一個錨點或標記 <a name=“top”></a>
第二步:鏈接到錨點或標記 <a href=“#top”>返回頂部</a>
<a href=“intro.html#bottom”>鏈接到intro.html的底部</a>
格式:<img 屬性=“屬性值” />
常用的屬性:
Src:指圖片的URL,可以是相對路徑,也可以是絕對路徑。
Width:指圖片的寬度,單位px或%
Height:指圖片的高度
Align:圖片的水平對齊方式,取值:left center right ,left或right可以實現圖文混排
Alt:如果圖片不存在時,顯示的提示信息
Hspace:圖片左右的距離
Vspace:圖片上下的距離
舉例:<img src=“images/01.gif” width=“400” height=“300” alt=“寶寶圖片” />
如果保證圖片在調整過程中不變形(等比例縮放):只需要設置width和height其中一個即可,另一個會自動縮放。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。