spa与jsp的工作流程分别是怎样的

单页 Web 应用(single page web applicationSPA),就是只有一张 Web 頁面的应用单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。



各个参数描述详情清查看 的描述

这个過程会从国外的服务器上下载依赖包的元数据和依赖包数据所以速度会很慢,因为 vue-cli 工具本身的依赖原因过程中会出现一些 warning 开头的警告,这不是错误所以无需理会!

有一个不好的地方,就是我们只能使用 hash 模式理由但是我们可以规避跨域请求的安全限制问题,当然想使用 history 需要对 Nginx 做特殊处理,这里教程中并不会给出例子因为我们后面有独立部署的章节,所以我们先来看如何子目录安装吧

首先我们拟萣我们希望放置在 Plus 程序域名下的 spa 目录下,所以我们重新打开

这个过程也是比较慢的,速度取决于你的磁盘速度运行成功后会有类似下媔的输出:

接下来我们执行下面的命令,将其编译好的输出软链到我们的 Plus 程序的 public 下:

然后我们现在打开你的网站后面输入 /spa 查看 H5 吧!大概嘚样子如下:

我们在前面的教程中安装了 Nginx 这一节教程将指导如何在独立域名(或者端口)进行程序的发布,因为这里是教程我们就换一個网络端口(因为 80 端口已经被 Plus 程序占用)进行发布。

快速购买通道(微信):

}

执行代码需要在服务器上安装引擎比较常见的引擎有WebLogic和Tomcat。把这些支持的web服务器配置好后就可以再客户端通过浏览器来访问页面了。默认端口一般是7001.

处理请求的方法就昰把这些请求都统一看做Servlet由于这个原因,的很多功能和生命周期都由Java Servlet技术标准定义的。这种限制在动态内容方面更加明显。所以学習的时候需要温习Servlet的内容和标准。

网络应用服务器框架:

在符合J2EE规范的服务器构建起来之后就可以编写页面了,在HTML页面中嵌入脚本該页面就成为页面了。脚本用特定的标记括起来如<%...%>,或者<>…</>的工作流程如下:当其读到HTML的代码的时候,就直接输出到客户端而如果讀到嵌入脚本的时候,就需要对这些脚本进行另外的翻译和处理得到输出之后再输出到客户端。

下面通过一个简单页面编写来了解网络應用的框架:

的大部分工作就是与客户端进行交互客户端一般指的是浏览器,它们与置于服务器端得页面进行交互脚本中所有的Java语句嘟是在服务器执行,服务器接受客户端提交的请求通过一定的处理之后,将结果返回给客户端客户端得到的仅仅是HTML代码。下面是一个嘚HelloWorld程序代码:

在一般的客户端和服务器端的交互中是用HTTP协议,客户端通过下面4个步骤也服务器段进行交互:

(1)客户端和服务器端建立連接

(3)服务器返回应答给客户

所有的请求都是由客户端主动发出的而服务器一直出于被动的监听状态。用户在浏览器键入要访问的地址按回车键确认后,浏览器开始与服务器建立连接从这时开始,就开始了一次交互过程浏览器通过一段时间的等待后,从服务器得箌响应并且把相应的信息以HTML方式呈现给用户。用户在浏览网站的过程中实际上包含了很多这样的交互应答过程。在客户端与页面的交互过程中只有服务器接收请求和返回应答的动作可能不一样,其他与上面过程基本一致基本情况如下:

(1)服务器在收到一个请求后艏先要分析这个请求,如果请求的页面只是一般的HTML页面服务器就直接读出HTML页面并返回给客户端

(2)如果客户端请求的是页面,服务器调鼡引擎翻译处理所请求的页面并将翻译和处理之后的HTML返回给客户端

3.引擎的工作原理

当一个页面第一次被访问的时候,引擎将执行以下步驟:

(1)将页面翻译成一个Servlet这个Servlet是一个java文件,同时也是一个完整的java程序

(2)引擎调用java编译器对这个Servlet进行编译得到可执行文件class

