小编Gue*_*dio的帖子

我有一个简单的应用程序,允许用户提交"问题"然后评论它们.我试图建立一个简单的投票系统,这样用户就可以"投票"出问题,这反过来会把他们推到一个清单上面.我有一些PHP的基本知识,到目前为止所做的一切都在工作,我只是无法弄清楚如何让它工作.

我已经在线阅读了一个教程,到目前为止我已经在我的problem.php页面上了...

if (isset($_GET['vote'], $_GET['id'])){
        add_problem_vote($_GET['id]'], $_GET['vote']);
    }

<a href="?vote=up&amp;id=<?php echo $problemID; ?>">Vote</a>

在我的functions.php页面上......

function add_problem_vote($problemID, $vote){

    $problemID = (int)$problemID;

    $vote = ($vote === 'up') ? '+' : '-';

    $sql = "UPDATE `problems` SET `votes` = `votes` {$vote} 1 WHERE `id` = {$problem_id}";

    mysql_query($sql);
}

我的所有表字段都是正确命名的.我知道在会议结束后有很多事情要考虑重新投票,但只要我表明这个想法就不一定是完美的.在点击链接的那一刻,它会重定向到一个页面,但是在mysql表中投票不会改变.

我正在使用VueJS组件来创建动态定价表.其中一个更"静态"的元素是添加到团队计划中的"最受欢迎"标签.我希望能够使用v-if来显示并在标记为最受欢迎的计划上添加额外的课程.为简洁起见,我简化了代码.

您可以看到我尝试了多种格式化表达式的方法(目前v-bind和v-if之间存在差异),但我不确定这种方法是否可行.

这是HTML.

<div id="app">
<ul class="plans">
            <plan-component :
                            name="Basic"
                            most-popular=false
            ></plan-component>

            <plan-component :
                            name="Recreational"
                            most-popular=false
            ></plan-component>

            <plan-component :
                            name="Team"
                            most-popular=true
            ></plan-component>

            <plan-component :
                            name="Club"
                            most-popular=false
            ></plan-component>
</ul>

          <template id="plan-component">
            <li v-bind:class="{ 'most-popular': mostPopular == true }">
              <template v-if="most-popular === true">
                <span class="popular-plan-label">Most popular</span>
              </template>
              <p>{{ name }}</p>
            </li>
          </template>
</div>

这是JS.

Vue.component('plan-component', {
        template: '#plan-component',

      props: ['name', 'mostPopular'],

    });

    new Vue({
      el: '#app';
    });

我试图从根Vue实例访问计算的属性并在组件内部访问它。<p class="currency">在组件模板外部输出的元素可以正确输出{{currency}}，但是在尝试访问组件内部的{{currency}}时不会输出任何内容。我曾尝试将货币设置为道具，但这似乎没有任何区别。我确定必须有一种方法可以从组件内部访问根Vue实例，例如{{vm.currency}}，但是我再次尝试了此尝试无济于事。

这是HTML。

<div id="app">

  <ul class="plans">

    <plan-component : name="Basic" ></plan-component>

    <plan-component : name="Rec" ></plan-component>

    <plan-component : name="Team" ></plan-component>

    <plan-component : name="Club" ></plan-component>
  </ul>

  <template id="plan-component">
    <li>
      <h2 class="plan-name">{{ name }}</h2>
      <h3 class="plan-cost">{{ currency }}</h3>
    </li>
  </template>

  <p class="currency">{{ currency }}</p>

</div><!-- end #app -->

这是JS。变量countryCode是在我的应用中的其他位置定义的，但是就像我说的{{currency}}在组件外部工作一样，所以这不是问题。

Vue.component('plan-component', {
  template: '#plan-component',

  props: {
    name: String,
  }
});

