企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
      用了半个月的时间做完了这个新闻发布系统。从写文档到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接下来的学习中,要多多想想这些技术之间的关系。