(3)引擎調用java虚拟机来解释执行class文件,生成向客户端发送的应答然后发送给客户端

以上三个步骤仅仅在页面第一次被访问时才会执行,以后的访問速度会因为class文件已经生成而大大提高当引擎街道一个客户端的访问请求时,首先判断请求的页面是否比对应的Servlet新如果新,对应的需偠重新编译

在大部分的交互过程中,一个页面首先对用户提出的请求进行分析然后从请求中得到有用的数据,比如接收用户提交的数據或者请求的方法然后进行相应的处理。而这就需要了解得到传入参数的方法和得到用户其他信息的方法

(1)得到传入参数的方法

在茭互过程中,服务器必须从客户端得到一些数据来帮助处理过程的进行。这些数据包括用户身份验证数据(如用户名、密码等)以及其怹中要信息而这些数据的载体,就是用户提交的请求请求的组成主要有两部分,一是头信息头信息包含了以下信息:请求的方法(GET囷POST)、请求的URL和浏览器信息。其他信息包含了一些数据信息

首先要了解的是GET方法发送请求时,这种方法是客户端用来向服务器段请求信息的所以在请求中不包含信息体。用户只能把请求的内容作为参数附加在URL后面进行发送参数之间用“&”符号隔开,如代码:一个典型嘚GET请求的表单get.html

(代码中有一个表单表单在定义的时候,定义了属性method=“GET”这表明表单提交的方法是GET。这个表单向服务器提交两个参数其中一个是username,缺省值为aaa另外一个是password,其缺省值是111111)

这个页面只是得到了输入数据,只有submit.才能实现提交这个页面的数据这就是需要用箌了,代码如下:submit.

在这个页面中是用了的内置对象request的两个方法一个是getMethod,用来获取当前请求的类型另一个是getParameter,用来获取指定参数的值茬get.html中单击submit按钮,就可以显示表单请求方法用户名以及密码等信息。

(2)得到其他信息的方法

得到非用户输入的其他参数信息就需要用箌其他的方法。如下所示是一个得到客户端信息的简单程序根据这个程序我们可以初步了解如何得到客户端信息的大致思路。代码如下:

}

我已经使用Angularjs完成了一个完整的单頁应用程序(SPA)应用程序

任何人都知道,所有的javascript文件都是在第一次访问时加载的或者,有些文件在需要时以懒模式加载

这将简单地解决刷新浏览器,点击F5键控制f5或浏览器中的刷新按钮。但是在使用SPA时,这个概念不存在

我不知道如何解决这个问题。

我可以以某种方式檢测(做一个ping可能)只是重新加载该特定的文件。使用document.write策略但是现在又出现了一个问题,我有一个单一的javascript文件所有的javascript都被缩小了。

我可鉯尝试在浏览器中强制重新加载或强制重新登录(并重新加载,因为登录是SPA部分)

但重新加载是一个难看的解决方案,想像客户端丢失所囿数据的形式因为他是不幸的服务器刚刚更新。更糟的是我现在必须创建一些“自动保存”功能,因为这样

我不知道如何处理这个,如果可能的话以“有角度的方式”做。

我不知道谷歌Gmail如何处理这个因为我保持登录了很多小时没有登录。

其余的人说一个解决方案鈳以是版本化你的文件因此,每当浏览器检查这些文件时浏览器会注意到文件与服务器中的文件不同,以便浏览器缓存新文件

我建議使用一些构建工具,如gulpgrunt或webpack,最后一个变得越来越受欢迎

到目前为止,我使用gulp作为我的项目我正在移动到webpack

让我们说我们在你的项目app.jsΦ有下一个文件,将gulp-rev应用到你的项目之后你得到的是像app-4j8888dp.js那样的app.js注入的html文件仍然指向app.js所以你需要更换它。为此您可以使用gulp-rev-replace插件。

例如 gulp任务在哪里

如果您想了解更多详情,请参阅下面的链接


}

我要回帖

更多关于 yspa 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信