小编The*_*ner的帖子

$ routeChangeSuccess的奇怪行为:第一次加载时没有触发(但没有抛出任何错误)

我不知道如何开始解释这种情况,但我会尽我所能.我有一个简单的西班牙语 - 英语 - 西班牙语词典查找页面,其中包含一个文本框,一个查找按钮和一个显示结果的div.当您在文本框中输入要查找的单词并单击查找时,结果将显示在下面的div中.

在结果中,某些单词是超链接的,因此当您单击它们时,您将获得div中单击的单词的搜索结果.这就像任何在线词典服务功能一样.除了第二个功能似乎在键入搜索后的第一次单击时不起作用,它的工作原理很完美.例如:

您在输入框中键入pedir并单击Lookup.现在,下面的div显示了pedir的详细含义,包括诸如ask类的超链接词,以及pedir的英语.现在,你点击询问应该刷新div和显示你的西班牙语含义要求包括像话pedir.但是,它只是刷新div并显示相同的内容,就像你第二次查看pedir一样.但是当你现在点击第二次询问时,它可以正常工作.必须注意的是,这些单词是适当的超链接,这里没有误导.不仅如此,其他链接(例如顶部导航选项卡上的链接)似乎也不会在第一次点击时起作用.每次查找新单词时都会发生这种情况.

希望上面的例子能很好地说明问题; 至少那是我尝试过的.我的路由和控制器看起来像这样:

