1.1 基于B/S 结构的 Web 应用

本文涉及的产品
云原生数据库 PolarDB MySQL 版,Serverless 5000PCU 100GB
简介: 1.1 基于B/S 结构的 Web 应用

1.1 基于B/S 结构的 Web 应用


     C/S架构也可以看作胖客户端架构。因为客户端需要实现绝大多数的业务逻辑和界面展示。在这种架构中,作为客户端的部分需要承受很大的压力,因为显示逻辑和事务处理都包含在其中,通过与数据库的交互(通常是SQL或存储过程的实现)来达到持久化数据,以此满足实际项目的需要。


     C/S架构的优点是安全性较好,而突出的缺点是开发和维护成本都比B/S高,而且客户端负载重。在2000年以前,C/S 架构占据了网络程序开发领域的主流。


     B/S架构是随着Internet技术的兴起,对C/S架构的一种变化或者改进的结构。在这种结构下,用户工作界面是通过WWW浏览器来实现的,极少部分事务逻辑在前端(Browser)实现,主要事务逻辑在服务器端(Server) 实现。


1.2 JDK安装与配置


     jdk 下载最新版本的JDK,这里是JDK8 jdk-8u371-windows-i586.exe),按默认安装路径进行JDK安装即可。


      设置环境变量如下:



1.3 服务器Tomcat下载与安装


TomCat下载 下载最新版本的Tomcat,这里下载的是tomcat-8.0.45的解压缩版本(apache-tomcat-8.0.45-windows-x86.zip),解压缩后,tomcat 根目录可改名为tomcat8,把tomcat8文件夹复制至D盘下(其他磁盘亦可)。


      tomcat8目录层次如图1-1所示,注意,目录名不能有中文和空格。目录介绍如下。


     (1) bin目录:二进制执行文件。其中最常用的文件是startup.bat, 如果是Linux或Mac系统,则启动文件为startup.sh.


     (2) conf 目录:配置目录。其中最核心的文件是server.xml,可以在其中修改端口号等。

默认端口号是8080,也就是说,此端口号不能被其他应用程序所占用。


     (3) lib目录: 库文件。lib目录为Tomcat运行时需要的JAR包所在的目录。


     (4) logs 目录:日志。


     (5) temp目录:临时产生的文件,即缓存。


     (6) webapps目录: Web 应用程序。Web应用放置到此目录下,浏览器可以直接访问。


     (7) work 目录:编译以后的class文件。


     在命令行窗口中进入D:\tomcat8\bin 目录,运行startup,启动Tomcat服务器。打开浏览器,在浏览器地址栏中输入http://ocalhost:8080,则进入如图1-2 所示页面,说明Tomcat安装成功。如果想关闭Tomcat服务器,在命令行窗口的D:\tomcat8\bin路径下输入shutdown,即可关闭Tomcat服务器。




1.4 Eclipse安装与使用


1.4.1 Eclipse 下载及创建Dynamic Web Project


      用户可以在http://www.eclipse.org/downloads/下载最新版本的Eelipse,注意是Java EE版。此处,使用的Eclipse版本为eclipse-jee-oxygen-3a-win32-x86_64.zip,详见本书教学资源包tools文件夹,解压缩后,双击eclipse.exe,选择工作区路径,如图1-3所示,便可打开Eclipse。



     在Eclipse中选择“File- →New→Proje+…“选项,在弹出的“New Project” 对话框中选择Web中的"Dynamic Web Project"节点,如图1-4所示。在弹出的“New Dynamic Web Project”对话框中,输入工程名“MyWeb”,如图1-5所示,得到MyWeb工程目录结构,如图1-6所示。





1.4.2 Eclipse 中的编码问题


在Windows 环境下,编译器默认编码方式并不是UTF-8,因为Eclipse插件不同,编码方式可能是GBK或其他。为了开发方便,一般将其设置为UTF-8,这样能更好地解决乱码问题,设置方式如下。


1. 改变整个工作空间的编码格式


     分别进行Eclipse->Window->Preferences->General->Workspace->Other->UTF-8->0K操作,如图1-7所示(汉化版: Eclipse->窗口-> 首选项>常规>工作空间->其他->UTF-8->确定操作)。



2. 项目范围的编码格式设置


     分别进行Project->Properties->General->Resource->Inherited from container(UTF-8)->OK操作,如图1-8所示。



3. 某类型文件的编码格式设置


     分别进行Eclipse >Window->Preferences- >General->Content Types->在右侧找到要修改的文件的类型(Java 等) ->在下面的Default encoding输入框中输入UTF-8->Update->OK操作。


      (汉化版:分别进行Eclipse->窗口->首选项>常规>内容类型->在右侧选择要修改的文件的类型->下面省略编码输入~>更新操作。)


      譬如,Java 文件的编码格式设置:选择“Window->Preferences…选项,弹出首选项对话框,在左侧导航树中找到General->Content Types,在右侧Context Types树中展开Text,选择“Java Source File”节点,在下面的“Default encoding"输入框中输入“UTF-8",单击“Update”按钮,即可设置Java文件编码为UTF-8,如图1-9所示。



     又如,JSP文件的编码格式设置:选择“Window->Preferences… .选项,弹出首选项对话框,在左侧导航树中找到Web->JSP Files, 在右侧的“ Encoding”下拉列表中选择“ISO10646/Unicode(UTF-8)",依次单击“Apply"和“OK"按钮,即可设置JSP文件编码为UTF-8,如图1-10所示。



