标签: single-page-application

WebAPI PUT/POST中的部分实体更新

假设您有一个更新Document的存储库方法:

public Document UpdateDocument(Document document)
  {
  Document serverDocument = _db.Documents.Find(document.Id);
  serverDocument.Title = document.Title;
  serverDocument.Content = document.Content;
  _db.SaveChanges();
  return serverDocument;
  }
Run Code Online (Sandbox Code Playgroud)

在这种情况下,实体有两个属性.更新Document时,JSON请求中都需要这两个属性,因此请求PUT /api/folder使用

{
  "documentId" = "1",
  "title" = "Updated Title"
}
Run Code Online (Sandbox Code Playgroud)

会返回错误,因为未提供"内容".我这样做的原因是,即使对于用户不更新的可空属性和属性,强制客户端在请求中指定这些字段似乎更安全,以避免使用nulls服务器端覆盖未指定的字段.

这导致我总是要求PUT和POST请求中的每个可更新属性,即使这意味着为这些属性指定null.

这是不是很酷,或者是否有一种我还没有学到的模式/实践可能会通过只发送线路上需要的内容来促进部分更新?

web-applications asp.net-mvc-3 asp.net-web-api single-page-application

15
推荐指数
1
解决办法
8406
查看次数

将_redirects文件添加到Netlify上托管的Vue SPA的根路径

我正在使用Vue CLI开发单页应用程序,并希望历史状态pushstate工作,所以我得到干净的URL.

我必须遵循这个:https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps并使用以下内容将_redirects文件添加到我的站点文件夹的根目录:

