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

简介: 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数据库、数据库生态工具、云原生智能化数据库管控平台,为阿里巴巴经济体以及各个行业的企业客户和开发者提供从公共云到混合云再到私有云的完整解决方案,提供基于云基础设施进行数据从处理、到存储、再到计算与分析的一体化解决方案。本节课带你了解阿里云数据库产品家族及特性。
目录
相关文章
|
8月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
存储 监控 安全
如何在Python Web开发中确保应用的安全性?
如何在Python Web开发中确保应用的安全性?
606 157
|
7月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
239 1
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
381 3
|
8月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
326 7
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
11月前
|
中间件 关系型数据库 数据库
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
350 19
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
543 17
使用Web浏览器访问UE应用的最佳实践
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
238 61
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
311 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