标签: single-page-application

React:对象抛出“.keys 不是函数错误”

我知道这个错误可能很常见,并且之前已经回答过几次,但我找不到解决方案。

我的代码总是抛出此错误:“.map 不是函数”。我知道发生这种情况是因为数据不是数组。所以我尝试用 .keys 函数解决这个问题,但这会引发“.keys 不是函数”错误。我在父组件中声明 const 数据,并希望在子组件中使用它。

我认为我的错误取决于 .keys 的错误使用。但经过多次谷歌搜索后,我仍然没有更进一步。

这是我的子代码:

import React from "react";
import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Container from 'react-bootstrap/Container';
import {Link} from 'react-router-dom'

const PostsRow = (data) => {
     

{return (
    
    <Container>
      <Row>
        {data.keys(data).map((data) => {
          console.log(data + "is mount")
              return (
        <Col className="col-6 col-md-6 col-lg-3 card">
            <Link to={data.url}>
              <Card className="  text-center ">
                <Card.Img variant="top" src={data.imagesrc} />
                <Card.Body>
                  <Card.Title>{data.title}</Card.Title>
                </Card.Body>
              </Card>
            </Link>
          </Col>
        );
      })}
      </Row>
    </Container> …
Run Code Online (Sandbox Code Playgroud)

javascript single-page-application reactjs

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

在 Nginx 的反向代理中添加对特定静态文件的缓存?

我想在客户端浏览器上使用 nginx 缓存单页应用程序的 js 和 css 文件。当我尝试当前注释掉的块时,指定的文件有 404 响应。尝试将块放入location / {块内,但发生了相同的错误。有人知道怎么修这个东西吗?帮助表示赞赏。

events {}

http {

gzip on;
gzip_vary on;
gzip_min_length 10240;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
gzip_disable "MSIE [1-6]\.";

# security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

server {
    server_name SERVER_NAME www.SERVER_NAME;
    access_log  /var/log/nginx/access.log; …
Run Code Online (Sandbox Code Playgroud)

caching nginx single-page-application

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

ASP.Net Core 6、SPA、端点 - 我无法从 http get 请求调用控制器

[已解决] - 评论中的解决方案

[问题]

我是这个行业的新手,所以请原谅我提出一个新手问题,但我现在在 ASP.Net Core 6 上挣扎,我认为我错过了一些简单的东西,但我完全陷入困境......所以,我尝试使用 C# 和 Angular SPA 制作一个简单的应用程序来计算 BMI。我在 .Net Core 5 中做到了,它工作正常,但由于某种原因,当我逐字复制所有函数时,它不想调用 .Net Core 6 中的控制器方法。我开始搜索5 和 6 版本之间发生了哪些变化,我发现 Startup.cs 丢失了,相反,他们将其与 Program.cs 合并。这会是一个“问题”吗?您可以在下面找到我的 TS 组件代码和控制器代码。如果你能给出任何提示可能是什么问题以及为什么它适用于 5,但不适用于 6...

现在,我只想从 BmiController 调用 Get() 方法并接收 200 状态代码,仅此而已,但每次发送 http get 请求时,我都会收到 404 not found。

预先感谢您的帮助:)

程序.cs

using BMICalculatorCore.Core;
using BMICalculatorCore.Core.Interfaces;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddTransient<ICalculator, MetricCalculator>();

builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    // …
Run Code Online (Sandbox Code Playgroud)

c# endpoint single-page-application asp.net-core angular

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

Durandaljs:如何过滤ko.observablearray

我是durundaljs的新手

我想知道如何过滤ko.observablearray

define(['services/logger','data/data','functions/func'],function(logger,data,func){var vm = {list:ko.observableArray([])}; return vm;} );

我想过滤列表中的项目并将其显示在表格中

谢谢

asp.net-mvc-4 single-page-application durandal

0
推荐指数
1
解决办法
2458
查看次数

shell.js中的Durandal viewChanged事件

我如何在shell.js中监听视图更改事件?

我想在新视图激活时为标记生成href

我正在使用Durandal 2.x.

javascript jquery single-page-application durandal durandal-2.0

0
推荐指数
1
解决办法
215
查看次数

角度模板版本控制

我发现我的应用程序经常出现意外问题,因为用户在浏览器中缓存了模板.我试过,$window.location.reload(true)但即使这样,chrome也会从缓存中提供模板.

有没有一个简单的解决方案,比如使用Interceptor之类的东西动态地向模板URL添加版本查询参数?

version browser-cache angularjs single-page-application

0
推荐指数
1
解决办法
1682
查看次数

Asp.net核心角模板路由器出口未正确清除

我已经开始使用asp.net core 2发行版中的角度spa模板.我首先注意到在更改VS并保存之后,浏览器会刷新但内容是重复的,三重的....等等.

我现在正在使用一个路由器出口区域进行一些基本的组件路由.我试图在html和路由器中使用routerlink并在代码中导航和导航,并获得相同的结果.在第一次导航时,将加载新内容,但不会清除原始内容.如果我再次点击导航按钮,它会正确重新加载.我还通过直接进入浏览器来测试路径,一切正常.由于我在开发模式下运行,不知道它是否与实时刷新有关,或者是否有.net模板实现了角度spa.

什么都不花哨,没有护卫或任何其他东西

喜欢在同一个项目中拥有mvc webapi控制器的能力,但是到目前为止确实很痛苦.

*****************
Routing Module
    @NgModule({
        imports: [
                RouterModule.forRoot([
                    { path: '', redirectTo: 'home', pathMatch: 'full' },
                    { path: 'home', component: HomeComponent },
                    { path: 'maint/uom/:id', component: UomDetailComponent },
                    { path: 'maint/uom', component: UomMaintenanceComponent },
                    { path: 'httptest', component: HttpTestComponent},
                    { path: '**', redirectTo: 'home' }
                ]),
            ],
            exports: [RouterModule]
    })
    export class AppRoutingModule { }

*******************************************

//navigate in ts file
     showUomDetail(uom: IUom) {
            console.log(uom);
            this._router.navigate(['/maint/uom', uom.id]);

           // this._router.navigateByUrl('/maint/uom/5');
            //route to detail page
        }


***** …
Run Code Online (Sandbox Code Playgroud)

single-page-application asp.net-core angular

0
推荐指数
1
解决办法
382
查看次数

Prerender.io 问题 - 对所有内容都错过了“301”,然后是 404 - Nginx + AngularJS

我正在努力使我的 AngularJS 电子商务应用程序对 SEO 更友好,所以我正在努力让 Prerender.io 在应用程序上运行。

我的托管/服务文件设置是使用来自 AWS 上托管的 docker 容器的nginx

到目前为止,我已经:

  1. 更改了我的 nginx.conf -基于 Prerender 文档推荐的官方 nginx.conf

    server {
        listen 9001;
        server_name localhost;
        root /app;
        index index.html;
    
        location /store {  
            proxy_set_header X-Prerender-Token RIDE(H9j9jdeRANDOMtoken;
    
            set $prerender 0;
            if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
                set $prerender 1;
            }
            if ($args ~ "_escaped_fragment_") {
                set $prerender 1;
            }
            if ($http_user_agent ~ "Prerender") {
                set $prerender 0;
            }
            if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
                set $prerender 0;
            }
    
            #resolve …
    Run Code Online (Sandbox Code Playgroud)

nginx prerender angularjs single-page-application

0
推荐指数
1
解决办法
1042
查看次数

客户端请求访问未在请求权限中列出的资源

我正在尝试使用 spa 和 webapi 进行 azure 活动目录登录

按照链接中的源代码

https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi/issues/30

但我收到以下消息作为回应

请求 ID:f106b5ad-6392-4c41-8fa2-473629870700 相关性 ID:6abe676b-e3d0-41e2-8255-829dff79b6b0 时间戳:2018-04-120550DS6 消息:有效资源 客户端已请求访问未在客户端应用程序注册中请求的权限中列出的资源。客户端应用程序 ID:8f4b3482-68c1-42b1-b4dd-ea1e0ad9a65e。来自请求的资源值: 。资源应用 ID:00000002-0000-0000-c000-000000000000。来自应用注册的有效资源列表:c7aee132-6d62-4d80-9511-057c9420fd2b。

active-directory asp.net-web-api single-page-application

0
推荐指数
1
解决办法
7190
查看次数

使用OIDC PKCE和identityserver.io反应SPA

作为学校作业,我必须做以下事情:

总览

创建一个执行以下操作的React SPA:

  1. 使用带有PKCE的授权代码流对(欢迎使用IdentityServer4演示站点)进行身份验证

  2. 使用正确的令牌调用(测试

详情

React中创建一个SPA 。这次必须使用React。

  • 添加一个向SPA添加OIDC协议支持的库。确保支持带有PKCE的授权代码流

  • 使用(欢迎使用IdentityServer4演示站点)作为授权服务器。该授权服务器通过PKCE支持授权代码流

  • 使用正确的令牌调用(测试)并将结果显示给用户

  • 在Netlify上托管react应用

作为该领域的初学者,我完全不理解作业。有人可以帮我吗?

single-page-application reactjs openid-connect identityserver4 pkce

0
推荐指数
1
解决办法
897
查看次数