var vm = new Vue({
  el: '#app',

  computed: {
    currency: function() {
      if(countryCode === 'GB') {
        return "£";
      } else {
        return …

我正在尝试构建一个基本的JS插件,可以在单击事件后调用以禁用按钮(以防止用户触发多个API调用)并提供有关正在加载/发生的事情的反馈.以下是它的外观:

这在个人基础上很有用,但我想将其重新编写为插件,以便我可以在整个网站上重复使用它.

这是来自文件loader.plugin.js的JS的缩减版本.

let originalBtnText;


export function showBtnLoader(btn, loadingText) {
  const clickedBtn = btn;
  const spinner = document.createElement('div');

  spinner.classList.add('spin-loader');

  originalBtnText = clickedBtn.textContent;
  clickedBtn.textContent = loadingText;
  clickedBtn.appendChild(spinner);
  clickedBtn.setAttribute('disabled', true);
  clickedBtn.classList.add('loading');

  return this;
}


export function hideBtnLoader(btn) {
  const clickedBtn = btn.target;
  clickedBtn.textContent = originalBtnText;
  clickedBtn.removeAttribute('disabled');
  clickedBtn.classList.remove('loading');

  return this;
}


export function btnLoader() {
  showBtnLoader();
  hideBtnLoader();
}

这是一个我想如何使用它的例子.

import btnLoader from 'loaderPlugin';

const signupBtn = document.getElementById('signup-btn');

signupBtn.addEventListener('click', function(e) {
  e.preventDefault();
  btnLoader.showBtnLoader(signupBtn, 'Validating');
  // Call API here
});

// Following API response
hideBtnLoader(signupBtn); …

我正在使用FabricJS来创建用于绘制特定线条和形状的画布.其中一条线是一条波浪线,箭头与此类似:

我已经用箭头端点成功创建了这个版本,但找不到任何如何创建波浪线的示例.用户可以根据需要绘制线条,因此线条中的"峰值"和"波谷"数量需要相应调整(如上图所示的短线可能有4个峰值但是长度为两倍的线条会有8个峰值,不仅仅是较短线的拉伸版本).

这是我用来绘制带箭头端点的直线的代码.请注意,该行的起点是在mousedown上绘制的,并且端点是在mouseup上绘制的.

import LineWithArrow from './LineWithArrow';

drawLineWithArrow = (item, points, color) => (
  new LineWithArrow(points, {
    customProps: item,
    strokeWidth: 2,
    stroke: color,
  })
)

selectLine = (item, points) => {
  switch (item.type) {
    case 'line_with_arrow':
      return this.drawLineWithArrow(item, points, colors.BLACK);

    case 'wavy_line_with_arrow':
      return this.drawWavyLineWithArrow(item, points);
    // no default
  }
  return null;
}

let line;
let isDown;

fabricCanvas.on('mouse:down', (options) => {
  isDown = true;
  const pointer = fabricCanvas.getPointer(options.e);
  const points = [pointer.x, pointer.y, pointer.x, pointer.y];
  line = this.selectLine(item, points); …

以前我在FabricJS中使用Line类来允许用户在画布上绘制线条.我现在需要实现曲线,但由于Fabric的Line类不支持二次曲线,我重新编写了我的代码以使用Path类.

以前在绘制线时,如果在画布上移动了线,x1,y1,x2和y2值会自动更新,这样可以更容易地更新我创建的起点和终点的位置(只是在画布可以像操作Adobe Illustrator中的锚点一样进行操作.

Path类不使用x1,y1,x2或y2,而是传递一个转换为数组的字符串,例如M 100 100, Q 200 200 500 500.这些值然后可作为一个的一部分path对象(100 100为路径的开始点的x和y,200 200作为曲线和500 500作为端),这意味着我可以在得到的开始和结束点与Line类相似的方式.

问题是当移动线本身时路径对象不会更新.该left和top值更新,但我发现很难手动更新基于此路径值.我觉得我可能会遗漏一些明显的东西(例如,能够自动更新路径对象或获得可用于手动重新定位对象上的锚点的delta /差异:移动功能).

下面的片段取自Fabric网站上的二次曲线演示.如果您移动拖动实际线(而不是锚点),您可以看到锚点保持原样.

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c', {
    height: 563,
    width: 1000,
  });
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  canvas.on({
    'object:selected': onObjectSelected,
    'object:moving': onObjectMoving,
    'before:selection:cleared': onBeforeSelectionCleared
  });

  (function drawQuadratic() {

    var line = new fabric.Path('M 100 100, Q 200 200 200 200', { fill: '', stroke: …

我正在尝试绑定一个HTML元素,其中包含一个通过PHP回显的字符串,以便我可以将它与VueJS一起使用.基本上我将要做的是根据一些php/mysql数据库查询(USD是默认值)在GBP和USD之间切换.这是我到目前为止所尝试的简化示例.

<div id="app">
   <?php $string = 'GBP'; ?>
   <!-- Hide this from the front end but bind to Vue somehow -->
   <span v-el:currency style="display: none;"><?php echo $string; ?></span>

   <p>Payment currency: {{ currency }}</p>
</div>

当然我可以再次回显php变量,但是我想将它绑定到VueJS元素的主要原因是我可以在我的JS中使用这个元素的值来做这样的事情......

if (this.currency === 'GBP') {
   return "Paying in GBP";
} else {
   return "Paying in USD";
}

值得注意的是,我已经在这个#app中有相当多的VueJS工作,所以它与Vue的配置错误无关,更多的是不知道正确的方法来解决问题.

我不能为了这个人的生活而这样做.有谁知道这个滚动效果是如何在这个网站上创建的？- http://blindbarber.com/news

我正在开发一个项目,这个效果非常有用,这样滚动时我的固定导航就不会太大.

提前致谢.

我正在尝试在我的'data'数组中的特定点添加一个对象,这是该组件状态.以下不起作用,数组只是被清空.

addNewBulletAfterActive = () => {
    const array = this.state.data;
    const newBulletPoint = {
        id: this.state.data.length += 1,
        title: 'Click to add'
    };
    const newData = array.splice(this.state.activeBulletPointId, 0, newBulletPoint);
    this.setState({
        data: newData
    });
}

我的想法是,如果我有一个10个子弹点的列表,用户可以点击第4个子弹点并按Enter键直接添加新的子弹点.我没有任何问题在数组的末尾添加项目,但看起来像.splice导致问题.

当我的输入包含至少 1 个字符以将必填字段显示为有效时，我试图在它的旁边显示一个“勾号”。我遇到的问题是，目前当我console.log(textEntered)每次字段更改时，我都会收到一个包含所有键入字母而不是完整字符串的对象。例如，如果我输入“你好”，日志看起来是这样的（忽略未定义的）：

这是我的 Redux 字段组件：

handleInput = (textEntered) => {
  console.log(textEntered);
  this.setState({ textEntered }, () => {
    if (this.state.textEntered.length) {
      this.setState({ completed: true });
    } else {
      this.setState({ completed: false });
    }
  });
}

render() {
  return (
    <Field
      name={this.props.placeholderText}
      component={TextInput}
      onChange={this.handleInput}
    />
  );
}

const TextInput = (field) => {
  return (
    <div className="drill-creation-input">
      <input
        {...field.input}
        type="input"
        onChange={e => field.input.onChange(e.target.value)}
      />

      <label htmlFor={field.input.name}>
        <span>{field.input.name}</span>
      </label>
    </div>
  );
};

我正在使用Yup来验证注册表单，但是由于需要使用来自Yup string和number架构的方法，因此我正努力验证信用卡字段。

例如，卡号不能超过16个字符。使用模式中的max方法很容易实现string。但是，如果用户键入的是16个字母而不是数字，则当前可以通过验证。如果我将模式从更改为string，number则max不会以相同的方式运行，而是将字段中的所有数字加起来并检查其是否小于最大数量。

我需要使用架构的min和max方法的字段的示例number是有效期限月份，其中最小值为1，最大值为12。但是，我仍然需要检查以确保字符数为在此字段中为2，因为在1月至9月的月份中应使用前导0。

const validationSchema = {
  cardNumber: Yup.string()
    .label('Card number')
    .max(16)
    .required(),
  cvc: Yup.string()
    .label('CVC')
    .min(3)
    .max(4)
    .required(),
  nameOnCard: Yup.string()
    .label('Name on card')
    .required(),
  expiryMonth: Yup.string()
    .label('Expiry month')
    .min(2)
    .max(2)
    .required(),
  expiryYear: Yup.string()
    .label('Expiry year')
    .min(4)
    .max(4)
    .required(),
};

我偶然发现了SASS循环很棒的情况.我有一个加载<div>的,每个都有一个遵循模式的独特类,.band-(number)我的HTML的简化版本看起来像这样......

<div class="band-1"></div>
<div class="band-2"></div>
<div class="band-3"></div>
etc.

这些元素中的每一个都具有唯一性background-image,但图像的命名约定遵循divs本身的命名约定.我的CSS需要输出这个......

.band-1 {
   background-image:url('../img/image_01.png');
}
.band-2 {
   background-image:url('../img/image_02.png');
}
.band-3 {
   background-image:url('../img/image_03.png');
}

我将如何以简洁的方式输出？提前致谢.

我确信这是一个简单的问题，但似乎无法找到一个有效的简单解决方案。我正在创建一个图像上传网站，我只希望 JPEG 和 PNG 是允许的文件类型。这是我的 PHP 代码的开始，当用户在选择他们的文件后单击“上传”按钮时运行该代码。在此之后，我只有一长串 IF 语句，它们都可以运行和工作。

任何帮助将非常感激。

if ($_FILES['filename']['name']['size']) {

    session_start(); 
    $name = $_FILES['filename']['name'];
    $size = $_FILES['filename']['size'];
    $tmp_name = $_FILES['filename']['tmp_name'];

    if($size < 2000000) {...