var asApp = angular.module('asApp', ['ngRoute']);
asApp.config(function($routeProvider) {
    $routeProvider
.when('/', {
            title: 'Home of thesite – Radical Spanish learning tips and tricks for the adventurous learner',
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })
// route for dictionary
        .when('/dictionary', {
            title: 'The dictionary',
            templateUrl : 'pages/dictionary.html',
            controller …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs

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

尽管安装了JQuery和Bootstrap,工具提示仍无法正常工作

看似相似的问题在这里这里存在,但提供的答案并没有解决我的情况.

我的服务器上有一个Node/Express/Webpack堆栈,我在其上使用npm来安装Bootstrap 4 alpha 6以及tether.js,这是工具提示功能所必需的依赖项.在我的主JS文件中,如webpack配置中所定义的,我使用以下代码段导入了使用和初始化Bootstrap工具提示函数的tether:

import "tether";
Run Code Online (Sandbox Code Playgroud)

和:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
Run Code Online (Sandbox Code Playgroud)

然后,在我的index.hbs中(我使用把手来渲染我的页面),我有以下片段实现工具提示:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip on top">
    Tooltip on top
</button>
Run Code Online (Sandbox Code Playgroud)

脚本编译成功,没有任何错误或警告.但是,在浏览器中加载页面时,我收到错误消息tooltip is not a function....这应该不会发生,对吧?我可以确认JQuery工作得很好,因为如上所示,在一个初始化工具提示下面的下面的代码片段正在渲染而没有任何打嗝:

$('p#some').html('from jquery');
Run Code Online (Sandbox Code Playgroud)

如下所示,JQuery和Tether插件以及Tooltip插件都已在我的webpack.config.js文件中启动:

plugins: [
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    new ExtractTextPlugin({ filename: "../../public/dist/main.min.css" }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Tether: "tether",
      "window.Tether": "tether",
      Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
      Button: "exports-loader?Button!bootstrap/js/dist/button",
      Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
      Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", …
Run Code Online (Sandbox Code Playgroud)

jquery twitter-bootstrap-tooltip tether bootstrap-4 webpack-2

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

关闭警告框后URL中的问号

我有一个虚拟Bootstrap模式,带有一个非常简单的JS警报,意味着在单击提交按钮时触发.代码在这里生效,这就是它的样子:

<div class="modal fade" id="contact" role="dialog" >
<div class="modal-dialog">
    <div class="modal-content">
        <form class="form-horizontal" role="form" name="contact-form">
            <div class="modal-header">
                <h4>test</h4>
            </div>
            <div class="modal-body"><p>This is body</p></div>
            <div class="modal-footer">
                <button type="submit" id="submit" class="btn btn-primary btn-lg" onclick="alert('something');">Send</button>
            </div>
        </form>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

如果您访问该站点,可以通过单击顶部导航菜单中的联系链接来触发模式.模态看起来像这样:

在此输入图像描述

如您所见,只有一个字段和一个提交按钮.按钮的onclick()事件设置为警告屏幕上的"某事".这种方法很好,但是当您关闭警报时,页面会刷新"?" 附加到URL.如何防止此刷新以及问号来自何处?

html javascript twitter-bootstrap

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

尽管文件可以访问,但“Lighthouse 无法下载 robots.txt 文件”

我在http://www.schandillia.com 上运行了一个NodeJS/NextJS应用程序。该项目有一个robots.txt文件,可从http://www.schandillia.com/robots.txt 访问。截至目前,该文件是用于测试目的的基本文件:

User-agent: *
Allow: /
Run Code Online (Sandbox Code Playgroud)

但是,当我在我的网站上运行 Lighthouse 审核时,它会抛出一个爬网和索引错误,说它无法下载robots.txt文件。我再说一遍,该文件可从http://www.schandillia.com/robots.txt 获得

如果您需要查看该项目的代码库,请访问https://github.com/amitschandillia/proost。该robots.txt的文件位于proost/web/static/而是得益于我的Nginx的配置如下根访问:

# ... the rest of your configuration
  location = /robots.txt {
    proxy_pass http://127.0.0.1:3000/static/robots.txt;
  }
Run Code Online (Sandbox Code Playgroud)

完整的配置文件可在https://github.com/amitschandillia/proost/blob/master/.help_docs/configs/nginx.conf上的 github 上查看。

如果有什么我忽略的地方,请提供建议。

robots.txt node.js lighthouse content-security-policy next.js

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

如何区分 Google OAuth 中的实际图片与默认自动生成的图片?

我正在使用 Passport Google 策略 ( OAuth 2.0 ) 从 Google 检索用户数据。除非登录用户没有明确设置的个人资料图片,否则这工作正常。在这种情况下,Google 会返回带有用户名字首字母的默认图像:

在此输入图像描述

我希望能够判断 API 返回的图像是真实图像还是类似的图像。我该如何实现这个目标?这里有一个类似的问题,但答案已经过时了,因为谷歌似乎不再提供isDefault标志。它也没有一致的默认轮廓URI ,因为自动生成的图像对于不同的用户来说是不同的,具体取决于他们的姓名首字母。Google OAuth 2.0 是否提供任何替代标志来告诉我该图像是否是自动生成的?

google-oauth passport-google-oauth2

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

使用 Apollo Client 在 React 中实现无限滚动

在我的 NextJS 应用程序中,我有一个如下所示的PostList.jsx组件:

import { useQuery } from '@apollo/react-hooks';
import Typography from '@material-ui/core/Typography';
import { NetworkStatus } from 'apollo-client';
import gql from 'graphql-tag';
import getPostsQuery from '../../apollo/schemas/getPostsQuery.graphql';
import Loading from './Loading';
import Grid from '@material-ui/core/Grid';
import PostPreview from './PostPreview';
import withStyles from '@material-ui/core/styles/withStyles';
import React, { useLayoutEffect } from 'react';

const styles = (theme) => ({
  root: {
    padding: theme.spacing(6, 2),
    width: '100%',
  },
});

export const GET_POSTS = gql`${getPostsQuery}`;

export const getPostsQueryVars = {
  start: 0,
  limit: …
Run Code Online (Sandbox Code Playgroud)

javascript infinite-scroll reactjs next.js

6
推荐指数
0
解决办法
1247
查看次数

useQuery的奇怪问题:未读取查询参数

我有一个将字符串(userToFetch)作为变量传递给参数化查询的组件。该组件如下所示:

// pages/index.jsx

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const GET_USERS = gql`
  query users ($limit: Int!, $username: String!) {
    users (limit: $limit, where: { username: $username }) {
      username
      firstName
    }
  }
`;

const Home = () => {
  const userToFetch = 'jonsnow';

  const {
    loading,
    error,
    data,
  } = useQuery(
    GET_USERS,
    {
      variables: { limit: 2, username: userToFetch },
      notifyOnNetworkStatusChange: true,
    },
  );

  if (loading) {
    return <p>Loading...</p>; …
Run Code Online (Sandbox Code Playgroud)

next.js apollo-client

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

PHP preg_replace()更改版权年份

我的xml中出现了以下文本:

版权所有©2015.

我正在尝试使用正则表达式动态更改上面的文本,以便始终反映最终输出中的当前年份.这是我的尝试,它似乎不起作用:

$finaloutput = preg_replace("/Copyright © [0-9]+/", "test", $finaloutput);
Run Code Online (Sandbox Code Playgroud)

当然,我正在使用硬编码字符串("测试")仅用于测试目的,因为当前的文本已经有2015年.所以,我的目标是改变这个:

版权所有©2015.保留所有权利....

进入这个:

版权所有©测试.版权所有....

我的正则表达式错了吗?

PS:只是为了让每个人都更好地了解上下文,这里的(一部分)XML片段$finaloutput被分配给:

<div class="dict_source"><strong>Powered by</strong> <a target="_blank" rel="nofollow" href="http://www.collinsdictionary.com/dictionary/english-spanish">Collins Complete Spanish Electronic Dictionary</a><br>Copyright © 2015 HarperCollins Publishers Limited.</div>
Run Code Online (Sandbox Code Playgroud)

更新:我尝试了@Avinash提供的答案,但仍未能使其正常工作.为了更好地说明问题,我挖出了一个在线preg_replace()测试人员.它结束于https://www.functions-online.com/preg_replace.html.以下是我在各种输入字段中输入的用于测试的信息:

$ pattern:'/(Copyright\s+©\s+)[0-9]+/u'

$替换:'\1test'

$ subject:<div class="dict_source"><strong>Powered by</strong> <a target="_blank" rel="nofollow" href="http://www.collinsdictionary.com/dictionary/english-spanish">Collins Complete Spanish Electronic Dictionary</a><br>Copyright © 2015 HarperCollins Publishers Limited.</div>

php regex preg-replace

5
推荐指数
2
解决办法
510
查看次数

如何处理一个句子数组以返回x字符以下最长句子的另一个数组?

我有一系列长度不一的句子。让我们假设它看起来像这样:

sentences = [
   "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
   "I never thought that would happen!",
   "This one?",
   "No, no, that one.",
   "Okay but please ensure your sentences are long enough to be split when longer than 100 characters, although some could be too short as well.",
   "This is also a random text like all others",
]
Run Code Online (Sandbox Code Playgroud)

我需要的是在第一个句子的基础上构建另一个句子数组,每个元素尽可能大,但不能超过100个字符。相反,长度超过100个字符的句子应分成较小的块。因此,如果原始数组中有5个句子,其长度如下:

[0] => 150
[1] => 10
[2] => 35 …
Run Code Online (Sandbox Code Playgroud)

javascript

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

将 React-Markdown 与 Material-UI 表结合使用

我正在尝试使用react-markdown解析markdown 表并使用Material-UI 表组件渲染生成的标签。这是我的渲染器:

import withStyles from '@material-ui/core/styles/withStyles';
import PropTypes from 'prop-types';
import TableCell from '@material-ui/core/TableCell';

const styles = (theme) => ({
  root: {
    marginBottom: theme.spacing(2),
  },
});

const RenderedTCell = ({rendererProps, classes}) => {
  if(rendererProps.children.length !== 0) {
    console.log('rendererProps.children', rendererProps.children);
  }
  return (
    <TableCell className={classes.td} {...rendererProps} />
  );
};

RenderedTCell.propTypes = {
  classes: PropTypes.shape({
    root: PropTypes.string,
  }).isRequired,
};

export default withStyles(styles)(RenderedTCell);
Run Code Online (Sandbox Code Playgroud)

所有表格标签的 Markdown 渲染器定义如下:

const renderers = {
    tableCell: (props) => (
      <RenderedTCell
        rendererProps={props}
      />
    ),
    tableRow: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs material-ui

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