B/S初探之新闻发布系统总结
2014-12-07 14:57
169 查看
用了半个月的时间做完了这个新闻发布系统。从写文档到C#开发后台再到ASP.NET开发前台，通过这样一个艰辛的历程，我对B/S有了初步的了解。这个系统看着简单，就发现它用到了所有我们B/S项目中我们需要学习的内容，真是麻雀虽小五脏俱全。佩服牛老师那“绝对不放过1PX”的精神！！！
如下图一是我的概述总结。
[图一 牛腩总结]
[图二 前台]
视频（18-63）接下来就到了我们要学习的B/S部分（如图二）了，如我开篇所说，这个系统看着简单，就它用到了所有我们B/S项目中我们需要学习的内容，下面根据它们出场的顺序，谈谈我对它们的理解。
HTML（HyperText Mark-up Language）超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。【XML（Extendsible
Markup Language 可扩展性标记语言）和HTML的区别在于：前者是用来传输和存储数据，后者用来显示数据。】
HTML有三大基本要素：标签，属性，元素。如下面这段代码，<>括号里面的内容，就是标签。其中带有“/”的标签是结束标签。标签里面比如color="green"，其中color就是font字体的颜色属性。<title>静夜思</title>这句的意思是：起始标签-内容-闭合标签。
神器二：Web的“血肉”——CSS+DIV
DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。在用到了HTML标签的基础上，我们使用CSS盒子模型，可以把标签当成盒子，对网页进行布局。使用CSS盒子可以对我们的主页进行渲染，使表现形式越来越丰富。
神器三：Web的“神经”——JavaScript
JavaScript 直译式脚本语言，嵌入HTML，有利于结构与新闻分离，添加网页的动态功能效果。比如JavaScript可以对鼠标的单击事件或者浏览器的操作进行捕捉。在新闻发布系统中把JS单独写成了一个脚本文件，然后引用到HTML中，这样做的好处是：有利于结构和操作活动的分离。JQuery是一个优秀的JavaScript库，使用它的目的是方便处理HTML，实现动态效果，提供与AJAX的交互。
举个例子，在新闻发布系统中有个对类别进行管理的功能，要求实现点击表格中的某个单元格的时候，该单元格就会变成一个文本框用于进行编辑。
效果如下图三：
[图三]
举个例子，在系统中当更改了新闻类别名称后，更新到数据库中。这个样子，类名信息需要取出最新的，利用AJAX可以实现不刷新整个网页，只修改类别table。如下：
一般处理程序如下，判断类别是否重复，调用B层的更新类别名函数：
如下图一是我的概述总结。
[图一 牛腩总结]
一、文档的编写
视频（1-4）的开始在介绍系统开发前的设计阶段，很熟悉，当初敲机房收费系统也是这样一个过程。通过牛腩系统发布系统的前期设计文档的编写，让我又温习了一遍设计说明书中的重点内容：UML图，用例设计，UI设计，数据库设计。包括后边开发阶段的时候，一直都是以这个文档为开发的宗旨的。我才恍然大悟：原来文档是这个样子用的。二、后台的编写
视频（5-17）接下来就开始了系统开发的阶段，后台的编写跟C/S的项目没有区别。我是没有看出有什么不一样的地方。首先系统采用了三层架构，这些都是我们上个阶段学到的内容。然后详细的介绍了SQLHelper类的形成过程，找到数据库连接时的共性进行不断的抽象和封装，根据查和增删改返回值不同，而分成两个函数。然后是数据库的设计，主要用到了存储过程和连接查询。存储过程在机房收费系统的时候就用到了，这里主要把连接查询复习了一下。自考《数据库原理》中也详细介绍了内连接的内容，也是对学过内容的一次回顾。总体感觉：后台编写主要就是回顾了一下之前的知识而已。三、前台编写
[图二 前台]
视频（18-63）接下来就到了我们要学习的B/S部分（如图二）了，如我开篇所说，这个系统看着简单，就它用到了所有我们B/S项目中我们需要学习的内容，下面根据它们出场的顺序，谈谈我对它们的理解。
1、前台开发三大神器：HTML、CSS、JavaScript
神器一：Web的“骨架”——HTMLHTML（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接下来的学习中，要多多想想这些技术之间的关系。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 