选择的下拉列表内容如何自动加入文本框?

xtra 2000-08-22 10:57:00
当在一个下拉列表框选择一项时,选择的内容自动加入另外一个多行文本框中去。每个
项目占一行。用JAVASCRIPT应该怎么做?
...全文
192 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
huntout 2000-08-22
  • 打赏
  • 举报
回复
<script language=javascript>
var a = new Array();
function selectOne() {
with (document.form1) {
a[a.length] = select1[select1.selectedIndex].text;
text1.value = text1.value + a[a.length - 1] + "\n";
}
}
</script>
xtra 2000-08-22
  • 打赏
  • 举报
回复
huntout 你好,如果在项目存入文本框之前先将其放入一个一维数组应该怎么写?,谢谢!
huntout 2000-08-22
  • 打赏
  • 举报
回复
<html>
<form name=form1>
<select name=select1 onchange='selectOne()'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<textarea name=text1></textarea>
</form>
<script language=javascript>
function selectOne() {
with (document.form1) {
text1.value = text1.value + select1[select1.selectedIndex].text + "\n";
}
}
</script>
</html>
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 下拉框式网站导航 6.14 综合的搜索引擎 6.15 经典的ListView列表框 第7章 键盘操作和状态栏特效 7.1 按功能键返回首页 7.2 回车实现Tab键功能 7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建(Back Space) 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字来回出现 7.11 交替闪烁的状态栏 7.12 状态栏的分解显示文本特效 7.13 状态栏文字从右弹出 7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键 第8章 链接特效 8.1 关闭窗口的链接 8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的注释 8.11 为超链接同时绑定单击和双击事件 8.12 带链接的滚动字幕 8.13 会跳舞的链接 8.14 检测站点的连接速度 8.15 文本链接的渐变效果 第9章 表格特效 9.1 用table做的镜框 9.2 全自动单元格 9.2 突出的表格 9.3 让表格有提示信息 9.4 闪亮的表格边框 9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果(一) 9.38 类C# GridView的编辑效果(二) 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选框求和 10.4 复选框组选 10.5 复选框分组全选 10.6 复选框和文本框的联动效果 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选(二) 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 颜色切换板 11.4 下拉菜单 11.5 左键弹出式菜单 11.6 目录样式的下拉菜单 11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期特效 13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的广告 13.8 12小时制和24小时制的转换 13.9 标题栏显示时间 13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期转换为字符串的方法 13.20 检测是否是闰年 13.21 年份加减函数 13.22 精确到千分之一秒 13.23 离开某天的时间 13.24 判断两个字符串日期的大小 13.25 显示登录时间 13.26 中文日期样式(一) 13.27 中文日期样式(二) 13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 全面的日期选择功能 13.37 全球的时间查看表 13.38 无刷新定时取数据 13.39 取当月的最后一天 第 14章 数字、数组和统计函数特效 14.1 边打字边显示字数 14.2 创建随机数 14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 14.20 小写金额转换为大写 14.21 通过两点坐标计算直线距离 14.22 随机抽取彩票 14.23 实时计算折扣 14.24 实用计算器 14.25 前面补0的方法 第15章 图形、图像的特效 15.1 图片变形效果 15.2 图像的翻转效果 15.3 图像的模糊效果 15.4 图像的水印效果 15.5 图形淡出淡隐 15.6 图像的渐隐播放效果 15.7 文字环绕图片 15.8 切换图片的特殊效果 15.9 晃动的图片 15.10 定时消失的图片 15.11 QQ图像一闪一闪的效果 15.12 设置textarea中的图片不处于编辑状态 15.13 禁止图像的拷贝 15.14 LOGO像雪花一样落下 15.15 多幅图片分页滚动显示 15.16 循环滚动显示图片 15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项必须填写 16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 Email的验证 16.7 不使用正则验证IP地址 16.8 IP地址输入框 16.9 判断变量是否已经定义 16.10 判断方法是否已经定义 16.11 表单验证样式(一) 16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章 进度条、滚动条特效处理 17.1 使用符号制作的进度条 17.2 用table制作的进度条 17.3 CSS+JS制作的进度条(一) 17.4 CSS+JS制作的进度条(二) 17.5 进度条形式的下载效果 17.6 滑动条(一) 17.7 滑动条(二) 17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试代码(三) 18.4 多选考试题 18.5 在线心理测试脚本 18.6 电脑检测健康情况 第19章 文件处理和打印的技巧 19.1 判断上传文件的类型 19.2 改变上传文件控件的样式 19.3 上传文件一次完成 19.4 使用正则判断文件扩展名 19.5 多附件上传效果 19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将XML文件绑定到table 19.14 使用JavaScript加载XML文件 19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML文件 19.23 Kill Excel的进程 第20章 调用操作系统的应用 20.1 Javascript操作剪贴板 20.2 打开硬盘驱动器 20.3 单击加入收藏夹 20.4 复制标题和网址 20.5 关闭输入法 20.6 检测屏幕分辨率 20.7 检测系统信息 20.8 显示本地计算机信息 20.9 检测浏览器浏览过的站点数 20.10 IE文件菜单中的打开命令 20.11 打开Internet选项对话框 20.12 打开Windows系统的画板 20.13 弹出保存对话框 20.14 进入页面弹出收藏夹 20.15 执行客户端的可执行程序 20.16 自动调用OutLook发送邮件 20.17 弹出窗口选择颜色 20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用userData保存checkbox标记 21.4 使用DOM实现控件的替换 21.5 使用DOM实现控件的复制 21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense 22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 最简单的漂移特效 23.2 JavaScript遍历对象中的所有属性 23.3 QQ在线客服 23.4 查看网站的排名 23.5 定义全局变量 23.6 动态生成金字塔效果 23.7 动态修改CSS的样式 23.8 根据浏览器不同设置CSS 23.9 汉字按拼音排序 23.10 划词搜索 23.11 加载大量input控件的快速方法 23.12 简繁体转换 23.13 将HTML转换为JavaScript脚本 23.14 脚本永不出错 23.15 进入网站的签名程序 23.16 浏览器毁灭者 23.17 罗列对象的属性和值 23.18 密码保护页 23.19 全角转半角 23.20 全屏广告 23.21 输入的英文自动全大写 23.23 特殊扩散效果 23.24 提交信息等待界面 23.25 同时调用两个方法 23.26 自定义错误处理样式 23.27 FTP网站登录
UIDesigner(腾讯公司出品) 在软件设计阶段,交互设计师或者产品经理等常常需要使用一些工具(比如Visio、Axure RP、Flash或者OmniGraffle等)制作出静态稿或者原型来表达设计思想。这些工具是各有各的优势,当然也各有各的缺点啦。那么腾讯CDC是如何设计软件原型的呢?这里向大家介绍我们正在研发的原型设计利器UIDesigner。   首先,先让我们来体验一下UIDesigner制作出来的原型效果。这个原型是一个设置窗体,主要由按钮、复选框、分组框和文本框等控件构成,其中一些按钮还具有响应的动作(如打开另一个界面,关闭窗体等)。如图一所示,这是使用Firework制作出来的交互图。 图一、使用Firework制作出来的设计稿   这种交互图的特点是简单明了,能够表示出各种控件的基本属性(如文本、位置和选中状态等),但它只是一个静态的图片,不能真实表现出每个控件的响应动作,如仅看这张图,是不清楚点击代理服务器设置分组框上的“设置…”按钮会有什么响应的。   那再看看你若使用UIDesigner制作出来的效果:最终输出的是一个EXE可执行文件(见图二左上角),双击运行后就会出现一个与最终实现效果完全一致的窗体(见图二右)。另外,它还是一个具有响应动作的真实原型,例如你若点击了“设置…”按钮,那就会弹出一个新的窗体(见图三)。 图二、使用UIDesinger制作出来的原型 图三、点击“设置…”按钮后弹出的另一窗体   实际上,这个新弹出的窗体都是一个独立的原型,也是由UIDesigner制作出来的。由于它里面的控件同样可以设置下一步的响应动作,所以从总体上来看,众多原型就像一个树状结构,而其中的父节点就是图二中的设置窗体了。这种结构具有一个很大的好处:无论你完成了多个界面的原型,只需要它们之间有链接关系,最后输出的只是一个EXE可执行文件。这样,你可以很方便地与其它人员表达自己的设计思路,让沟通变得更加快捷。   接下来,我们看看这个原型是如何制作出来的。   第一步:建立空白窗体,调整它的大小、风格、标题和Icon 图四、使用UIDesigner制作原型—建立窗体   第二步:从工具箱中拖曳控件到窗体上,修改这些控件的属性(如Text等) 图五、使用UIDesigner制作原型—加入控件   由于UIDesigner具有自动对齐的功能,所以在拖动控件到窗体时就可以完成排版工作,不需要再逐个像素去调整。另外,不单单在加入控件到窗体时,在改变已存在于窗体内的控件的位置或者大小时,自动对齐功能一样会生效。这样,设计者在调整控件大小或者位置时(包括控件与控件,控件与窗体边缘等的距离等情况),工作变得很简单。 图六、使用UIDesigner制作原型—自动对齐功能   第三步:几分钟后,所有的控件都放到窗体并设置好属性了,如下图。 图七、使用UIDesigner制作原型—整体界面效果   此时,设计者就可以使用软件的导出图片或者导出原型功能分享你的设计成果了。当然,现在这种效果还只是一个没有响应动作效果的原型。接下来,我们再给“设置…”按钮加入响应动作。首先,选中“设置…”按钮,然后点击工具栏的“响应”按钮,你将会看到如图八的响应设置窗口。此时,你可以选择打开窗体、打开网页、弹出对话框、修改属性值和关闭本身窗体等五种效果,这里我们选择“打开窗体”,然后在弹出的对话框里指向弹出窗体的文件。最后,点击“完成”按钮即可。 图八、使用UIDesigner制作原型—设置控件的响应动作   到此为止,你就完成了一个与最终实现效果完全一致的高保真原型了。产品经理和开发人员等若想了解你的设计思想就不需要看着长长几页的说明文档了,而只需要运行你输出的原型文件,就可以对你的设计思路一目了然。   UIDesigner除了能让使用者能够快速地搭建起软件界面的高保真原型外,还提供了项目管理,让使用者能够方便地管理工程文件;提供了图片库和模板库功能,让使用者可以方便地重用以前的设计资源;提供了32个Windows客户端软件常用控件,满足使用者的设计需求;提供了多个属性设置入口,分别实现最常用属性设置、一般属性设置和高级属性设置功能。当然,UIDesigner不是专用来设计QQ的,其它的Windows客户端产品都在它的工作范围之内。总的来说呢,使用UIDesigner来制作原型是很高效的,而制作出来的原型也能够实现设计师、产品经理和程序开发工程师三者间的快速沟通,减少不必要的工作内耗。 ------------------------------------------------------------------ GUI_Design_Studio_3.5.94.0 在2008年,这款软件的作者从1,322位付费用户那获得了162,302美元的收入(其中仅12月份就有39,000美元),这令人鼓舞地证明了只要是提供真正价值的服务和软件,就能够创造很好的收入,即使在经济萧条的寒冬里。 GUI Design Studio是一款图形用户界面设计工具,您能用它在不需要编写任何代码或脚本的情况下快速地创建演示原型。使用标准元素绘制个人化的屏幕、窗口以及控件;将它们整合以展示操作工作流然后运行模拟程序测试您的设计。 当您需要绘制一款应用程序的外观或显示怎样将程序的各个部分连接起来时,您就可以使用GUI Design Studio来实现,如: 将产品创意文档化 制作项目提案 需求记录 创建屏幕图样 为开发人员制作详细的规格 为现有产品提出加强方案 以及更多其它用途 为用户以及股东甚至您自己制作展示文件以: 验证设计 找出替代项 评估多个使用场景 系统需求 Microsoft Windows Vista/XP/NT/2000 至少15MB的硬盘空间 推荐不少于256MB的内存 工程 将您的工作组织放到工程里。 每个工程都拥有它自己的文件夹结构。 可连接您计算机或网络上任何地方的其它库工程。 可连接到您计算机或网络上任何地方使您能够方便地获取图片以及其它文件。 创建您想要的并独立于所有工程的个人化设计文件。 创建能重复使用的设计库以及工程之间的一致性。 将图片直接从剪贴板中粘贴到工程文件夹的文件中。 屏幕设计程序 可同时打开多个设计文档并能使用分页界面在文档间快速切换。 可使用标准Windows元素创建图形用户界面(GUI)屏幕,包括框架窗口、会话、菜单、工具栏、标签、按钮、复选框、单选按钮、滚动条、滑动调节框、微调框、组合框、树列表、列表框、编辑框以及静态文本等。 通过现有元素或其它自定义控件创建自定义控制组件。 在其它设计中创建将要使用的控件设计。 以常用的文件格式添加图标与图片。 从能够显示您将获得什么的控件面板中进行拖放操作。 属性编辑程序使您能将每个元素进行自定义。 元素的自动生成功能。 您能在任何地方放置任何元素。 Edge snapping能通过“点击”对屏幕元素进行统一记录。 设计网格向您提供了简单的制作具有一致性设计布局的方法。 只需单键点击就能排列元素组。 均衡地隔开元素组。 调整元素大小以适应其它元素或测量一组其它元素。 聚焦缩小以查看细节设计或聚焦放大以浏览设计概况。使用工具栏按键或键盘或鼠标的滑动缩小放大功能聚焦增量。 使用鼠标的滚动以及滚轮功能快速浏览设计的概况。 剪切、复制与粘贴。 使用可选的canvas向导显示可用的屏幕空间。 通过文本框与书签对您的设计进行注释。 为每个设计添加说明。 选择色彩主题以避免实际功能窗口的混淆。 图标 为图标面板提供快速的访问方式。 工程间可共享常用图标。 工程也能拥有它们独享的图标集。 使用将来在实际产品开发中可能用到的标准ICO文件。 包含的Icon Express编辑程序支持16色、256色以及最大尺寸为127 x 127的真彩图标。 如果愿意同样能整合任意其它的图标编辑应用程序。 展示与原型 在可导航元素(如按键与窗口)之间创建连接以显示控制流程。 为图象添加覆盖保护以及添加其它元素以创建可导航的热点。 支持形式化与非模态的窗口并支持显示、隐藏或微调窗口,以及窗口替换以实现切换效果。 锚点使您能对窗口进行准确定位。 能立即在模拟程序中测试或展示您的设计。 添加消息框以描述可能在真实应用程序中出现的功能。 可创建多种场景,如正常条件下的场景与多个出错场景。 选择要激活的场景或让模拟程序为您选择。 更改有效的屏幕分辨率以查看您的设计如何适应不同的屏幕大小。 在没有进行脚本或代码编写的情况下,所有操作都是以图形模式完成。 ------------------------------------------------------------------ Balsamiq_Mockups_1.8.4 1. 首先安装 AdobeAIRInstaller.exe 2. 安装主程序 MockupsForDesktop.air 3. 使用 keygen 进行注册 在Balsamiq Mockups中绘制界面原型,就像在纸张和白板上手工绘画一样方便快速,而且不用担心出错,因为你完全可以进行回复/重做。在Balsamiq Mockups中设计原型比在纸张和白板可有趣多了! 丰富的控件支持 Balsamiq Mockups预先提供了丰富的控件,如浏览器窗口、媒体播放器组件、圆形图表等,让你信手拈来! 丰富的控件 方便的属性设置 当你选择一个控件时,会立刻出现该控件的属性选项,你可以随时编辑修改属性。 属性设定 无限的恢复/重做,不用担心出错,你可以无限制的进行回复和重做。 开放,可移植的数据 Balsamiq Mockups所生成的数据是易于阅读的XML格式数据,你可以进行方便的移植和重用集成。 开放的数据 多种方式的集成应用,你可以将Balsamiq Mockups集成倒Confluence, Jira, XWiki中. 集成应用 Balsamiq Mockups是一款免费的带有手绘风格的原型设计软件,可以帮助你设计桌面应用软件,Web 2.0 站点, RIA富网络应用程序, Web站点和Web应用软件。 功能和亮点: 操作方面:拖拽,控件分组,甚至元素之间的对齐都做得很到位; 预制了六十多个界面元素,从简单的输入框,下拉框,到经常用得到的导航条,日历,表格,到复杂的Tag Cloud,Cover Flow, 地图,WYSWYG的格式工具栏等,有了这些不用从头画起,其实比用白板都快; 界面元素的修改很简单,比如导航条的几个标签页的label,就是用逗号分隔的文字,下拉框的选项就是分行的文字; 使用xml语言来记录和保存界面元素和布局,从而使其能够快速的导入到你所需的任何一个项目中,或其他工具中。 可以将设计导出成PNG格式的图片; 随着使用的熟练,快捷键便派上用场,超过一半的元素均有快捷方式,这更有助于原型的快速构造,几乎几分钟便可实现一个满意的而复杂的原型设计; 跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用; 不仅仅有桌面版本,还有能集成在Confluence,JIRA,和XWiki中的版本,使得异地在线协作更方便有效。 可以用命令行进行导出操作,这样就能让我写个脚本,从svn里checkout某个目录下的所有设计文件后,导出图片,打包后用邮件发到项目经理,工程师甚至客户那; 跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用;不仅仅有桌面版本,还有能集成在Confluence,JIRA,和XWiki中的版本,使得异地在线协作更方便有效;据作者说,现在这款软件的设计就是用它自己来设计的,经典的“吃自己的狗粮”,这也让我对其更有信心,因为它是开发者为开发者写的软件。 还有值得一提的是Balsamiq Mokups的在GetSatisfaction上的用户支持和服务,作者Peldi对问题报告,新需求的回应很积极和及时。而且根据这个讨论上看,到月底就会有一个专门用来分享界面控件设计的社区网站了,很期待。 再要说的一点是这款软件是要付费的,79美元(也可以免费,具体如何免费,请看网站上的说明),相对于它能节省下来的时间和提高的效率,是很值得的。Peldi说在2008年,这款软件就从1,322位付费用户那获得了162,302美元的收入(其中仅12月份就有39,000美元),这令人鼓舞地证明了只要是提供真正价值的服务和软件,就能够创造很好的收入,即使在经济萧条的寒冬里。
目录: 第1章 窗口/框架与导航条设计 1 1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例007 为弹出的窗口加入关闭按钮 11 实例008 关闭弹出窗口时刷新父窗口 12 实例009 关闭IE主窗口时,不弹出询问对话框 13 1.2 弹出网页对话框 14 实例010 弹出网页模式对话框 14 实例011 弹出全屏显示的网页模式对话框 16 实例012 网页拾色器 18 实例013 日期选择器 21 1.3 窗口的动画效果 26 实例014 页面自动滚动 26 实例015 打开窗口特殊效果 27 实例016 动态显示窗口 29 实例017 慢慢放大的窗口 30 实例018 下降式浏览器 32 实例019 旋转的窗口 33 实例020 移动的窗口 34 实例021 震动的窗口 35 实例022 弹出广告窗口 36 1.4 窗口控制 37 实例023 窗口始终在最上面 38 实例024 窗口的最小化、最大化 39 实例025 频道方式窗口 41 实例026 全屏显示 42 实例027 设置窗口大小和位置 43 实例028 刷新当前页 44 实例029 自动最大化 45 实例030 自定义导航控制面板 46 实例031 根据用户分辨率自动调整窗口 48 1.5 窗口的其他效果 49 实例032 打开窗口时显示对话框 50 实例033 使窗口背景透明 50 实例034 立体窗口 52 实例035 动态标题栏 53 实例036 固定大小的窗口 54 1.6 框架的应用 55 实例037 框架集的嵌套 56 实例038 在网页中应用浮动框架 58 实例039 创建空白框架 60 实例040 居中显示框架页 62 1.7 无边框窗口 63 实例041 全屏显示无边框有滚动条的窗口 63 实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二级导航菜单 74 实例048 半透明背景的下拉菜单 76 实例049 展开式导航条 80 实例050 用层制作下拉菜单1 81 实例051 用层制作下拉菜单2 84 1.10 侧导航条设计 86 实例052 自动隐藏式菜单 87 实例053 收缩式导航菜单 89 实例054 树状导航菜单 91 第2章 表单及表单元素 95 2.1 文本框/编辑框/隐藏域组件 96 实例055 获取文本框/编辑框/隐藏域的值 96 实例056 自动计算金额 97 实例057 设置文本框的只读属性 98 实例058 限制多行文本域输入的字符个数 100 实例059 自动选择文本框/编辑框中的文字 102 实例060 按下回车键时自动切换焦点 103 2.2 下拉列表/菜单 104 实例061 获取下拉列表/菜单的值 104 实例062 遍历多选择下拉列表 105 实例063 在下拉列表中进行多选移除 106 实例064 将数组中的数据添加到下拉菜单中 107 实例065 应用下拉菜单选择所要联机的网站 108 实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉菜单的值显示不同控件 112 实例069 分级下拉列表 113 2.3 单选按钮组 114 实例070 不提交表单获取单选按钮的值 114 实例071 选中单选按钮后显示其他表单元素 116 实例072 通过单选按钮控制其他表单元素是否可用 117 2.4 复选框 117 实例073 不提交表单获取复选框的值 118 实例074 控制复选框的全选或反选 118 实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与重置 122 实例079 带记忆功能的表单 123 实例080 防止表单重复提交 124 实例081 自动提交表单 125 实例082 通过for循环获取表单元素的中文名称 126 实例083 可以提交到不同处理页的表单 127 第3章 实用JavaScript函数 129 3.1 数据验证 130 实例084 通过正则表达式验证日期 130 实例085 验证输入的日期格式是否正确 132 实例086 检查表单元素是否为空 134 实例087 验证E-mail是否正确 135 实例088 通过正则表达式验证电话号码 137 实例089 验证输入的字符串是否为汉字 139 实例090 验证身份证号码 140 实例091 验证用户名和密码 142 实例092 验证车牌号码 144 实例093 验证网站地址 145 实例094 验证数量和金额 147 实例095 验证字符串是否以指定字符开头 149 实例096 限制输入字符串的长度 150 3.2 字符串处理 152 实例097 小写金额转换为大写金额 152 实例098 去除字符串中的空格 155 实例099 转换输入文本中的回车和空格 156 实例100 将数字字符串格式化为指定长度 158 实例101 把一个长数字分位显示 159 实例102 将RGB格式的颜色值转换为十六进制格式 161 实例103 将IP地址转换为对应的数值 163 实例104 从指定URL中提取文件名 164 3.3 随机函数 166 实例105 随机产生指定位数的验证码 166 实例106 生成随机字符串 167 3.4 日期与时间 169 实例107 显示长日期格式的系统日期 169 实例108 实时显示系统时间 171 第4章 日期和时间 173 4.1 日期时间显示 174 实例109 在标题栏中显示日期时间 174 实例110 使用toLocaleString()方法获取本地时间 176 实例111 全中文显示日期 176 实例112 在状态栏中显示日期时间 178 实例113 使用数组显示星期 179 实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 181 实例116 显示用户在页面的停留时间 182 实例117 显示最后修改时间 183 4.2 日期时间算法 184 实例118 计算某一天是星期几 184 实例119 判断指定年份是否为闰年 186 实例120 计算从出生到现在度过的时间 187 实例121 返回两个日期之间的间隔小时 188 实例122 倒计时 190 实例123 访问时间限制 191 实例124 计步器 192 4.3 日期时间特效 194 实例125 分时问候 194 实例126 节日提示 195 实例127 倒影时钟 196 实例128 带阴影的时钟 199 实例129 动态石英钟 200 实例130 生日提醒器 203 实例131 数字时钟 205 实例132 各地时间表 206 实例133 位于页面顶层的时钟 209 第5章 文字特效 213 5.1 文字的颜色变换 214 实例134 简单文字变色 214 实例135 文字变色 215 实例136 变换的文字 216 实例137 描边文字 217 实例138 霓虹灯文字 218 实例139 追逐点亮的文字 219 实例140 萤光文字 220 实例141 发光文字的闪烁效果 221 实例142 文字的舞台灯光效果 223 实例143 制作彩色渐变文字动画 224 5.2 改变文字大小 226 实例144 文字伸缩 226 实例145 动荡的文字 227 实例146 文字伸展 228 实例147 文字逐个放大 230 实例148 自动改变大小 231 实例149 选择字体的大小 232 5.3 文字显示效果 234 实例150 文字渐隐渐现 234 实例151 文字虚幻变化 235 实例152 文字虚幻抖动 237 5.4 指定文字位置 238 实例153 将文字置于工作区左上角 238 实例154 右上角文字 239 实例155 鼠标移动文字 241 5.5 文字动态移动 242 实例156 文字自动滚屏 242 实例157 文字上下滚动 243 5.6 文字立体效果 244 实例158 文字的旋转 244 实例159 立体旋转文字 246 实例160 文字3D效果 248 5.7 文字动画效果 249 实例161 反弹文字 249 实例162 飞舞的文字 252 实例163 飞翔的文字 254 实例164 平面旋转的文字 257 实例165 输出文字 258 实例166 文字打字效果 259 实例167 文字抖动 261 实例168 指向文字时飞出星形标记 262 实例169 文字的抛出效果 264 5.8 文字特殊效果 265 实例170 波浪文字 265 实例171 梦幻文字效果 266 实例172 屏风文字 268 实例173 文字阴影 270 5.9 其他 270 实例174 随机显示文字 270 实例175 文字加密及解密 271 第6章 超级链接特效 275 6.1 超级链接样式 276 实例176 改变超级链接字体样式 276 实例177 当鼠标移动到超级链接时改变超级链接颜色 277 实例178 改变超级链接背景色 278 6.2 超级链接控制 279 实例179 建立E-mail超级链接 280 实例180 获取页面中的全部超级链接 281 实例181 将网站设为首页 282 实例182 单击鼠标右键自动链接到指定网站 283 实例183 单击超级链接将本页加入收藏夹 285 实例184 访问指定的链接地址 286 实例185 返回默认主页 287 实例186 导航链接 289 6.3 超级链接特效 291 实例187 快速闪动页面中的超级链接 291 实例188 滚动的超级链接提示信息 292 实例189 公告栏中显示超级链接 294 实例190 显示超级链接站点相关信息 295 实例191 显示超级链接的提示信息 296 实例192 半透明背景的超级链接提示 297 第7章 操作表格 299 7.1 表格的颜色效果 300 实例193 闪烁的表格边框 300 实例194 单元格边框变色 301 实例195 选中的行变色 302 7.2 对单元格的焦点进行控制 303 实例196 选定表格中的单元格 303 实例197 左右移动单元格的信息 304 实例198 通过键盘使单元格焦点任意移动 306 7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 316 实例203 编辑单元格中的文本信息 318 实例204 合并单元格 320 实例205 在表格中添加行及单元格 322 实例206 删除表中的单元格 324 7.5 表格的特殊效果 325 实例207 透明表格 326 实例208 限制表格的宽度 327 实例209 表格的标题 328 实例210 表格的外阴影 329 实例211 立体表格 329 实例212 虚线边框表格 330 实例213 表格作为分割线 332 实例214 表格向下展开 332 第8章 图形图像与多媒体 335 8.1 图片大小 336 实例215 打开自定义大小的图片 336 实例216 图片放大缩小 337 实例217 通过鼠标滚轮放大缩小图片 338 8.2 图片与鼠标相关操作 339 实例218 跟随鼠标移动的图片 340 实例219 可以左右拖动的图片 340 实例220 随意拖动图片 342 实例221 当鼠标经过图片时显示图片 344 实例222 改变图片获取焦点时的状态 345 实例223 抖动的图片 346 实例224 鼠标移动放大图片 347 8.3 图片与时间相关操作 349 实例225 定时隐藏图片 349 实例226 根据时间变换页面背景 350 实例227 使图片不停闪烁 352 实例228 上下跳动的图片 352 实例229 图片左右晃动 354 实例230 飘舞的变形图片 356 8.4 图片的动画效果 358 实例231 图片翻转效果 359 实例232 水波倒影特效 360 实例233 图片渐隐渐现 361 实例234 图片的探照灯效果 362 实例235 雷达扫描图片特效 363 实例236 在页面中旋转的图片 365 实例237 改变形状的图片 366 实例238 图片在页面浮动 367 实例239 随机变化的网页背景 369 8.5 选择头像 370 实例240 在列表中选择图片 370 实例241 在弹出的新窗口中选择图片 372 8.6 在页面中播放图片 374 实例242 幻灯片式播放图片 374 实例243 无间断的图片循环滚动效果 376 8.7 图片的其他效果 377 实例244 导航地图 377 8.8 播放音乐 378 实例245 为网页设置背景音乐 378 实例246 随机播放背景音乐 380 实例247 MIDI音乐选择 381 8.9 插入Flash动画 383 实例248 插入Flash动画 383 实例249 插入背景透明的Flash动画 384 8.10 播放视频文件 385 实例250 播放AVI文件 385 实例251 自制视频播放器 387 第9章 页面特效 391 9.1 页面背景效果 392 实例252 背景固定居中 392 实例253 背景图片纵向重复显示 393 实例254 通过按钮变换背景颜色 395 实例255 背景自动变色 396 实例256 百叶窗 396 实例257 渐隐渐显的背景颜色 398 实例258 页面缩小 399 实例259 页面上下打开效果 400 实例260 页面左右打开效果 402 实例261 页面溶解效果 404 9.2 特殊页面 406 实例262 页首页尾切换 406 实例263 调用下载页面 408 实例264 程序加载页面 409 实例265 颜色拾取器 411 9.3 广告页面 415 实例266 图片总置于顶端 415 实例267 随机显示广告 416 实例268 广告随滚动条漂移 418 9.4 页面动画效果 419 实例269 下雪 419 实例270 飘落的枫叶 421 实例271 下雨 423 实例272 背景的烟花效果 425 实例273 变色的圆圈 427 实例274 滚动的光环 429 实例275 星空极速飞入效果 430 实例276 闪烁的星星 432 9.5 其他 434 实例277 带密码的网页 434 实例278 页面左右滚动 435 实例279 动态移动的层 437 实例280 在页面中显示十字光标 438 第10章 状态栏特效 441 10.1 状态栏文字动画 442 实例281 使状态栏中的文字不停闪烁 442 实例282 文字从右向左依次弹出 443 实例283 文字从中间向两边展开 445 实例284 文字跑马灯特效 447 实例285 文字依次显示后快速收缩 449 实例286 文字的展开与收缩 451 实例287 状态栏中的文字依次弹出 452 10.2 其他 453 实例288 在状态栏显示固定自定义信息 453 实例289 在状态栏显示鼠标坐标 454 实例290 在状态栏显示特定的超级链接信息 456 第11章 报表与打印 459 11.1 Web打印 460 实例291 调用IE自身的打印功能实现打印 460 实例292 打印指定框架中的内容 461 实例293 利用WebBrowser打印 462 实例294 设置页眉页脚 463 11.2 利用Word打印报表 465 实例295 将页面中的表格导出到Word并打印 465 实例296 打开指定的Word文档并打印 467 实例297 在JSP中利用Word自动打印指定格式的会议记录 468 实例298 在ASP中利用Word自动打印指定格式的会议记录 470 实例299 在PHP中调用Word自动打印指定格式的会议记录 472 11.3 利用Excel打印报表 474 实例300 将Web页面中的数据导出到Excel 474 实例301 将Web页面中的数据导出到Excel并自动打印 476 11.4 利用CSS样式打印 478 实例302 利用CSS样式打印页面中的指定内容 478 实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印汇款单 482 实例305 打印快递单 484 实例306 打印信封 485 第12章 网站安全 489 12.1 禁止用户复制网页内容 490 实例307 禁止用户复制网页内容(方法一) 490 实例308 禁止用户复制网页内容(方法二) 491 实例309 禁止网页另存为 492 12.2 禁止用户刷新屏幕 493 实例310 屏蔽IE主菜单 493 实例311 屏蔽键盘相关事件 494 实例312 屏蔽鼠标右键 496 12.3 登录页面 497 实例313 具有浏览器检测功能的登录页面 497 实例314 防止SQL注入的登录页面 498 实例315 带验证码的登录页面 500 12.4 其他 501 实例316 使用Script Encoder加密工具加密 501 第13章 HTML/CSS样式 503 13.1 页面效果 504 实例317 统一站内网页风格 504 实例318 设置超级链接文字的样式 508 实例319 网页换肤 509 实例320 滚动文字 512 实例321 制作渐变背景 513 13.2 表格样式 514 实例322 只有外边框的表格 515 实例323 彩色外边框的表格 516 实例324 控制表格指定外边框不显示 518 实例325 背景颜色渐变的表格 520 实例326 表格隔行变色 521 13.3 鼠标及滚动条样式 522 实例327 显示自定义鼠标形状 522 实例328 动画光标 524 实例329 制作彩色滚动条 525 13.4 文字及列表样式 527 实例330 应用删除线样式标记商品特价 527 实例331 在文字上方标注说明标记 528 实例332 指定图标的列表项 529 13.5 文字滤镜特效 530 实例333 文字的发光效果 531 实例334 文字的阴影效果 532 实例335 文字的渐变阴影效果 533 实例336 文字的图案填充效果 534 实例337 文字的探照灯效果 535 实例338 文字的闪烁效果 537 实例339 文字的空心效果 538 实例340 文字的浮雕效果 539 实例341 文字的阳文效果 540 实例342 文字的雪雕效果 541 实例343 火焰字 542 实例344 文字扭曲动画 544 13.6 图片滤镜特效 545 实例345 图片的半透明效果 545 实例346 图片的模糊效果 546 实例347 图片的水波纹特效 547 实例348 图片的灰度效果 548 实例349 图片的动态说明文字 549 第14章 JavaScript与XML 553 14.1 读取XML文件 554 实例350 使用XML DOM对象读取XML文件 554 实例351 使用XMLHttpRequest对象读取XML文件 557 14.2 显示XML文档 559 实例352 使用CSS显示XML文档 559 实例353 使用XSL显示XML文档 562 实例354 使用IE XML数据岛输出XML文档 564 14.3 操作XML 565 实例355 用JavaScript控制XML文档的分页显示 565 实例356 通过操作XML数据岛实现添加、删除留言信息 567 第15章 JavaScript与ASP结合 573 15.1 弹出窗口/对话框控制 574 实例357 关闭弹出窗口时刷新父窗口 574 实例358 打开新窗口显示详细信息 575 实例359 弹出网页模式对话框 577 实例360 日期选择器 580 实例361 弹出提示对话框并重定向网页 584 实例362 打开指定大小的新窗口并居中显示 586 15.2 弹出确认对话框 588 实例363 删除数据前弹出确认对话框 588 实例364 安全退出前弹出确认对话框 590 15.3 其他 591 实例365 远程获取其他网页情报 591 实例366 树状导航菜单 594 实例367 使用XML实现不刷新页面查询数据 596 第16章 JavaScript与JSP结合 601 16.1 窗口与对话框 602 实例368 弹出提示对话框并重定向网页 602 实例369 打开新窗口显示详细信息 604 实例370 打开指定大小的新窗口并居中显示 605 实例371 弹出网页模式对话框 607 实例372 关闭弹出窗口时刷新父窗口 609 16.2 无刷新技术 611 实例373 无刷新的用户名检测 611 实例374 无刷新的级联下拉列表 614 实例375 使用XML实现不刷新页面查询数据 616 16.3 调用与控制 619 实例376 将查询结果导出到Word 619 实例377 调用Excel 621 实例378 调用PowerPoint 622 16.4 其他 623 实例379 树状导航菜单 623 第17章 JavaScript与ASP.NET结合 627 17.1 窗口与对话框 628 实例380 使用JavaScript脚本弹出对话框 628 实例381 打开新窗口显示详细信息 629 实例382 关闭弹出窗口刷新父窗口 631 实例383 弹出网页模式对话框 633 实例384 弹出全屏显示网页 635 17.2 其他 637 实例385 自动隐藏式菜单 637 第18章 JavaScript与PHP结合 641 18.1 窗口与对话框 642 实例386 弹出提示对话框并重定向网页 642 实例387 关闭弹出窗口时自动刷新父窗口 643 实例388 在弹出的网页模式对话框中选择个性头像 645 实例389 时间选择器 647 实例390 弹出提示对话框并重定向网页 649 实例391 删除数据前弹出确认对话框 650 18.2 其他 651 实例392 树状导航菜单 651 第19章 综合应用 657 19.1 计算器 658 实例393 简单计算器 658 实例394 复杂计算器 662 19.2 日历 667 实例395 精美日历 668 实例396 带农历的日历 674 19.3 购物车 681 实例397 添加至购物车 682 实例398 查看购物车 684 实例399 修改商品购买数量 686 实例400 从购物车中移去指定商品 687 实例401 清空购物车 689 JavaScript程序开发范例宝典附录 691
第一章 绪论 1.1. 选题背景 这几年,许多新名词涌入我们的视野:博客、圈子、播客、WAP等。这些都预示着我们进入了一个新的互联网阶段web 2.0,它是相对web 1.0的新的一类互联网应用的总称,是一次从核心内容到外部应用的革命[10]。这个阶段发展迅速,互联网应用趋于多样化,其中变化最大的是由web 1.0网站创造内容的时代变为由用户创造内容的web 2.0时代。 在web 2.0应用中,博客(Blog)是web 2.0核心应用中最典型、最流行的代表之一,也是web 2.0技术应用的最直观的表现,是web 2.0精神和理念的具体体现。 1.2. 问题的提出 Blog记载了日常发生的事情和自己的兴趣爱好,把自己的思想和知识和他人分享、交流,同时又通过“六度空间”结识了更多志趣相投的朋友;而越来越多专业知识的 Blog 的出现,让我们看到了 Blog 更多所蕴涵的巨大的信息价值:不同的 Blog 选择不同的内容,收集和整理成为很多人关注的专业 Blog ——目前越来越多的人获取信息的来源是一些固定的 Blog 。随着博客人数的增加, Blog 作为一种新的生活方式、新的工作方式、新的学习方式已经被越来越多的人所接受,并且在改变传统的网络和社会结构:网络信息不再是虚假不可验证的,交流和沟通更有明确的选择和方向性,单一的思想和群体的智慧结合变的更加有效,个人出版变成人人都可以实现的梦想—— Blog 正在影响和改变着我们的生活。 1.3. 系统的开发目标 管理员通过前台页面进入后台管理模块后,可对注册的博客用户进行维护,包括对注册用户的添加、查找、修改和删除。 管理员进入登录后,可对帐户进行管理,包括添加管理员帐户、修改管理员帐户、删除管理员帐户和对帐户进行权限设置。 博客用户通过前台登录后,可对自己的博客空间进行管理,包括发布自己的网络日志、收藏个人图片、和相关人员进行交流和沟通以及删除访问者发表的评论等。 因此,在具体设计实现该博客网站时,主要考虑了主流博客网站的几个主要功能:(1)博客的注册、登录验证功能(2) 网络用户通过关键字搜索博文功能(3) 最热门博客页面推荐浏览(4) 文章详细内容及相关评论显示(5) 博客页面访问量统计(6) 博客个人文章管理维护功能(7) 博客个人文章分类管理维护功能(8) 博客个人友情链接维护功能(9) 博客个人基本信息管理维护功能(10) 博客图片上传及个人相册管理(11) 网络用户写留言,博主查看留言。 第二章 系统设计 2.1. 系统分析 在整个blog进行开发之前,要确定出整个项目的整体架构,包括系统的选型、运行环境的确定及系统结构设计。下面对这进行详细介绍。 在进行软件系统开发的最初环节,一般都需要进行系统的选型,即根据系统功能的实际需求,选择合适的开发工具及软件架构。 blog对系统的可靠性、稳定性有比较高的要求。本系统设计时,比较主流的B/S设计有基于JSP、ASP、PHP、CGI及J2EE等模式。相比较而言PHP的功能相对简单,不适合做大程序;而CGI效率相对较低,所以也不考虑。由于J2EE的开源的框架中提供了MVC模式实现框架Struts、对象关系模型中的Hibernate 的框架及拥有事务管理和依赖注入的Spring。利用现存框架可以更快开发系统。所以选择Java技术作为blog 的开发工具。 为了增加系统的吞吐量,提高并发处理客户请求数量,系统采用了IBM服务器作为主机。在数据库处理方面,不需要在数据层借助存储过程及数据库服务器端函数封装过多的业务逻辑,因此数据库系统采用相对精巧的MySQL[6]。 该在线博客系统服务器端如果需要布置到其他主机上,则该主机必备条件如下: 1. 服务器端操作系统:独立于操作系统的跨平台系统,客户端MicroSoft Windows 2000及以上; 2. 数据库:MySQL 5.0.27版本; 3. Web服务器:Tomcat 5.5及以上版本,配合MVC设计模式及 Hibernate开发架构; 4. 客户端运行环境:能运行IE 5以上或Netscape 5以上浏览器的操作系统,配合使用Ajax技术; 5. 客户端运行工具:目前的系统采用浏览器作为客户端,为了支持Ajax开发框架,应该选择使用IE 5以上版本浏览器。 本网站以xp为Web平台,JSP+Ajax+Servlet+JavaBean+Hibernate为网站实现技术,建立基于MySQL数据库系统的核心动态网页,实现博客网站前台及博客个人维护管理等功能模块。 1、 系统处理的准确性和及时性:系统处理的准确性和及时性是系统的必要性能。在系统设计和开发过程中,要充分考虑系统当前和将来可能承受的工作量,使系统的处理能力和响应时间能够满足信息处理的需求。 2、 系统的开放性和系统的可扩充性:系统在开发过程中,应该充分考虑以后的可扩充性。例如数据表中用户选择字段方式的改变,用户查询的需求也会不断的更新和完善。所有这些,都要求系统提供足够的手段进行功能的调整和扩充。而要实现这一点,应通过系统的开放性来完成,既系统应是一个开放系统,只要符合一定的规范,可以简单的加入和减少系统的模块,配置系统的硬件。通过软件的修补、替换完成系统的升级和更新换代。 3、 系统的易用性和易维护性:要实现这一点,就要求系统应该尽量使用用户熟悉的术语和中文信息的界面;针对用户可能出现的使用问题,要提供足够的在线帮助,缩短用户对系统熟悉的过程。 4、 系统的数据要求:1、数据录入和处理的准确性和实时性。2、数据的一致性与完整性。3、数据的共享与独立性。 2.2. 系统的可行性分析 2.2.1. 技术可行性 技术上的可行性分析要考虑将来要采用的硬件和软件技术能否满足用户(这里是服务器,网速)提出的要求(如计算机的容量、速度等)。此外,还要考虑开发人员的水平,学习了两年的jsp开发,对于这个系统的编写,我想完整的之需要两个月就可以写出程序,再花上几天的调试,计划两个月左右就可以完成投入使用了。 我们掌握了数据库及其应用技术、数据库原理、计算机网络技术等课程,对数据库的设计、应用、维护及局域网的组成有了深刻的认识与一定的动手实践能力,考取了信息处理、程序设计、数据库技术等国家IT认证。从一定程度上具备了开发一个小型系统的能力。再有就! 2.2.2. 经济可行性 主要从对项目的经济上进行分析评价,一方面是支出的费用,包括设备购置费、管理和维护费用、人员工资和培训费等,另一个是取得的收益。这是个小型的系统,从投入的人力,财力与物力来讲是非常小的,发布出去之需要注册域名就可以了,从节省人力方面,可以让管理人员从繁与复杂的工作中解脱出来,做更多的工作。 2.2.3. 管理可行性 有IP地址、用户名与密码等,可以下载一个FTP上传工具(cure)上传更新后的内容.可以在http://www.skycn.com/soft/683.html下载到. 下载以后,通过"站点管理"-->"新建站点".输入IP,用户名,密码.然后连接即可. 当然也可用FTP工具.直接在IE浏览器地址栏输入ftp://www.域名/然后输入用户名和密码.同样可以上传.随时更新文件! 第三章 开发环境的说明与安装 3.1. 开发语言的选择 3.1.1. JAVA简介 Java是Sun公司推出的新的一代面向对象程序设计语言,特别适合于Internet应用程序开发。Java的产生与流行是当今Internet发展的客观要求,Java是一门各方面性能都很好的编程语言,它的基本特点是简单、面向对象、分布式、解释的、健壮的、安全的、结构中立的、可移植的、性能很优异的、多线程的、动态的,特别适合在Internet环境上开发的应用系统。 3.1.2. Web应用程序开发环境—JSP技术 JSP的全称是Java Server Pages,它是SUN推出的一种动态网页技术标准。它在传统的静态页面文件(*.html,*.htm)中加入JAVA程序片段和JSP标记,就构成了JSP页面。JSP具有以下的优点: 1、将业务层与表示层分离:使用JSP技术,网络开发人员可充分使用HTML来设计页面显示部分(如字体颜色等),并使用JSP指令或者JAVA程序片段来生成网页上的动态内容; 2、能够跨平台:JSP支持绝大部分平台,包括现在非常流行的LINUX系统,应用非常广泛的Apache服务器也提供了支持JSP的服务; 3、组件的开发和使用很方便:如ASP的组件是由C++,VB等语言开发的,并需要注册才能使用;而JSP的组件是用Java开发的,可以直接使用; 4、一次编写,处处运行:作为JAVA开发平台的一部分,JSP具有JAVA的所有优点,包括Write once , Run everywhere. 3.2. 数据库的选择 3.2.1. Web应用程序开发环境—SQLserver数据库 SQL Server是由Microsoft开发和推广的关系数据库管理系统(DBMS),它最初是由Microsoft、Sybase和Ashton-Tate三家公司共同开发的。SQL Server 2000是Microsoft公司于2000年推出的最新版本。 SQL Server 特点:   1.真正的客户机/服务器体系结构。   2.图形化用户界面,使系统管理和数据库管理更加直观、简单。   3.丰富的编程接口工具,为用户进行程序设计提供了更大的选择余地。   4.SQL Server与Windows NT完全集成,利用了NT的许多功能,如发送和接受消息,管理登录安全性等。SQL Server也可以很好地与Microsoft BackOffice产品集成。   5.具有很好的伸缩性,可跨越从运行Windows 95/98的膝上型电脑到运行Windows 2000的大型多处理器等多种平台使用。   6.对Web技术的支持,使用户能够很容易地将数据库中的数据发布到Web页面上。   7.SQL Server提供数据仓库功能,这个功能只在Oracle和其他更昂贵的DBMS中才有。   SQL Server 2000与以前版本相比较,又具有以下新特性 :   1.支持XML(Extensive Markup Language,扩展标记语言)   2.强大的基于Web的分析   3.支持OLE DB和多种查询   4.支持分布式的分区视图   安装、运行SQL Server 2000的硬件需求   (1)计算机   Inter及其兼容计算机,Pentium 166Mz或者更高处理器或DEC Alpha和其兼容系统。   (2)内存(RAM)   企业版最少64MB内存,其他版本最少需要32MB内存,建议使用更多的内存。   (3)硬盘空间   完全安装(Full)需要180MB的空间,典型安装(Typical)需要170MB的空间,最小安装(Minimum)需要65MB的空间。 3.3. 开发工具的选择 MyEclipse,Deamweare,选择SQLserver作为后台的数据库,选择JAVA、JSP、JavaScript、Html作为应用程序开发工具,运用Tomcat服务器技术,整个系统完全基于B/S (Browser/Server)模式进行设计。 1、Tomcat应用服务器 目前支持JSP的应用服务器是较多的,Tomcat是其中较为流行的一个Web服务器,被JavaWorld杂志的编辑选为2001年度最具创新的Java产品,可见其在业界的地位。 Tomcat是一个免费的开源的Serlvet容器,在Tomcat中,应用程序的部署很简单,你只需将你的WAR放到Tomcat的webapp目录下,Tomcat会自动检测到这个文件,并将其解压。你在浏览器中访问这个应用的Jsp时,通常第一次会很慢,因为Tomcat要将Jsp转化为Servlet文件,然后编译。编译以后,访问将会很快。 Tomcat也具有传统的Web服务器的功能:处理Html页面。但是与Apache相比,它的处理静态Html的能力就不如Apache。我们可以将Tomcat和Apache集成到一块,让Apache处理静态Html,而Tomcat处理Jsp和Servlet。Tomcat是一个很好的工具,不仅仅因为其免费,功能强大,更因为其开放性,越来越受到人们的重视。 2、 B/S 开发模式 伴随着Internet的迅速发展,计算机技术正在由基于C/S(client/ Server)模式的应用系统转变为基于B/S模式的应用系统。 过去,网络软件的开发都采用C/S(client)模式,在这种模式下,主要的业务逻辑都集中于客户端程序,因此,必然导致以下问题: 系统安装、调试、维护和升级困难。由于客户端的硬件配置可能存在差异,软件环能各不相同,因此,在安装时,必须对每一个客户端分别进行配置,同样,在软件升级时也要对客户端分别处理。 B/S模式带来了巨大的好处: 开发成本及维护成本降低。由于B/S架构管理软件只安装在服务器端(Server)上,即应用程序在部署、升级、维护时,只需要在服务器端进行配置就可以了,网络管理人员只需要管理服务器就行了,用户界面主要事务逻辑在服务器(Server)端完全通过WWW浏览器实现,极少部分事务逻辑在前端(Browser)实现,所有的客户端只有浏览器,网络管理人员只需要做硬件维护。 良好的安全性能,防火墙技术可以保证后台数据库的安全性。所有的配置工作都集中在服务器端且所有客户端请求都是通过DBMS来访问数据库,从而大大减少了数据直接暴露的风险。 第四章 系统设计 4.1开发框架技术介绍 对于框架技术,我们采用Struts+ajax的整合! Struts是应用比较广泛的一种表现层框架 1、 Struts是一个为开发基于模型(Model)-视图(View)-控制器(Controller)(MVC)模式的应用架构的开源框架,是利用Servlet,JSP和custom tag library构建Web应用的一项非常有用的技术。由于Struts能充分满足应用开发的需求,简单易用,敏捷迅速。它使用服务层框架可以将JavaBeans从Jsp/Servlet中分离出来,而使用表现层框架则可以将Jsp中剩余的JavaBeans完全分离,这部分JavaBeans主要负责显示相关信息,一般是通过标签库(Taglib)实现,不同框架有不同自己的标签库,Struts是应用比较广泛的一种表现层框架。 2、 Ajax我们主要应用就是xmlhttprequest,回调函数实现局部刷新达道数据更新! 4.2需求分析 Blog网站主要是实现注册用户登录、管理相关信息、博文及相关评论、查看留言、友情链接、及图片的上传和图像的播放而为上网用户提供按博文主题搜索,查看注册用户的博文及提出相关评论,并为注册用户写留言,游览注册用户的相册、注册等功能的系统。下面就以两种不同的用户来分析博客网站的需求。 4.2.1注册博友 首先必须在博客首页中登录填写用户名和密码,这样才能执行一些相关操作,不然就是普通用户只能查看一些信息,而不能发表博文。可以在管理页面上添加博文的分类,可以上传图片和游览自己的相册,在上传过程中可以将一张图片定义为自己的签名,在个人管理页面中注册用户还可以修改自己的个人信息。博文管理,友情链接管理及博文分类管理,用例图2。 图2 博客管理页面的用例图 在博客主界面中发表博文时可以选择博文类型,这样可以更好管理自己的博文。并查看和删除网友对自己的博文的一些评论、查看和删除网友留下的一些留言,提供与其他网友交流的空间。更好交流,在信息时代人们通过个人空间沟通也用来但不能在自己的博客主页面中提交评论和留言。。这样在本系统中就可以为博友提供更多的个人色彩。在管理页面中添加和删除友情连接。这样博友可以在自己空间中快速定位自己的关心的网站。这样还可以让网友看到自己的一些信息。友情链接及网页访问量统计显示:在博客的个人页面中还提供了推荐给普通网络用户的相关友情链接,此外,对个人页面的访问量也在随时进行统计,并在个人页面中进行直观的显示。 博客主页面的用例图如图3所示: 图3 博客主页面的用例图 4.2.2 普通用户 在博客注册页面注册成为博客的注册用户,才可以拥有自己独立的空间,进入某一博客页面查看相关文章信息时,可以随时对自己所感兴趣的文章发表评论,同时也可以查看到其他人针对该博文的评论。普通用户在阅读博文时可以在最后留下自己的一些评论。他也可以留下更多的信息。这样他可以写留言。这样他留下的信息就更快地被博友所看到。普通用户进入博友的用例图如图4所示: 图4上网博友在博客主页面的用例图 普通网友可以搜索自己关心的一些数据。并且在搜索结果中提供在结果范围内再次搜索。这样就可以将范围缩小。首页向注册用户提供登陆模块,注册用户在博客网站首页跟上网网友一样可以查看博客和博文推荐。上网网友可以注册成为博客用户,拥有自己独立的空间。这一模块的用例图如图5所示: 图5 博客首页的用例图 4.3 功能模块介绍 4.3.1 博客注册登录管理模块 博客注册登录管理模块用于建立博客网站固定的客户群体,通过记录对应的博客档案,实现对博客信息的后台维护及管理,同时也便于通过博客档案库将网站最新动态及相关企业的信息方便地传达给每一位潜在的客户。 该功能模块实现了以下几个子功能。 (1)新博客在线注册。 (2)博客登录管理。 (3)跳转到博客主页。 只有进行登录并通过身份验证的用户,才可以在个人博客页面发表日志,并借助个人设置实现对个人博客相关信息的管理维护。对于没有经过身份验证的网络用户不允许在博客页面中发表日志,更不允许对博客页面信息进行管理维护。 该模块实现新博客的注册及登录验证功能。其中,注册新博客时会对用户输入的注册信息进行有效性验证,包括基本数据格式的有效性以及逻辑有效性,例如,用户名被占用时将及时给出提示。注册成功的博客登录时,会随时根据博客输入的登录信息进行提示,如用户名错误或者密码错误。 4.3.2 博客及文章检索查询模块 博客及文章检索查询模块为网络用户提供便捷的搜索,以及日志阅读浏览等功能,同时对日志的评论信息、博客推荐也能够及时反馈给网络用户。 该功能模块实现了以下几个子功能。 (1)热门博客页面推荐。 (2)最新博客日志推荐。 (3)日志信息关键字搜索。 该模块能够在网页中随时提供在线的最新日志信息。该信息需要定期更新,网络用户可以随时获得最新日志以及最热门的博客推荐。在客户选择了某个博客或者某个感兴趣的日志后,可以方便地跳转到对应博客页面进行日志的阅读,并和博客进行交流互动。 为了使网络用户尽快定位到所需的博客资料及日志信息,本模块提供了搜索功能,用户可以对所关注的日志信息按照标题进行关键字搜索,以避免用户浏览多个页面来寻找所需的日志信息。 4.3.3博客页面显示模块 当网络用户进入某个人博客主页后,在该页面中将提供博客日志列表的显示,同时为了方便用户浏览,在该模块中提供根据分类名进行日志列表的显示,也提供日志评论的浏览,此外还允许用户在博客页面中发表评论及留言。 该功能模块实现了如下几个子功能。 (1)用户可以分页查看对应的日志内容及评论信息。 (2)用户可以针对日志内容发表评论。 (3)用户可以针对博客进行留言。 (4)用户可以分类查看日志内容。 在该模块中还提供了博客页面统计信息,日志、评论及留言信息分页显示等方便用户的显示效果。 4.3.4 博客个人维护管理模块 博客个人维护管理模块用于实现用户对博客个人主页及相关信息的动态管理。 该功能模块实现了如下几个子功能: (1)日志及日志分类管理。 (2)评论及留言管理。 (3)个人基本信息维护管理。 借助该模块,用户可以随时对个人博客主页中的内容进行增加或修改,包括日志分类信息的更新、评论及留言管理等功能,也允许用户对博客的个人信息进行维护及其管理。 4.4 系统分析 本系统采用严格的J2 EE 应用结构,主要有如下几个分层。 1. 表现层:由JSP 页面组成。 2. MVC 层:使用Struts框架。 3. 业务逻辑层:主要由Spring loC 容器管理的业务逻辑组件组成。 4. DAO 层:由7 个DAO 组件组成,实现类必须继承Spring提供的HibernateDaoSupport。 5. Hibernate 持久层:由7 个PO 组成,并在Hibernate Session 管理下,完成数据库访问。 6. 数据库服务层:使用MySQL 数据库存储持久化数据。 系统的具体分层如图5 所示。 图6 系统结构图 在图6 黑色大方框内的MVC 控制层、Service 层及DAO 组件层的组件,都由Spring IOC 容器负责生成,并管理组件的实例(实例必须是单身模式的,本系统中的bean基本上是单身的)。 4.3.1系统架构说明 本系统不仅严格按MVC 模式设计,还按J2 EE 分层设计,将中间层严格分成业务逻辑层、DAO 层及数据持久层等。MVC 层的控制器绝对禁止持久层访问,甚至不参与业务逻辑的实现。表现层采用传统JSP 技术。 本系统采用的是典型的J2EE 三层结构,分为表现层、中间层(业务逻辑层)和数据服务层。三层体系将业务规则、数据访问及合法性校验等工作放在中间层处理。客户端不直接与数据库交互,而是通过组件与中间层建立连接,再由中间层与数据库交互。Jsp广泛的应用和稳定的表现,为其作为表现层技术打下了坚实的基础。中间层采用的是流行的Spring+Hibernate ,为了将控制层与业务逻辑层分离,又细分为以下几种。 Web 层,就是MVC 模式里面的C,负责逻辑层和表现层的交互。调用业务逻辑层,并将业务数据返回给表现层作组织表现,该系统的MVC采用Struts框架。 Service 层(就是业务逻辑层),负责实现业务逻辑。业务逻辑层以DAO 层为基础,通过对DAO 组件的正面模式包装,完成系统所要求的业务逻辑。 DAO 层,负责与持久化对象交互。该层封装了数据的增、删、查、改的操作。 PO ,持久化对象。通过实体关系映射工具将关系型数据库的数据映射成对象,很方便地实现以面向对象方式操作数据库,该系统采用Hibernate 作为ORM 框架。Spring 的作用贯穿了整个中间层,将Web 层、Service 层、DAO 层及PO 无缝整合,其数据服务层用来存放数据。 通过使用Hibernate 持久层,可以避免使用传统的JDBC 操作数据库,对JDBC近一步包装,从而更好地使用面向对象的方式来操作数据库。保证了整个软件开发过程以面向对象的方式进行,即面向对象分析、设计及编程,透过Hibernte 对PO对象持久化操作,不管插入还是查询都是通过PO。 4.3.2实现DAO 层 DAO 还有助于提升系统的可移植性。独立的DAO 层使得系统能在不同的数据库之间轻易切换,底层的数据库实现对于业务逻辑组件是透明的。数据库移植时仅仅影响DAO 层,不同数据库的切换不会影响业务逻辑组件,因此提高了系统的可复用性。 对于不同的持久层技术, Spring 的DAO 提供一个DAO 模板,将通用的操作放在模板里完成,而对于特定的操作,则通过回调接口完成。Spring 为Hibernate 提供的DAO 支持类是: HibernateDaoSupport。 4.3.3 DAO组件的定义 DAO 组件提供了各持久化对象的基本的CRUD 操作。而在DAO 接口里则对DAO组件包含的各种CRUD 方法提供了声明,但有一些IDE 工具也可以生成基本的CRUD方法。使用DAO 接口的原因是:避免业务逻辑组件与特定的DAO组件藕合。由于DAO 组件中的方法不是开始就设计出来的,其中的很多方法可能会随着业务逻辑的需求而增加,但以下几个方法是通用 的。 • get: 根据主键加载持久化实例。 • saveor update: 保存或更新持久化实例。 • remove: 删除持久化实例。 上面涉及了7个PO,这样我们必须设计7个对应的PODao 7个Dao必须继承BaseDao 这个BaseDao 有对接口的一些基本的CURD操作。7个Dao 如下。LinksDao ,BlogDao、FeedBackDao、ArticleDao、MessageDao、SortDao、PictureDao。这7个Dao 分别封装对自己的持久化对象的一些操作。 4.3.4 部署DAO 层 HibernateDaoSupport类只需要一个SessionFactory 属性,即可完成数据库访问。SessionFactroy创建Session,而数据库的CRUD操作都是有Session 完成,并将查询结果保存在一级缓存中,每次用户提交一次会话,可能需要Session完成一些数据库的操作而实际的数据库访问由模板类HibernateTemplate完成,该模板类提供了大量便捷的方法,简化了数据库的访问。 第五章 数据库设计 5.1定义(数据词典) 1、数据库表名的定义使用:重点字_table;重点字可以是多个英文单词的组合,从组合的第二单词起首字母大写,字段命名是能表达字段内容的英文单词的组合,组合方式同表名重点字相同。 2、NN 表示not null 不填表可为空。 3、数据类型不使用固定数据库的类型,标识大众类型,如字符串、字符、数字等。这样在更改数据库时需求的数据是可移植的 4、输写数据表在数据库中的物理名称,可用自己熟悉的语言再定义表名称,方便沟通。 5、长度定义又数据类型决定:如字符串可选8000以下,数字可在50位之间,字符只允许一位。 6、输入方式表示数据的来源:生成表由程序或数据库的索引自动生成,而不需人工录入;输入表示通过文本框等输入的数据;选择表单选框、复选框、下拉列表等通过选择输入的数据;自定获取是为外码的输入设定的,它由程序自动获取。 5.2主要表结构如下 1. 表[blogs]日志数据表 字段名 类型 说明 blogid Int(10) 日志的ID title text 日志标题 pubtime Int(11) 日志发表时间 authorid Int(8) 日志作者的UID replies Int(8) 日志的评论数 tbs Int(8) 日志的trackback数 views Int(8) 日志的查看次数 category Int(3) 日志所属的分类的ID content mediumtext 日志正文内容 property Int(1) 日志的属性 0 公开日志 1 锁定日志 2 隐藏日志 3 一般草稿 2.表[user]博友登陆信息表 字段名 类型 说明 userid Int(10) 博友ID nicheng Text 博友在博客里的称呼 username text 登陆时的用户名 password text 登陆密码 3.表[register]用户数据表 字段名 类型 说明 userid Int(8) 登陆时需要用到的用户名 username text 用户昵称 userpwd Int(8) 登陆密码 regtime Int(11) 注册时间 usergroup Int(2) 所属的用户组ID email text 用户email qq text Qq号 msn text 用户msn gender text 用户性别 第六章 主要功能的实现 6.1 登录控制: if(this.session().getAttribute("rand")!=null){//检验随机数是否为空 if(this.checkCode.equals(this.session().getAttribute("rand").toString())){//比较随机数 uservo=userbo.queryUserByINfo(uservo);//检验用户信息并将信息返回 if(uservo!=null){//看用户是否存在 this.setUserpurview(uservo.getPurviewId());//设置用户权限 this.session().setAttribute("user", uservo);//将用户信息放在session中 return SUCCESS;//返回用户主界面页面 }else{ return ERROR;返回到失败页面} }else{return ERROR; }}else{ return ERROR; } 6.2 Ajax 读取txt格式数据 function ajax_function(var1,var2){ var xmlHttp = null; //创建xmlhttprequest try { // Firefox, Opera 8.0+, Safari 对不同浏览器常见不同对象 xmlHttp=new XMLHttpRequest(); } catch (e) { try { // Internet Explorer xmlHttp=new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xmlHttp=new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { alert('Your browser does not support AJAX!'); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { var someDiv = document.getElementById('someDiv'); someDiv.innerHTML=xmlHttp.responseText; } } xmlHttp.open('GET','www/index.jsp?param1='+var1+'¶m2='+var2,true); xmlHttp.send(null); } 6.3 系统架构与数据库的连接 由于我们开发时是利用MVC的设计模式,所以在此我们的数据库连接是封存在M中的,即只要我们和M层连接上,就已经连接上数据库了。 Hibernate使用数据库和配置信息来为应用程序提供持久化服务(以及持久的对象)。我们只需在hibernate.cfg.xml中配置以下语句即可: sa jdbc:microsoft:sqlserver://localhost:1035;DatabaseName=webexamine org.hibernate.dialect.SQLServerDialect sqlserver2000 aaaaaaaa com.microsoft.jdbc.sqlserver.SQLServerDriver org.hibernate.dialect.HSQLDialect true 其实我们在这里配置了一个数据连接,以保证系统的正常运行,我们需要使用proxool连接池,我们经测试,分别用proxool、tomcat JNDI、Hibernate自带的连接池进行配置之后分别执行以上的10000条数据插入和读取,结果显示proxool的性能要优于tomcat JNDI,而Hibernate自带的就更不用提了,差很远。依次为:39265毫秒/10000条、26013毫秒/10000条、50029毫秒/10000条。 6.4数据的备份与还原 我们根据Mysql数据库提供的backup(备份)命令及restore(恢复)命令,进行数据库的备份与还原,在连接数据库后,我们在需要备份和还原的地方加入以下语句: backup database to disk='备份文件名' restore database from disk='备份文件名' 然后发送给数据库的管理对象进行数据还原与备份。 在知道了数据库备份与还原的接口后,用JAVA进行具体的连接,这里采用JAVA直连的方 法,部分代码如下: try{ String user="sa";//连接sqlserver2000数据库登陆名 String password="aaaaaaaa";//连接sqlserver2000数据库密码 String sDBDriver="com.microsoft.jdbc.sqlserver.SQLServerDriver";//连接数据库的驱动字符串 String connStr="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=webexamine";//注册连接字符串 Connection con=null; Class.forName( sDBDriver);//注册数据库驱动 con = Driver Manager.getConnection(connStr ,user,password);//获取数据库连接 String sql="backup database xncsims to disk='d:\\xncback.dat'";//备份数据库,还原数据库和着类似,只是将这句变为还原的语句 st=con.createStatement();//创建发送对象 rs=st.executeQuery(sql);//这里就是把你的SQL语句发到数据库执行 }catch(SQLException e){ System.out.println(e.toString());} catch(Exception e){ System.out.println(e.toString());} 6.4部分效果预览图 主页 留言界面

87,904

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