BS架构的软件系统Web界面设计和开发实现规范
BS界面规范V1.1
UI界面规范摘要：本文主要描述B/S应用程序开发中前台界面的规范，从显示设计和交互设计等方面阐述如何设计开发对用户友好的界面。
1引言界面美观、操作易用性、维护成本低是评价B/S系统的关键。
本规范参考了一些成熟产品科学的开发方法，将开发过程中的方式、规则等强行的约束。
希望藉此来提高用户操作感受，提升B/S产品的质量。
1.1编写目的1.2背景1.3定义2界面设计规范细则总体目标以规范作为基本原则，在此框架内进行合理的扩展和变化，将站点内的每个模块服从于整个站点，模块页面与“高内聚”的控制代码紧密的结合在一起，同时对应于应用程序基于系统的架构分析。
2.1通用规则2.1.1菜单1、功能菜单A、图标：目录关闭、目录打开、叶子节点B、间距：行高25px，2个间距分别为10px、5pxC、选中：菜单选中后蓝色背景，字体白色显示D、字体：宋体、12pxF、默认：展示所有关闭状态的一级菜单G、同一级菜单项不易超过20个2、弹出窗口菜单2.1.2查询列表1、查询框A、图标：弹出窗口图标、弹出日历控件图标、折叠隐藏查询框图标B、日历控件效果高25p x间距10p x间距5p xC、隐藏查询框效果D、弹出窗口：在弹出窗口中选中需要的项目确定后，所选项目代码回落隐藏域，所选项目名称回落对应文本框。
例如：选中一个部门后部门编码回落隐藏域itemCode、部门名称回落文本框itemName。
E、下拉框：默认显示“…请选择…”，20项以内适合用下拉框，多于20项适合用弹出窗。
F、日期框：格式样子2011-07-06，截止日期不能早于开始日期，G、必填项：如果需要必填项在录入项后加星号，例如H、校验：1、必填项没有录入。
2、日期、邮件、数字等格式不正确3、截止日期早于开始日期4、长度不合法，录入内容超出规定长度点击查询后提示：1、“[字段名]不能为空！”2、“[字段名]录入格式不正确！”3、“[字段名] 截止日期不能早于开始日期！”4、“[字段名]长度超长！”提示点击确定后光标回落提示字段录入框。
bs架构的原理
bs架构的原理
BS架构，即Browser/Server架构，是一种基于Web的软件系统，由浏览器端和服务器端两部分组成。
浏览器端负责显示页面和提供用户交互界面，而服务器端则负责处理用户请求、数据库操作等核心功能。
BS架构的原理主要有以下几点：
1.客户端-服务器模式：BS架构采用客户端-服务器模式，客户端负责向服务器端发送请求，服务器端负责处理请求并返回相应的结果。
基于此模式，BS架构可以支持多种类型的客户端，如Web浏览器、手机应用、桌面客户端等。
2.分离展示逻辑和业务逻辑：BS架构将展示逻辑和业务逻辑分离处理，浏览器端只需要负责显示页面和处理用户交互事件，而服务器端则负责处理业务逻辑、数据库操作等核心功能。
这种分离可以使得系统的逻辑更加清晰、易于维护和升级。
3.服务端集中处理：服务器端集中处理数据存储、逻辑控制和用户认证等任务，可以实现数据的集中管理和安全控制。
此外，对于大规模系统而言，服务器端也可以实现高并发请求的处理，从而提高系统的性能和稳定性。
4.应用程序跨平台：由于BS架构基于Web技术，使得系统可以实现应用程序跨平台。
用户只需要通过浏览器访问系统即可，无需关心系统运行的操作系统和硬件环境。
总体来说，BS架构的原理是将系统的展示逻辑和业务逻辑分离处理，客户端向服务端发送请求，服务端集中处理数据存储、逻辑控制和用户认证等任务，应用程序基于Web技术实现跨平台。
基于BS架构的管理系统软件开发
犇犲狊犻犵狀狅犳犘狅犾犻犮犲犕狅狋狅狉犮狔犮犾犲犕犪狀犪犵犲犿犲狀狋犛狔狊狋犲犿 犅犪狊犲犱狅狀犅／犛犃狉犮犺犻狋犲犮狋狌狉犲
ＷｕＸｉａｏｓｈａｎ，ＣａｏＸｕｄｏｎｇ，ＷａｎｇＳｅｎ，ＷｅｉＷｅｎｌｏｎｇ
（ＣｈｉｎａＵｎｉｖｅｒｓｉｔｙｏｆＰａｔｒｏｌｅｕｍ，Ｂｅｉｊｉｎｇ １０２２４９，Ｃｈｉｎａ） 犃犫狊狋狉犪犮狋：Ｉｎｏｒｄｅｒｔｏｏｐｔｉｍｉｚｅｔｈｅｍａｎａｇｅｍｅｎｔｏｆｔｈｅｐｏｌｉｃｅｍｏｔｏｒｃｙｃｌｅｆｏｒｔｈｅｕｎｉｔ，ｍａｋｅｉｔｍｏｒｅｃｏｎｖｅｎｉｅｎｔａｎｄｒａｔｉｏｎａｌｆｏｒｖｅ ｈｉｃｌｅｄｅｐｌｏｙｍｅｎｔ，ｕｓｉｎｇｔｈｅｌａｒｇｅｉｎｆｏｒｍａｔｉｏｎｓｔｏｒａｇｅｓｐａｃｅａｎｄｔｈｅｐｒｏｃｅｓｓｉｎｇａｂｉｌｉｔｙｏｆｈｉｇｈｐｅｒｆｏｒｍａｎｃｅｏｆｃｏｍｐｕｔｅｒ，ｍａｋｉｎｇａｄｅ ｔａｉｌｅｄｃｌａｓｓｉｆｉｃａｔｉｏｎａｎｄｒｅｃｏｒｄａｃｃｏｒｄｉｎｇｔｏｔｈｅｖｅｈｉｃｌｅｂａｓｉｃｉｎｆｏｒｍａｔｉｏｎ，ｓｕｃｈａｓｔｈｅｃｏｏｒｄｉｎａｔｅｐｏｓｉｔｉｏｎｏｆｔｈｅｍｏｔｏｒｃｙｃｌｅ，ｖｅｈｉｃｌｅｕｓ ａｇｅ，ｔｈｅｆａｕｌｔｃｏｎｄｉｔｉｏｎ，ｅｔｃ，ｕｓｅｒｓｃａｎｄｉｒｅｃｔｌｙｍｏｎｉｔｏｒｔｈｅｃｈａｎｇｅｏｆｖｅｈｉｃｌｅｉｎｆｏｒｍａｔｉｏｎｉｎｔｈｅｓｙｓｔｅｍ，ａｎｄｔｉｍｅｌｙｈａｎｄｌｅｔｈｅｅｍｅｒ ｇｅｎｃｙｓｉｔｕａｔｉｏｎｅｎｃｏｕｎｔｅｒｅｄｉｎｔｈｅｖｅｈｉｃｌｅｏｐｅｒａｔｉｏｎ．Ｔｈｉｓｐａｐｅｒｐｒｅｓｅｎｔｓａｄｅｓｉｇｎｓｃｈｅｍｅｏｆｐｏｌｉｃｅ ｍｏｔｏｒｃｙｃｌｅ ｍａｎａｇｅｍｅｎｔｓｙｓｔｅｍ ｂａｓｅｄｏｎＢ／Ｓａｒｃｈｉｔｅｃｔｕｒｅ，ａｎｄｔｈｅｓｙｓｔｅｍｉｓｉｍｐｌｅｍｅｎｔｅｄｉｎａ ＷＥＢ ｗａｙ．Ｔｈｅｓｅｒｖｅｒｏｂｔａｉｎｓｔｈｅｄａｔａｃｏｌｌｅｃｔｅｄｂｙｔｈｅｍｏｔｏｒｃｙｃｌｅｔｅｒ ｍｉｎａｌｔｈｒｏｕｇｈｔｈｅＴＣＰｐｒｏｔｏｃｏｌａｎｄｓｔｏｒｅｓｔｈｅｄａｔａｔｏｔｈｅ ＭｙＳＱＬｄａｔａｂａｓｅ．Ｉｎｔｈｉｓｐａｐｅｒ，ｔｈｅｓｔｏｒａｇｅｏｆｄａｔａ，ｔｈｅｄｅｖｅｌｏｐｍｅｎｔａｎｄ ｒｅｓｅａｒｃｈｏｆＷＥＢｓｙｓｔｅｍ，ｔｈｅｓｔａｔｉｃｄａｔａａｎｄｄｙｎａｍｉｃｄａｔａｏｆｔｈｅｔｅｒｍｉｎａｌｅｑｕｉｐｍｅｎｔａｒｅａｎａｌｙｚｅｄａｎｄｐｒｅｓｅｎｔｅｄｉｎｄｅｔａｉｌ． 犓犲狔狑狅狉犱狊：Ｂ／Ｓａｒｃｈｉｔｅｃｔｕｒｅ；ＷＥＢｓｙｓｔｅｍ；ＨＴＴＰｐｒｏｔｏｃｏｌ；ＭｙＳＱＬｄａｔａｂａｓｅ
三层架构 BS架构
B/S结构简化了客户机的工作，把二层C/S结构的事务处理逻辑模块从客户机的任务中分离出来，由Web服务器单独组成一层来负担其任务，从而减轻了客户机的压力三层架构(3-tier三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为：表现层（UI）、业务逻辑层（BLL）、数据访问层（DAL）。
区分层次的目的即为了“高内聚，低耦合”的思想。
１、表现层（UI）：通俗讲就是展现给用户的界面，即用户在使用一个系统的时候他的所见所得。
２、业务逻辑层（BLL）：针对具体问题的操作，也可以说是对数据层的操作，对数据业务逻辑处理。
３、数据访问层（DAL）：该层所做事务直接操作数据库，针对数据的增添、删除、修改、更新、查找等。
在软件体系架构设计中，分层式结构是最常见，也是最重要的一种结构。
微软推荐的分层式结构一般分为三层，从下至上分别为：数据访问层、业务逻辑层（又或成为领域层）、表示层。
三层结构原理：3个层次中，系统主要功能和业务逻辑都在业务逻辑层进行处理。
所谓三层体系结构，是在客户端与数据库之间加入了一个“中间层”，也叫组件层。
这里所说的三层体系，不是指物理上的三层，不是简单地放置三台机器就是三层体系结构，也不仅仅有B/S应用才是三层体系结构，三层是指逻辑上的三层，即使这三个层放置到一台机器上。
三层体系的应用程序将业务规则、数据访问、合法性校验等工作放到了中间层进行处理。
通常情况下，客户端不直接与数据库进行交互，而是通过COM/DCOM 通讯与中间层建立连接，再经由中间层与数据库进行交互。
表示层位于最外层（最上层），离用户最近。
用于显示数据和接收用户输入的数据，为用户提供一种交互式操作的界面。
业务逻辑层业务逻辑层（Business Logic Layer）无疑是系统架构中体现核心价值的部分。
它的关注点主要集中在业务规则的制定、业务流程的实现等与业务需求有关的系统设计，也即是说它是与系统所应对的领域（Domain）逻辑有关，很多时候，也将业务逻辑层称为领域层。
BS架构的软件系统Web界面设计和开发实现规范
BS架构的软件系统Web界面设计和开发实现规范
1.1B/S架构的软件系统Web界面设计和开发实现规范
1、页面设计规则
（1）页面命名规则
1）每个页面的title必须设置为和菜单配置中相同的中文，例如在菜单项中配置为“客户管理”，则此页面的title也要设置为“客户管理”。
2）对于JSP页面都需要在页面的最开始部分增加以下语句
<%@ page contentType="text/html; charset=gb2312" %>
3）对于HTML页面都需要在页面的最开始部分增加以下语句
4）对于页面中控件的属性设置都需要用双引号包括起来。
（2）页面表单中的控件命名规则
一般采用控件类型缩写前缀（小写）+英文单词（第一个字母大写）的方法来命名每一个控件。
具体规则如下：
2、变量定义规则
页面编码过程中用到的所有变量定义都需要遵循相应规则，方便
程序的可读性。
采用数据类型缩写前缀（小写）+英文单词（第一个字母大写）的方法来命名每一个变量。
具体规则如下：
3、函数定义规则
页面编码过程中用到的所有函数定义都需要遵循相应规则，方便程序的可读性。
采用前缀（fuc）+英文单词（第一个字母大写）的方法来命名每一个函数。
例如：fucAcceptOrder 4、CSS文件中的定义规则
（1）页面的规范
（2）表格的规范
（3）层的规范
（4）链接的规范。
bs架的java开发步骤
BS架构的Java Web应用程序开发步骤如下：
1. 需求分析：根据业务需求明确应用程序要实现的功能及性能需求，并进行需求分析。
2. 系统设计：根据需求分析的结果，设计系统架构和数据库结构，确定系统各个模块的功能和实现方式，包括前端页面设计和后端代码设计。
3. 环境搭建：搭建Java Web开发环境，包括安装开发工具、配置数据库和服务器等，确保开发环境的稳定可用。
4. 编写代码：根据系统设计的结果，开始编写Java代码实现各个模块的功能。
开发过程中要注意代码结构清晰、易于维护，并且要保证代码的质量以及可重用性。
5. 测试验收：完成各个模块功能的开发后，进行单元测试、集成测试和系统测试，确保系统功能和性能满足需求，同时也要进行验收测试，确保系统经过测试后可以正常运行。
6. 系统发布：通过打包发布，把开发完成的应用程序发布到生产环境，使用户可以通过浏览器访问和使用。
7. 运维维护：在应用程序发布后，对系统进行监控和维护，确保系统稳定运行，同时也要进行安全性和性能优化等维护工作。
BS架构图 (2)
B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。
这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。
客户机上只要安装一个浏览器，如Netscape Navigator或Internet Explorer，服务器安装SQL Server、Oracle、MYSQL等数据库。
浏览器通过Web Server 同数据库进行数据交互。
B/S架构随着Internet和WWW的流行，以往的主机/终端和C/S都无法满足当前的全球网络开放、互连、信息随处可见和信息共享的新要求，于是就出现了B/S型模式，即浏览器/服务器结构。
它是C/S架构的一种改进，可以说属于三层C/S架构。
主要是利用了不断成熟的WWW浏览器技术，用通用浏览器就实现了原来需要复杂专用软件才能实现的强大功能，并节约了开发成本，是一种全新的软件系统构造技术。
第一层是浏览器，即客户端，只有简单的输入输出功能，处理极少部分的事务逻辑。
由于客户不需要安装客户端，只要有浏览器就能上网浏览，所以它面向的是大范围的用户，所以界面设计得比较简单，通用。
第二层是WEB服务器，扮演着信息传送的角色。
当用户想要访问数据库时，就会首先向WEB服务器发送请求，WEB服务器统一请求后会向数据库服务器发送访问数据库的请求，这个请求是以SQL语句实现的。
第三层是数据库服务器，他扮演着重要的角色，因为它存放着大量的数据。
当数据库服务器收到了WEB服务器的请求后，会对SQL语句进行处理，并将返回的结果发送给WEB服务器，接下来，WEB服务器将收到的数据结果转换为HTML文本形式发送给浏览器，也就是我们打开浏览器看到的界面。
试验管理系统软件的主架构-bs架构软件
数据采集系统软件及自动报告系统1软件拟采用的架构：B/S架构（Browser/Server浏览器/服务器模式），是目前被广泛采用的软件架构模式，这种模式统一了客户端，将系统功能的核心部件集中到服务器上，简化了系统的开发、维护和使用。
客户机上只要安装一个浏览器，如Netscape Navigator或Internet Explorer，服务器安装SQL Server、Oracle、MYSQL等数据库。
便可实现浏览器通过Web Server 同数据库进行数据交互。
2 B/S架构的特点和优势：得益于不断成熟的web浏览器技术，Browser/Server可以结合浏览器的多种脚本语言和ActiveX技术，用通用浏览器实现原来需要复杂专用软件才能实现的强大功能，极大地节约了开发成本。
B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，只要有一台能上网的电脑就能使用，客户端零安装、零维护。
系统的扩展非常容易。
B/S架构的程序也能在客户端电脑上进行部分处理，从而大大的减轻了服务器的负担并增加了交互性，能实现局部实时刷新。
（1）维护和升级方式简单。
B/S架构的软件只需要管理服务器就行了，所有的客户端只是浏览器，根本不需要做任何的维护。
（2）成本降低。
（3）大数据时服务器运行数据负荷较重。
（4）B/S 可建立在广域网之上，适应范围更广，便于实现分布式系统间的互联。
3拟采用的编程语言：java 和c++4与其他系统集成的问题：需要对方软件或系统提供相应的API函数。
5拟采用的数据库：MYSQL（放弃oracle，因为其50并发用户授权需40~50万）。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.1B/S架构的软件系统Web界面设计和开发实现规范
1、页面设计规则
（1）页面命名规则
1）每个页面的title必须设置为和菜单配置中相同的中文，例如在菜单项中配置为“客户管理”，则此页面的title也要设置为“客户管理”。
2）对于JSP页面都需要在页面的最开始部分增加以下语句
<%@ page contentType="text/html; charset=gb2312" %>
3）对于HTML页面都需要在页面的最开始部分增加以下语句
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4）对于页面中控件的属性设置都需要用双引号包括起来。
（2）页面表单中的控件命名规则
一般采用控件类型缩写前缀（小写）+英文单词（第一个字母大写）的方法来命名每一个控件。
具体规则如下：
2、变量定义规则
页面编码过程中用到的所有变量定义都需要遵循相应规则，方便程序的可读性。
采用数据类型缩写前缀（小写）+英文单词（第一个字母大写）的方法来命名每一个变量。
具体规则如下：
3、函数定义规则
页面编码过程中用到的所有函数定义都需要遵循相应规则，方便程序的可读性。
采用前缀（fuc）+英文单词（第一个字母大写）的方法来命名每一个函数。
例如：fucAcceptOrder 4、CSS文件中的定义规则
（1）页面的规范
（2）表格的规范
（3）层的规范
（4）链接的规范。