小编CGr*_*fin的帖子

使用Laravel的资源路由,我已经设置了一个API作为React JS应用程序的后端.我正在尝试访问"更新"方法.我正在使用Javascript fetch()来实现这一点,所以它OPTIONS首先发出一个请求,然后发出POST请求(表单中有一个方法欺骗,设置_method为PATCH- 这显然不会影响初始OPTIONS调用).同一页面也GET通过相同的方法向同一个端点发出请求,工作正常.

该fetch()呼叫在下面.当然,这是React,它是通过Redux Saga进程调用的,但实际的获取是在那里.

function postApi(values, endpoint, token) { // <-- values and endpoint are sent by the component, token is sent by a previous Saga function
    return fetch(apiUrl + endpoint, { // <-- apiUrl is defined as a constant earlier in the file
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + token
        },
        body: JSON.stringify(
            values
        )
    }).then(handleApiErrors)
      .then(response …

假设以下路由设置：

ReactDOM.render(  
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/">
                <Route component={Layout} onEnter={checkIndexAuthorization(store)}>
                    <IndexRoute component={Home} />
                    <Route path="/home" component={Home} />
                </Route>

                <Route component={AuthLayout} onEnter={checkLoginAuthorization(store)}>
                    <Route path="/login" component={Login} />
                </Route>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root'),
)

正如您所看到的，有两种主要布局，普通页面Layout和登录页面AuthLayout。正常布局用于应用程序本身。

下面，您可以看到Layout组件文件：

//========================================
// IMPORTS
//========================================

import React, { PropTypes } from 'react';

//========================================
// COMPONENT
//========================================

const Layout = props => (
    <main className="app">
        <header>
            {props.sectionTitle}
        </header>

        <section>
            {props.children}
        </section>

        <footer>

        </footer>
    </main>
)

Layout.propTypes = {
    children: PropTypes.node,
    sectionTitle: PropTypes.string …

部分用于测试,部分用于我的设计理念,我试图将动画gif转换为纯动画CSS.

它几乎正常工作,但我遇到了障碍,我不确定是什么导致了我的问题,或者我如何解决它.我不幸地怀疑我只是限制了技术.

我一直用于测试的gif是这样的:https://us.v-cdn.net/5018289/uploads/editor/yj/lcdjneh1yoxv.gif

至于实际的CSS,我一直在尝试实现这里的方法(动画框阴影属性),因为它看起来最可行:https://codepen.io/andrewarchi/pen/OXEEgL

#ash::after {
  animation: ash-frames 0.4s steps(1) infinite;
}

@keyframes ash-frames {
    0% {box-shadow: 32px 8px #181818, 40px 8px #181818,...}
    ...
}

在给定的例子中,动画看起来相当无缝,所以我觉得值得一试.显而易见的差异:我使用的gif有更多的帧和更多的像素.

就像一个快速概述,我的CSS(我使用供应商标签等,这只是一个例子):

.pixel-art-3940::after {
    animation: pixel-art-3940-frames 1s steps(5, end) infinite;
}

@keyframes pixel-art-3940-frames {
    0% {box-shadow: 112px 68px rgba(77, 69, 64, 1),...}
    16.666666666666668% {box-shadow:115px 65px rgba(77, 69, 64, 1),...}
    ...
}

动画似乎确实在起作用,但是对动画有一种强烈的"闪烁"效果.见下文:

我已经尝试了Chrome中"闪烁转换"的常用解决方案 - 例如设置-webkit-backface-visibility为hidden- 但到目前为止还没有解决问题.

正如我所说的,我担心我只是对技术本身的限制.任何想法可能是什么问题,以及我是否可以解决它？

编辑:这个特定动画的完整源代码可以在这两个Gists中找到.由于CSS文件的大小,我选择了Gists.

• HTML:https://gist.githubusercontent.com/ChrGriffin/2f1f221143e24d3e39cad8e7369bc167/raw/16ea77d21aa79cf9da52fc3477a6773af41130f2/image.html
• CSS: …

如果服务器通过命令行调用PHP脚本(在Ubuntu服务器上),那么该脚本的多个实例是否可以同时运行？在我的例子中,它是一个PHP脚本,使用FFmpeg转换上传的视频.因此,如果八个用户同时(或非常接近)上传视频,那么该PHP脚本的八个实例会同时运行,还是会一个接一个地排队？如果他们排队,有没有办法改变它,以便多个实例可以同时运行？

我正在尝试使用 FFmpeg 动态更改通过 PHP 上传到服务器的视频的分辨率。IE，我想保留纵向或横向 - 如果 Y 高于 X，我想将 Y 更改为 320，并将 X 更改为相应的值，反之亦然。我在调整大小本身时没有遇到问题 - 实际上非常简单。我遇到的问题是检测哪个维度更大。

我从 StackOverflow 上获取了这个解决方案：如何使用 ffmpeg php 检查视频是横向还是纵向？

但是，它似乎不起作用。当我追踪什么不起作用时 - 我假设输出的格式化方式自该解决方案发布以来已经改变，现在需要以不同的方式解析 - 我想问是否有更好的方法来做到这一点. 我愿意使用 FFmpeg 或基于 PHP 的解决方案。

一点背景：我正在开发 Laravel 5 应用程序。我正在使用 Homestead（使用 Vagrant/VirtualBox）在 Windows 7 上进行本地开发，并通过 CodePipeline 部署到 Amazon EC2 实例。

在尝试让 Laravel Mix 在本地工作时，我不断遇到各种各样的错误，最终导致我在全局安装 cross-env 的解决方案，而不是将它包含在package.json. 当然，这也意味着我的 Amazon 部署也需要更新到该设置。除了解释在我的部署中全局安装 cross-env 之外，这些都没有真正相关，以防万一。

我的package.json：

{
    "private": true,
    "scripts": {
        ...
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.16.2",
        "bootstrap-sass": "^3.3.7",
        "jquery": "^3.1.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.1.10"
    }
}

我部署到 AWS 失败npm run production并出现以下错误：

[stderr]/usr/lib/node_modules/cross-env/dist/index.js:42
[stderr]    });
[stderr]    ^
[stderr]SyntaxError: Unexpected token }

