B/S初探之新闻发布系统总结

Dear 丶 2022-08-06 00:27 185阅读 0赞

用了半个月的时间做完了这个新闻发布系统。从写文档到C\#开发后台再到ASP.NET开发前台，通过这样一个艰辛的历程，我对B/S有了初步的了解。这个系统看着简单，就发现它用到了所有我们B/S项目中我们需要学习的内容，真是麻雀虽小五脏俱全。佩服牛老师那“绝对不放过1PX”的精神！！！

如下图一是我的概述总结。

![SouthEast][]

\[图一 牛腩总结\]

# 一、文档的编写 #

视频（1-4）的开始在介绍系统开发前的设计阶段，很熟悉，当初敲机房收费系统也是这样一个过程。通过牛腩系统发布系统的前期设计文档的编写，让我又温习了一遍设计说明书中的重点内容：UML图，用例设计，UI设计，数据库设计。包括后边开发阶段的时候，一直都是以这个文档为开发的宗旨的。我才恍然大悟：原来文档是这个样子用的。

# 二、后台的编写 #

视频（5-17）接下来就开始了系统开发的阶段，后台的编写跟C/S的项目没有区别。我是没有看出有什么不一样的地方。首先系统采用了三层架构，这些都是我们上个阶段学到的内容。然后详细的介绍了SQLHelper类的形成过程，找到数据库连接时的共性进行不断的抽象和封装，根据查和增删改返回值不同，而分成两个函数。然后是数据库的设计，主要用到了存储过程和连接查询。存储过程在机房收费系统的时候就用到了，这里主要把连接查询复习了一下。自考《数据库原理》中也详细介绍了内连接的内容，也是对学过内容的一次回顾。总体感觉：后台编写主要就是回顾了一下之前的知识而已。

# 三、前台编写 #

![SouthEast 1][]

\[图二 前台\]

视频（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的交互。

举个例子，在新闻发布系统中有个对类别进行管理的功能，要求实现点击表格中的某个单元格的时候，该单元格就会变成一个文本框用于进行编辑。

效果如下图三：

![SouthEast 2][]

\[图三\]

$(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接下来的学习中，要多多想想这些技术之间的关系。

[SouthEast]: /images/20220806/ec94383acc034fa48958707af0b5c91b.png
[SouthEast 1]: /images/20220806/cb372aaaff374522b2bb59437ace5d67.png
[SouthEast 2]: /images/20220806/7c92e8dfe4b946638f7b1141cfc1b7d0.png