从开始计划做新闻发布系统,到今天发布成功,断断续续的做了二十多天。毕竟是自己第一次使用VS2010做网页开发,在做系统的过程中,总会出现各种各样的错误,我们来回顾此次开发的整个路程。
整体介绍一下系统
新闻发布系统主要实现后台人员添加新闻,浏览者能够在前台浏览新闻并发表评论。总体上说这个系统还是非常简单的,对于初级网页开发者来说是非常适合,在开发的过程中不仅可以初步的学习网页开发的基本技巧,还是对网页开发学习的打下良好的基础。前台页面主要是使用div+Css对网页布局,后台采用三层架构并涉及到js、jquery和ajax技术,他们都是将来编写web程序的重要技术。
前台页面开发(div+css)
div+css是一种网页的布局方法,不同于传统的HTML网页设计语言中的table定位方式,可实现网页页面内容和表现相分离,我们将div+css分成介绍。
DIV
定义:
div(division/section)可以理解为区域或块,它是网页HTML的标签,我们在代码中使用div标签配合css类布局网页。它是一个块级元素,目的把内容分割为独立的、不同的部分。
用法:
用id或class来标记<div>,设计不同的样式。id和class两者主要区别是:id用于标识单独的、唯一的元素(与其他元素区分,设计不同样式),而class用于标识一类元素(设计相同的样式)。
CSS
CSS(Cascading Style Sheets)指层叠样式表,有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制,主要的目的使网页更加美观漂亮。
举例:
html代码:
<!--最新新闻-->
<div id="newnews" class="commonfrm"></div>
<!--热点新闻-->
<div id="hotnews"class="commonfrm"></div>
css代码:
.commonfrm
{
/*框架公共样式*/
border:1px solid #DEDFDE;
float:left;
margin :5px;
width :550px;
}
#newnews
{
/*最新新闻框架样式*/
margin-left:10px;
margin-bottom:10px;
}
#hotnews
{
/*热点新闻框架样式*/
margin-left:10px;
}
div和css布局的特点:
1、简化代码
使用div+css布局使代码很是精简,css文件可以在网站的任意一个页面进行调用,而若是使用table表格修改部分页面却是显得很麻烦。
2、访问速度
综合前一条,div+css简化了许多网页代码,提高了浏览访问速度,提高用户体验度。
3、浏览器不兼容
div+css相比table布局,更容易出现多种浏览器不兼容的问题,主要原因是不同的浏览器对web标准默认值不同。
CSS盒子模型:
盒子是用于可装东西的长方形、正方形的盒子。例如:鞋盒子等等。css盒子模型也是装东西的,比如文字、图片都可以装在盒子中。
盒子模型主要有五大属性:css高度(css height)、css宽度(css width)、css边框(css border)、css 边距(css margin)、填充(css padding),即可实现像盒子一样的长方形、正方形平面盒子。
假如我们说设置一个宽度为100px盒子:
css样式代码:.yangshi{width:100px;}
对应html代码:
<div class="yangshi">内容</div>
这个时候我们可以将<div class="yangshi">内容</div>看作一个盒子。
后台代码编写
后台采用了三层架构并涉及到js、jquery和ajax技术,他们都是将来编写web程序的重要技术。在介绍这部分内容,我主要以代码为主,以修改新闻类别为例:
新闻类别界面:
代码:
$(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;
});
//设置文本框的样式
input.css("border-width", "0"); //边框的宽度为0
input.height(objTD.height()); //文本框的高度为当前td单元格的高度
input.width(objTD.width()); //文本框的宽度为当前td单元格的宽度
input.css("font-size", "14px"); //文本框的文字大小
input.css("text-align", "center"); //文本居中
input.trigger("focus").trigger("select"); //全选
//文本框失去焦点时重心变为文本
input.blur(function () {
var newText = $(this).val();
var input_blur = $(this);
//当老的类别名称与修改后的名称不同的时候才进行数据的提交操作
if (oldText != newText) {
//获取该类别名所对应的ID(序号)
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_blur.trigger("focus").trigger("select"); //全选
}
else {
$("#test").text("");
objTD.html(newText);
}
});
}
else {
//前后文本一致,把文本框变成标签
objTD.html(newText);
}
});
//在文本框中按下键盘某键
input.keydown(function (event) {
var jianzhi = event.keyCode;
var input_keydown = $(this);
switch (jianzhi) {
case 13: //按下回车键,把修改后的值提交到数据库
var newText = input_keydown.val();
//当老的类别名称与修改后的名称不同的时候才进行数据的提交操作
if (oldText != newText) {
//获取该类别名所对应的ID(序号)
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: //按下Exc键,取消修改,把文本框变成标签
$("#test").text("");
objTD.html(oldText);
break;
}
});
});
});
//屏蔽Enter按键
$(document).keydown(function (event) {
switch (event.keyCode) {
case 13: return false;
}
});
注意:一定要添加js文件的引用。
发布系统
相关推荐
Spring Boot 2.1.0 新闻发布系统第八章 项目总结项目总结
Spring Boot 2.1.0 新闻发布系统第八章 项目总结项目测试
jsp新闻发布系统后台 jsp后台相当好了
2.新闻发布系统模型结构 4 2.新闻发布系统功能模块介绍 4 3.新闻发布系统的工作流程 5 三 详细设计 7 1.数据库设计 7 2.各主要窗体页的图形界面设计 8 3.页面的风格设计 12 四 程序的调试与运行结果说明 13 1...
新闻发布系统源码(ASP.net+C#源码) 本人收藏了3年的资源 现放出 都是总结了很多系统 软件项目实施过程中的经验的 慢慢积累的
.NET新闻系统C#(毕业设计版)v1.0 功能简介: 新闻分类 新闻主题 点击次数 发布人 发布日期 修改新闻 删除新闻 编写目的: 该程序编写的目的是为了照顾加入到本QQ群中对C#编程刚刚入门的朋友,本程序是一个...
任务实施 任 务4:设置类别状态 类别状态修改的主要代码如图所示: 任务实施 任 务4:设置类别状态 任务4实施效果图如下: 归纳总结 利用ADO.NET进行数据库开发的基本步骤: 1、创建和数据库连接的connection 对象...
本系统为新闻发布网,包含用户、管理员角色,功能如下: 用户:注册、登录;国内新闻;国外新闻;娱乐新闻;财经新闻;体育新闻;留言。 管理员:管理员维护;用户管理;新闻分类;新闻管理;评论管理;投票查看;...
JavaWeb“系统管理”项目资源概览 一、内容概览 这个JavaWeb“系统管理”项目资源包,是专为对JavaWeb开发有兴趣的学习者设计的。它包含了从基础到高级的完整知识体系,以及实际项目操作的全部流程。具体内容包括...
作为一个开源的源码文件包,LyNews v1.0包含了丰富的功能模块,如新闻发布、编辑、删除、分类、评论等,满足了新闻网站的基本需求。同时,系统还具备良好的扩展性,可以根据用户需求进行定制和二次开发,以适应不同...
利用JSP技术开发的网站新闻管理系统,实现了网站新闻的动态管理,因为可以用来动态发布新闻信息,所以使得对信息的管理更加及时、高效,提高了工作效率。 论文目录 摘要 1 0 引言 3 1 系统分析 4 1.1 需求分析 4 ...
利用JSP技术开发的网站新闻管理系统,实现了网站新闻的动态管理,因为可以用来动态发布新闻信息,所以使得对信息的管理更加及时、高效,提高了工作效率。 论文目录 摘要 1 0 引言 3 1 系统分析 4 1.1 需求...
新闻管理:浏览新闻 发布新闻 内部论坛:查看帖子 发布帖子 头像管理 工作日志:提交日志 日志记录 批阅日志 日志汇总 日程计划:撰写日程 我的日程 撰写计划 我的计划 工作总结:撰写月总结记录.管理撰写年度总结记录....
7、新闻发布:oa系统集成了office在线编辑器,可轻松发布最新信息,文字、图片、视频、动画,支持附件添加。同时,文字编辑可进行加粗,下划线,复制、剪切,撤消、还原等操作。此外,发布的新闻可修改与删除管理。...
项目描述:OA办公系统基于B/S架构设计。 包括文件管理、共享下载、消息管理、公文流传、通知管理、内部论坛、人力资源管理、资产管理 等。 文件管理:接收文件 传送文件 文件操作记录 共享下载:查看共享 上传共享 ...
之后对GridView控件的模板列进行设置,主要HTML代码: 任务实施 任 务1:评论管理 任务实施效果图: 归纳总结 可以在GridView控件的模板列中使用BoundField模板生成只需要显示的数据行。而如果想生成其它更加复杂的...
新闻分类 新闻主题 点击次数 发布人 发布日期 修改新闻 删除新闻 编写目的: 本程序是一个非常简单的程序 ,但是包含了数据库系统中最常用的增、删、改。 数据库字典 表:MUser UserID UserNameStr ...
项目描述:OA办公系统基于B/S架构设计。 包括文件管理、共享下载、消息管理、公文流传、通知管理、内部论坛、人力资源管理、资产管理 等。 文件管理:接收文件 传送文件 文件操作记录 共享下载:查看共享 上传共享 ...
项目描述:OA办公系统基于B/S架构设计。 包括文件管理、共享下载、消息管理、公文流传、通知管理、内部论坛、人力资源管理、资产管理 等。 文件管理:接收文件 传送文件 文件操作记录 共享下载:查看共享 上传共享 ...