4. 单个文件编码格式设置


     在包资源管理器中右击文件,选择属性选项,改变文本文件编码格式为UTF-8。(注意:改变编码格式前应做备份,另外,可以用编码格式批量转换工具处理.)


1.4.3 将Tomcat和Eclipse相关联


  1. 配置Server的Runtime Environments,添加Apache Tomcat v8.0

打开Eclipse, 选择“Window→Preferences"选项,再选择左侧Server 下的“RuntimeEnvironments”节点,如图1-11所示。



     单击“A…"按钮,添加Apache Tomcat v8.0,再配置其安装路径,单击“Finish” 按钮即可,如图1-12所示。




  1. 创建Server


     在Eclipse中,通过选择“Window→Show View→Servers”选项,进入“Servers"选项卡,如图1-13所示。



     单击图1-13中的超链接,弹出创建Server对话框,如图1-14所示,选择“Tomcat v8.0Server”;单击“Next"按钮后,再单击“Finish"按钮即可。此时进入如图1-15所示的界面,”得到已创建的"Tomcat v8.0 Server at localhost"。




1.4.4 Eclipse 自动部署项目到 Tomcat 的 webapps 目录


1. 对Server Locations和Server Options进行配置


     双击“Tomcat v8.0 Server at localhost",或在其上右击,在打开的快捷菜单中选择“Open”选项。在进入的界面中,对Server Locations和Server Options进行配置,如图1-16所示,保存设置即可。



     Server Locations的配置中有三处需做修改。


     (1)选中“Use Tomcat installation ( takes control of Tomcat installation)”单选按钮。


     (2)选中“Use Tomcat installation ( takes control of Tomcat installation)”单选按钮后, ServerPath自动修改为Tomcat8实际安装位置。


    (3)在“Deploy path”处修改为“Tomcat根目录\webapps"。在Server Options的配置中,选中如图1-16所示的“Server Options"选项组中的第2项和第3项复选框即可。


2. 创建JSP


     右击MyWeb工程中的WebContent文件夹,在弹出的快捷菜单中选择“New→JSP File",创建testjsp页面,在testjsp页面的部分输入: This is a test!.


3. 将Web项目自动部署到Tomcat服务器的Webapps目录中


     右击MyWeb工程的test.jisp文件,在弹出的快捷菜单中选择“Run As-→Run on Server”选项即可。此时,MyWeb工程会自动部署到Tomcat服务器的Webapps目录中,如图1-17所示。另外一*种将Web项目自动部署到Tomcat服务器的webapps目录中的方法如下。先关闭前面运行的服务器。可通过单击“Servers" 标签页的红色的“Stop the server”按钮,来停止Tomcat服务器,如图1-18所示。



    右击"Tomcat v8.0 Server at localhost",在弹出的快捷菜单中选择“Add and Remove…"选项,此时便弹出“Add and Remove"对话框,如图1-19所示。在这个对话框中配置部署发布到Tomcat服务器上的Web应用。



     譬如,MyWeb工程发生了更改,test.jsp 页面的部分多了以下内容:


<br>生更改,再次部署发布到服务器!<hr>


     我们可删除(Remove) 此对话框右侧列表框中旧的MyWeb配置,再从对话框左侧列表框中重新添加(Add),单击"Finish”按钮后重新启动Tomcat服务器(可通过单击“Servers"标签页的绿色的“Start the server”按钮来重新启动Tomcat服务器,在图1-18中也可以看到)。启动外部的浏览器,这里使用的是火狐,访问http://ocalhost:8080/M/yWeb/testjsp,.便进入如图1-20所示的页面。




1.5 MySQL 安装配置与使用


略~


1.6 PostgreSQL安装与使用


略~


1.6.1 PostgreSQL 下载与安装


略~


1.6.2 使用 pgAdmin III连接 PostgreSQL


略~


1.6.3 使用pgAdmin III创建数据库


略~


1.7 Navicat Premium安装与使用


略~


1.8 本章小结


     本章主要介绍了以下内容:基于B/S架构的Web应用、JDK安装与配置、服务器Tomcat下载与安装、Eclipse安装与使用、MySQL安装配置与使用、PostgreSQL安装与使用、NavicatPremium安装与使用。


    C/S架构和B/S架构是当今世界网络程序开发体系结构的两大主流。


    C/S架构是一种典型的两层架构,即客户端/服务器端架构,其客户端包含-一个或多个在用户的电脑.上运行的程序;而服务器端有两种,- -种是数据库服务器端,客户端通过数据库连接访问服务器端的数据,另一种是Socket服务器端,服务器端的程序通过Socket与客户端的程序通信。


     B/S架构是随着Internet 技术的兴起,对C/S架构的一种变化或者改进的结构。在这种结构下,用户工作界面是通过WWW浏览器来实现的,极少部分事务逻辑在前端(Browser)实现,主要事务逻辑在服务器端(Server) 实现。