/*    /index.html   200
Run Code Online (Sandbox Code Playgroud)

问题是我不知道如何将此_redirects文件添加到我的dist文件夹的根目录.我尝试将它添加到静态文件夹,但它最终在子文件夹中而不是在root中.如何在Netlify上部署此文件以使历史模式有效?

// config/index.js
build: {
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
Run Code Online (Sandbox Code Playgroud)

single-page-application vue.js netlify vue-cli

15
推荐指数
5
解决办法
5319
查看次数

告诉屏幕阅读器,Backbone/Angular单页面应用程序中的页面已更改

想象一下,你有一个简单的单页应用程序 - 无论它是使用Backbone,Angular,Ember还是其他任何东西编写的.

如果跟踪路线,你如何告诉屏幕阅读器我们改变了'页'?

在一个典型的应用程序,当我从导航/index.html/about.html屏幕阅读器显然检测的页面变化,并重新读取,你所期望的.

然而,在我的Backbone应用程序中,当我遵循路线时,我无法确定如何触发"重新读取"​​.我试过触发一个focus我在某个地方看过的事件,但这似乎不起作用.

注意:我目前正在使用NVDA/Chrome进行测试.

javascript accessibility backbone.js angularjs single-page-application

14
推荐指数
2
解决办法
6391
查看次数

单页应用+ Amazon S3 + Amazon CloudFront + Prerender.io - 如何设置?

  1. 我有使用Backbone.js构建的单页面应用程序.
  2. 我在Amazon S3上托管应用程序(应用程序仅包含静态文件).
  3. 我使用CloudFront作为Bucket CDN.
  4. 应用程序访问 https://myapp.com -> https://abcdefgh34545.cloudfront.com -> https://myBucket.s3-eu-west-1.amazonaws.com/index.html

我如何使用Prerender.io此堆栈的服务?我必须以某种方式检测WebSpider/WebRobot正在访问该页面并将其重定向到prerender.io ...

seo cdn amazon-s3 amazon-cloudfront single-page-application

14
推荐指数
3
解决办法
7757
查看次数

了解VS2013 MVC 5 SPA模板

我已经开始使用Visual Studio 2013附带的MVC 5的单页应用程序模板.我非常熟悉Knockout.js,虽然我不在,但Sammy.js我一直在阅读它并且它似乎不太适合这一切都很复杂.

我似乎无法理解的是MVC 5 SPA模板如何结合这些技术,或者Visual Studio团队为模板所考虑的内容作为示例; 除了其他方面,模板提供了一个home.viewModel.js应该作为起点的文件,但我似乎无法理解如何使用Sammy.js路径添加更多视图.如果只有他们提供了第二个局部视图和视图模型.

我的问题

所以,短篇小说,我真正的问题是,

  1. 如何以#users模仿提供的方式显示链接到路径的局部视图home.viewmodel.js,以便我可以向后导航#home#users?将在什么Sammy.js路线定义看起来像users.viewModel.js
  2. 我是否需要做一些特殊的事情来启用浏览器后退按钮,或者只要我正确定义了我的路由它就能正常工作?
  3. 它是我还是这个模板感觉是一个半生不熟的例子?

以下代码仅用于额外的参考/上下文,但为了回答问题,可能没有必要.


一些背景

假设我创建了一个局部视图,_Users.cshtml由一个UserControllerMVC控制器而不是WebAPI控制器提供服务,并且我想通过Sammy.js路径显示该局部视图,为此我创建了一个users.viewModel.js.现在...

提供的Index.cshtml视图如下所示:

@section SPAViews {
   @Html.Partial("_Home")
}
@section Scripts{
   @Scripts.Render("~/bundles/knockout")
   @Scripts.Render("~/bundles/app")
}
Run Code Online (Sandbox Code Playgroud)

我认为这意味着应用程序"shell"页面,其中部分视图的其余部分将被加载以替换_Home部分内容 .问题是home.viewmodel.jsSammy路由初始化时没有传入将保存内容的元素的选择器,就像这样

Sammy(function () {
    this.get('#home', function () {
    // more code here
} …
Run Code Online (Sandbox Code Playgroud)

sammy.js knockout.js single-page-application visual-studio-2013 asp.net-mvc-5

14
推荐指数
2
解决办法
3612
查看次数

在ASP.net MVC单页面应用程序中删除身份验证

我试图在visual studio 2013中使用asp.net MVC SPA模板,我不需要任何身份验证位,我只需要直接加载到其中一个控制器页面上.

如何摆脱初始模板中的所有身份验证内容?

c# authentication asp.net-mvc single-page-application

14
推荐指数
2
解决办法
1万
查看次数

Nginx配置单页应用程序与HTML5应用程序缓存

我正在尝试构建一个利用HTML5 App Cache的单页应用程序,它将为每个不同的URL缓存一个全新版本的应用程序,因此我必须将所有人重定向到/我的应用程序之后路由它们(这是使用的解决方案)在devdocs.io).

这是我的nginx配置.我希望所有的请求发送一个文件,如果存在的话,重定向到我的API在/auth/api,和重定向所有其他请求的index.html.为什么以下配置导致我的浏览器说有重定向循环?如果用户点击位置块#2并且他的路线与静态文件不匹配,他将被发送到位置块#3,它会将他重定向到"/",它应该击中位置块#1并提供index.html,对吗?导致重定向循环的原因是什么?有没有更好的方法来实现这一目标?

root /files/whatever/public;
index index.html;

# If the location is exactly "/", send index.html.
location = / {
    try_files $uri /index.html;
}

location / {
    try_files $uri @redirectToIndex;
}

# Set the cookie of the initialPath and redirect to "/".
location @redirectToIndex {
    add_header Set-Cookie "initialPath=$request_uri; path=/";
    return 302 $scheme://$host/;
}

# Proxy requests to "/auth" and "/api" to the server.
location ~* (^\/auth)|(^\/api) {
    proxy_pass http://application_upstream;
    proxy_redirect off; …
Run Code Online (Sandbox Code Playgroud)

redirect nginx html5-appcache single-page-application

14
推荐指数
1
解决办法
1万
查看次数

Azure CDN Microsoft 标准规则引擎重写 URL 用于单页应用程序

我们尝试在 Microsoft 标准定价上配置 Azure CDN,以允许我们重写 Url 以将所有应用程序路由路由到 ./index.html。如何设置规则引擎来重写 url 但保留所有 js 文件原样?谷歌中的所有示例都展示了如何在高级定价上执行此操作,但我们喜欢在 Microsoft Standard 上执行此操作,这可能吗?

routes cdn azure single-page-application azure-cdn

14
推荐指数
2
解决办法
3887
查看次数

如何在网络单页应用程序中使用 Firebase Analytics 跟踪页面浏览量?

我正在尝试通过 Firebase 分析跟踪简单的事件和页面/视图。

我有一个渐进式网络应用程序(SPA)。这是一款全屏游戏,不使用浏览器历史记录。

老实说,我对 Google 的文档有些困惑,有时他们只解释了它在 ios/Android 中的工作原理,而不是在网络中。此外,Firebase 分析与“普通 Google 分析”不同。

Firebase 分析 API 没有太多:

analytics().logEvent()
analytics().setAnalyticsCollectionEnabled()
analytics().setCurrentScreen()
analytics().setUserId()
analytics().setUserProperties()
Run Code Online (Sandbox Code Playgroud)

虽然“Google Analytics 文档”确实有一个关于 SPA 的部分,但我还没有找到如何使用 Firebase 分析来做同样的事情,例如手动发送如下页面视图:

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');
Run Code Online (Sandbox Code Playgroud)

我试过使用,setCurrentScreen但它什么也没做。帮助表示赞赏。

javascript google-analytics firebase single-page-application firebase-analytics

14
推荐指数
2
解决办法
7188
查看次数

服务器端渲染如何兼容单页应用?

我的问题是,我无法理解像 Next.js 这样的服务器端渲染单页面应用程序框架如何在前端接收预渲染的完整 HTML,而无需重写整个页面。例如,nextjs 网站声明如下:

默认情况下,Next.js 预渲染每个页面。这意味着 Next.js 提前为每个页面生成 HTML,而不是由客户端 JavaScript 完成这一切。预渲染可以带来更好的性能和 SEO。每个生成的 HTML 都与该页面所需的最少 JavaScript 代码相关联。当浏览器加载页面时,其 JavaScript 代码就会运行并使页面完全交互。(这个过程称为水合作用。)

我了解这如何增强 SPA 在首页加载时的响应能力。但在第一次加载之后,是什么让服务器端渲染与 SPA 兼容?我认为这是由于我无法理解的根本误解而产生的,因此我还有一些进一步的问题可能会帮助您理解它:

  1. SSR SPA 是否始终以完整的预渲染 HTML 进行响应,还是仅针对首页加载进行响应?
  2. 如果前者为真,那么在后续响应中,客户端如何有效地仅呈现差异而不是重写整个页面?
  3. 否则,如果后者为真,那么 SSR SPA 后端如何判断何时响应第一个请求、何时响应应该是整个 HTML、与后续请求、何时大部分页面已经存在等等需要发送的是一些相对最少的信息?

我对 SSR 与 SPA 兼容的原因有什么误解?

非常感谢所有解决这个问题的人!

single-page-application reactjs server-side-rendering next.js

14
推荐指数
1
解决办法
5642
查看次数