? ? ? 用了半個月的時間做完了這個新聞發布系統。從寫文檔到C#開發后臺再到ASP.NET開發前臺，通過這樣一個艱辛的歷程，我對B/S有了初步的了解。這個系統看著簡單，就發現它用到了所有我們B/S項目中我們需要學習的內容，真是麻雀雖小五臟俱全。佩服牛老師那“絕對不放過1PX”的精神！！！
? ? ? 如下圖一是我的概述總結。
[圖一 牛腩總結]
## 一、文檔的編寫
? ? ? ?視頻（1-4）的開始在介紹系統開發前的設計階段，很熟悉，當初敲機房收費系統也是這樣一個過程。通過牛腩系統發布系統的前期設計文檔的編寫，讓我又溫習了一遍設計說明書中的重點內容：UML圖，用例設計，UI設計，數據庫設計。包括后邊開發階段的時候，一直都是以這個文檔為開發的宗旨的。我才恍然大悟：原來文檔是這個樣子用的。
## 二、后臺的編寫
? ? ? ?視頻（5-17）接下來就開始了系統開發的階段，后臺的編寫跟C/S的項目沒有區別。我是沒有看出有什么不一樣的地方。首先系統采用了三層架構，這些都是我們上個階段學到的內容。然后詳細的介紹了SQLHelper類的形成過程，找到數據庫連接時的共性進行不斷的抽象和封裝，根據查和增刪改返回值不同，而分成兩個函數。然后是數據庫的設計，主要用到了存儲過程和連接查詢。存儲過程在機房收費系統的時候就用到了，這里主要把連接查詢復習了一下。自考《數據庫原理》中也詳細介紹了內連接的內容，也是對學過內容的一次回顧。總體感覺：后臺編寫主要就是回顧了一下之前的知識而已。
## 三、前臺編寫
? ? ?
[圖二 前臺]
? ? ? 視頻（18-63）接下來就到了我們要學習的B/S部分（如圖二）了，如我開篇所說，這個系統看著簡單，就它用到了所有我們B/S項目中我們需要學習的內容，下面根據它們出場的順序，談談我對它們的理解。
### 1、前臺開發三大神器：HTML、CSS、JavaScript
- **神器一：Web的“骨架”——HTML**
? ? ? HTML（HyperText Mark-up Language）超文本標記語言或超文本鏈接標示語言（標準通用標記語言下的一個應用）HTML是一種制作萬維網頁面的標準語言，是萬維網瀏覽器使用的一種語言，它消除了不同計算機之間信息交流的障礙。【XML（Extendsible Markup Language 可擴展性標記語言）和HTML的區別在于：前者是用來傳輸和存儲數據，后者用來顯示數據。】
? ? ? HTML有三大基本要素：標簽，屬性，元素。如下面這段代碼，<>括號里面的內容，就是標簽。其中帶有“/”的標簽是結束標簽。標簽里面比如color="green"，其中color就是font字體的顏色屬性。<title>靜夜思</title>這句的意思是：起始標簽-內容-閉合標簽。
~~~
<html>
<head>
<title>
靜夜思
</title>
</head>
<body>
<!--這個是一首詩-->
<center>
<h2><font color="green">靜夜思</font></h2>
<b>作者：李白</b>
<hr color="blue">
<p>
<b><i><font color="blue" size="13">窗前明月光，疑是地上霜。<br>
抬頭望明月，低頭思故鄉。</font></b></i>
</center>
</body>
</html>
~~~
- **神器二：Web的“血肉”——CSS+DIV**
? ? ? DIV+CSS是WEB設計標準，它是一種網頁的布局方法。與傳統中通過表格（table）布局定位的方式不同，它可以實現網頁頁面內容與表現相分離。在用到了HTML標簽的基礎上，我們使用CSS盒子模型，可以把標簽當成盒子，對網頁進行布局。使用CSS盒子可以對我們的主頁進行渲染，使表現形式越來越豐富。
- **神器三：Web的“神經”——JavaScript**
? ? ? ?JavaScript 直譯式腳本語言，嵌入HTML，有利于結構與新聞分離，添加網頁的動態功能效果。比如JavaScript可以對鼠標的單擊事件或者瀏覽器的操作進行捕捉。在新聞發布系統中把JS單獨寫成了一個腳本文件，然后引用到HTML中，這樣做的好處是：有利于結構和操作活動的分離。JQuery是一個優秀的JavaScript庫，使用它的目的是方便處理HTML，實現動態效果，提供與AJAX的交互。
? ? ? 舉個例子，在新聞發布系統中有個對類別進行管理的功能，要求實現點擊表格中的某個單元格的時候，該單元格就會變成一個文本框用于進行編輯。
效果如下圖三：
[圖三]
~~~
$(function ()
{ // 相當于在頁面中的body標簽加上onload事件
$(".caname").click(function ()
{ // 給頁面中有caname類的標簽加上click函數
var objTD = $(this);
var oldText = $.trim(objTD.text()); // 保存老的類別名稱
var input = $("<input type='text' value='" + oldText + "' />"); // 文本框的HTML代碼
objTD.html(input); // 當前td的內容變為文本框
// 設置文本框的點擊事件失效
input.click(function ()
{
return false;
});
});
});
~~~
### 2、Web異步更新——AJAX
? ? ? ?AJAX框架（Asynchronows JavaScript And XML ）整合了JS，XML，CSS，實現了JS和XML的異步，創建了交互式網頁應用的網頁開發技術。在后頭與Server進行少量數據交換（異步更新是指：不重新加載整個頁面，只實現局部的更新。）
? ? ? 舉個例子，在系統中當更改了新聞類別名稱后，更新到數據庫中。這個樣子，類名信息需要取出最新的，利用AJAX可以實現不刷新整個網頁，只修改類別table。如下：
~~~
//在文本框中按下鍵盤某鍵
input.keydown(function (event)
{
var jianzhi = event.keyCode;
var input_keydown = $(this);
switch (jianzhi)
{
case 13: //按下回車鍵，提交數據
var newText = $(input_keydown).val();//修改后的名稱
//當老名與新名不同才進行提交
if (oldText != newText)
{
//獲取該類別所對應的序號
var caid = $.trim(objTD.prev().text());
//AJAX異步更改數據庫
var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime();
$.get(url, function (data)
{
if (data == "false")
{
$("#test").text("類別修改失敗，請查看是否類別名稱有問題");
input_keydown.trigger("focus").trigger("select"); // 全選
}
else
{
$("#test").text("");
objTD.html(newText);
}
});
}
else
{
//前后文本一致，把文本框變成標簽
objTD.html(newText);
}
break;
case 27: //按下esc,取消修改,把文本框變成標簽
$("#test").text("");
objTD.html(oldText);
break;
}
});
~~~
? ? ? ?一般處理程序如下，判斷類別是否重復，調用B層的更新類別名函數：
~~~
<%@ WebHandler Language="C#" Class="ChangeCaName" %>
using System;
using System.Web;
using BLL;
using Model;
public class ChangeCaName : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string caid = context.Request.QueryString["caid"];
string caname = context.Server.UrlDecode( context.Request.QueryString["caname"]);
//是否重名
if(new CategoryManager().IsExists(caname))
{
context.Response.Write("false");
return;
}
//更數據庫類別名稱
Category ca = new Category(caid, caname);
bool b= new CategoryManager().Update(ca);
if (b)
{
context.Response.Write("true");
}
else
{
context.Response.Write("false");
}
}
public bool IsReusable {
get {
return false;
}
}
}
~~~
## 四、小結
? ? ? 在整個新聞發布系統的制作過程中，接觸到了一些web前臺開發必備技術，給我的感覺是有些東西還不知道是什么，也沒學過，就已經用上了。像HTML、ASP.NET、JavaScript、XML、AJAX。這些都不是一個個單獨存在的，每一個技術的應用都是為了彌補上一個技術的應用的不足。這仿佛是暗示了我，在B/S接下來的學習中，要多多想想這些技術之間的關系。