基于B/S架构的Web应用,通常由客户端浏览器、Web服务器和数据库服务器三部分组成。用户通过客户端浏览器向服务器端发送请求;服务器收到请求后,需要对用户发送过来的数据进行业务逻辑处理,多数还伴随对数据库的存取操作;最后,服务器将处理结果返回给客户端浏览器。


相关实践学习
使用PolarDB和ECS搭建门户网站
本场景主要介绍基于PolarDB和ECS实现搭建门户网站。
阿里云数据库产品家族及特性
阿里云智能数据库产品团队一直致力于不断健全产品体系,提升产品性能,打磨产品功能,从而帮助客户实现更加极致的弹性能力、具备更强的扩展能力、并利用云设施进一步降低企业成本。以云原生+分布式为核心技术抓手,打造以自研的在线事务型(OLTP)数据库Polar DB和在线分析型(OLAP)数据库Analytic DB为代表的新一代企业级云原生数据库产品体系, 结合NoSQL数据库、数据库生态工具、云原生智能化数据库管控平台,为阿里巴巴经济体以及各个行业的企业客户和开发者提供从公共云到混合云再到私有云的完整解决方案,提供基于云基础设施进行数据从处理、到存储、再到计算与分析的一体化解决方案。本节课带你了解阿里云数据库产品家族及特性。
目录
相关文章
|
17小时前
|
设计模式 存储 前端开发
18:JavaBean简介及其在表单处理与DAO设计模式中的应用-Java Web
18:JavaBean简介及其在表单处理与DAO设计模式中的应用-Java Web
11 4
|
17小时前
|
XML 存储 Java
11:Servlet中初始化参数的获取与应用-Java Web
11:Servlet中初始化参数的获取与应用-Java Web
11 3
|
2天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
2天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
2天前
|
缓存 前端开发 JavaScript
探索现代Web应用的性能优化策略移动应用开发的未来之路:跨平台与原生之争
【4月更文挑战第30天】随着互联网技术的迅猛发展,Web应用已成为信息交流和商业活动的重要平台。用户对Web应用的响应速度和稳定性有着极高的期望,这促使开发者不断寻求提升应用性能的有效途径。本文将深入探讨针对现代Web应用进行性能优化的关键策略,包括前端优化、后端优化以及数据库层面的调优技巧,旨在为开发者提供一套全面的优化工具箱,帮助他们构建更快速、更高效的Web应用。
|
2天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
2天前
|
移动开发 JavaScript 前端开发
【JavaScript技术专栏】Web Worker在JavaScript中的应用
【4月更文挑战第30天】HTML5的Web Worker API解决了JavaScript单线程性能瓶颈问题,允许在后台线程运行JS代码。本文介绍了Web Worker的基本概念、类型、用法和应用场景,如复杂计算、图像处理和数据同步。通过实例展示了搜索建议、游戏开发和实时数据分析等应用,并提醒注意其无法直接访问DOM、需消息传递通信以及移动端资源管理。Web Worker为前端开发提供了多线程能力,提升了Web应用性能和用户体验。
|
2天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter中的Web支持:构建跨平台Web应用
【4月更文挑战第30天】Flutter,Google的开源跨平台框架,已延伸至Web领域,让开发者能用同一代码库构建移动和Web应用。Flutter Web通过将Dart代码编译成JavaScript和WASM运行在Web上。尽管性能可能不及原生Web应用,但适合交互性强、UI复杂的应用。开发者应关注性能优化、兼容性测试,并利用Flutter的声明式UI、热重载等优势。随着其发展,Flutter Web为跨平台开发带来更多潜力。
【Flutter前端技术开发专栏】Flutter中的Web支持:构建跨平台Web应用
|
2天前
|
存储 前端开发 数据库
搭建轻量级Web应用
【4月更文挑战第14天】本文介绍了使用Flask快速搭建轻量级Web应用的步骤。首先,通过`pip install Flask`安装Flask,然后创建基础应用结构,包含路由和简单的Hello, Flask!页面。接着,学习如何添加更多页面、使用模板引擎(如Jinja2)和处理表单。此外,文章还涉及管理静态文件、集成SQLite数据库、进行数据库迁移以及添加用户认证功能,使用Flask-Login实现登录和登出。通过这些步骤,读者能掌握构建完整Flask应用的基本知识,了解其灵活性和扩展性。
11 0
|
3天前
|
网络协议 数据库 开发者
构建高效Python Web应用:异步编程与Tornado框架
【4月更文挑战第29天】在Web开发领域,响应时间和并发处理能力是衡量应用性能的关键指标。Python作为一种广泛使用的编程语言,其异步编程特性为创建高性能Web服务提供了可能。本文将深入探讨Python中的异步编程概念,并介绍Tornado框架如何利用这一机制来提升Web应用的性能。通过实例分析,我们将了解如何在实际应用中实现高效的请求处理和I/O操作,以及如何优化数据库查询,以支持更高的并发用户数和更快的响应时间。