用了半个月的时间做完了这个新闻发布系统。从写文档到C#开发后台再到ASP.NET开发前台,通过这样一个艰辛的历程,我对B/S有了初步的了解。这个系统看着简单,就发现它用到了所有我们B/S项目中我们需要学习的内容,真是麻雀虽小五脏俱全。佩服牛老师那“绝对不放过1PX”的精神!!!
如下图一是我的概述总结。
![](https://box.kancloud.cn/2016-08-19_57b6bd249b4ab.jpg)
[图一 牛腩总结]
## 一、文档的编写
视频(1-4)的开始在介绍系统开发前的设计阶段,很熟悉,当初敲机房收费系统也是这样一个过程。通过牛腩系统发布系统的前期设计文档的编写,让我又温习了一遍设计说明书中的重点内容:UML图,用例设计,UI设计,数据库设计。包括后边开发阶段的时候,一直都是以这个文档为开发的宗旨的。我才恍然大悟:原来文档是这个样子用的。
## 二、后台的编写
视频(5-17)接下来就开始了系统开发的阶段,后台的编写跟C/S的项目没有区别。我是没有看出有什么不一样的地方。首先系统采用了三层架构,这些都是我们上个阶段学到的内容。然后详细的介绍了SQLHelper类的形成过程,找到数据库连接时的共性进行不断的抽象和封装,根据查和增删改返回值不同,而分成两个函数。然后是数据库的设计,主要用到了存储过程和连接查询。存储过程在机房收费系统的时候就用到了,这里主要把连接查询复习了一下。自考《数据库原理》中也详细介绍了内连接的内容,也是对学过内容的一次回顾。总体感觉:后台编写主要就是回顾了一下之前的知识而已。
## 三、前台编写
![](https://box.kancloud.cn/2016-08-19_57b6bd24b5c5b.jpg)
[图二 前台]
视频(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的交互。
举个例子,在新闻发布系统中有个对类别进行管理的功能,要求实现点击表格中的某个单元格的时候,该单元格就会变成一个文本框用于进行编辑。
效果如下图三:
![](https://box.kancloud.cn/2016-08-19_57b6bd252307b.jpg)
[图三]
~~~
$(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接下来的学习中,要多多想想这些技术之间的关系。