什么可能导致这个问题？我该如何解决？我非常怀疑cross-env 中实际上存在语法错误。

假设我有一个表单，它根据用户输入从 API 检索和显示信息。当用户输入查询时（为了简单起见，假设他们正在更改每页的结果数量），组件应该做出反应并加载新数据。我想给用户一个缓冲区 - 比方说，2 秒。如果他们输入了输入，并且 2 秒后没有任何新输入，则该组件将执行 axios 请求。但是，如果在此期间输入更多输入，“超时”将重置回 2 秒。

我觉得我会使用一个受监视的属性来完成此任务，但在实施过程中遇到了困难。有一个显而易见的setTimeout方法，但它不允许我重置计时器 - 我只是多次调用它并延迟 2 秒。

如何使用 Vue.js 等待用户输入，然后等待 2 秒的不活动状态（在该组件上），然后执行 axios 请求？

相关Vue模板：

<template>
    <input
        type="number"
        v-model.number="perPage" />    
</template>

相关Vue脚本：

<script>
    export default {
        data: function () {
            return {
                perPage: 25,
            }
        },
        methods: {
            myAxiosCall() {

            }
        }
    }
</script>

我有一个React JS应用程序试图登录基于令牌的API(我也在开发,使用Laravel 5.5和Laravel Passport).我正在尝试实现基本登录(使用用户名和密码登录,一旦验证就从服务器接收令牌,使用该令牌进行将来的查询).

我用来获取的代码如下:

function loginApi(username, password) {
    return fetch(loginUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            grant_type: 'password',
            client_id: clientId,
            client_secret: clientSecret,
            username: username,
            password: password
        })

   }).then(handleApiErrors)
     .then(response => response.json)
}

值得注意的是,它还没有完全完成,因为我目前只是想确定我要回复的反应.

我已经解决了遇到的正常问题,比如CORS问题,但是我现在遇到的问题是来自API的响应只是......空的.即使在Chrome的开发人员工具的"网络"标签中,如果我直接检查请求,则响应为空.

但是,如果我做了确切的相同与邮差查询,结果正是我所期望的.

这可能是什么问题？为什么完全相同的查询会返回不同的结果？

我正在编写一个包含用户上传视频的网站后端.为了确保最大程度的可访问性,我正在压缩上传的视频,并将它们重新保存为.mp4和.webm格式,以涵盖所有浏览器(或者尽可能多的浏览器).为此,我在PHP exec()函数中运行avconv命令.

我不想让用户在页面加载之前等待脚本完成,所以我正在异步运行代码.到目前为止,我的代码如下.

exec('bash -c "exec nohup setsid avconv -i ' . $tempPath . ' -c:v libx264 ' . $transpose . ' ' . $newPath . 'mp4 > /dev/null 2>/dev/null &"');
exec('bash -c "exec nohup setsid avconv -i ' . $tempPath . ' -c:v libvpx ' . $transpose . ' ' . $newPath . 'webm > /dev/null 2>/dev/null &"');

除了运行exec功能外,我还将视频保存到数据库并向用户发送电子邮件,感谢他们上传视频.

这就是问题:我希望服务器在视频转换完成之前等待,然后将其添加到数据库并向用户发送电子邮件.基本上,程序流程将是:

用户上传视频.视频放在临时文件夹中.用户被带到感谢页面,表明他们的视频很快就会播出.服务器执行两个avconv命令来转换和压缩视频以供Web使用.完成两次转换后,视频信息将添加到MySQL数据库,电子邮件将发送给用户,并删除原始上传的视频.

它可能只是我对命令行的无知(事实上它几乎肯定是),但我怎么能'排队'这些命令呢？首先进行两次转换,然后调用PHP脚本添加到数据库,然后删除原始视频,同时与原始PHP脚本异步？

编辑:我已尝试使用'&&'运算符排队,如下所示:

exec('bash -c "exec nohup setsid avconv -i ' . $tempPath . ' -c:v libx264 ' . …

考虑以下代码：

$external_variable = TRUE;
usort($array, function($a, $b) {
    // do sorting stuff based on $external_variable
});

如何在usort函数中访问和使用$ external_variable？

假设我有一个React JS组件,为了便于使用,我希望该组件可以访问将索引映射到文本的数组.

例如,假设在场景AI中传递组件ID 1,而在场景BI中传递组件ID 3.我希望组件"知道"如何处理这些ID,因此我希望组件本身具有如下所示的数组:

[
    0 => 'Text for scenario 0',
    1 => 'Text for scenario 1',
    2 => 'Text for scenario 2',
]

现在,我个人知道有两种方法可以让这个组件访问该数组.我可以将它定义为state构造函数中的一部分:

constructor() {
    this.state = {
        // put the array here
    }
}

或者,我可以将其作为默认道具:

Component.defaultProps = {
    // put the array here
}

然后,这将允许组件从任一this.state或访问数组this.props.

但是,我不喜欢这两个选项中的任何一个,因为它们都允许更改数组.如果我把它放入state,那么数组可以从(几乎)组件内的任何地方更改,如果我把它放入props,那么组件可以作为prop传递一个替代数组.

那么:在React JS中,有没有办法在组件上定义一个静态的,不可更改的属性？