u1435638317 (自由人)

Caddy + Cloudflare 实现用户自定义域名怎么做？

u1435638317 — Mon, 20 Nov 2023 12:09:18 +0800

我做了一个 Rails 应用，我现在想让注册的用户可以自行绑定自己的域名。

我目前使用的是 VPS 上安装了 Caddy，然后搭配 Cloudflare，自动有就了 https 的功能

Caddy 中的配置：

rails_app_domain.com {
    reverse_proxy localhost:3000
}

在这个基础上，我怎么样实现注册的用户可以自行绑定自己的域名，可以对应到当前的 Rails 应用中来呢？控制器里我已经搞定了根据访问域名隔离用户数据了。

每次有一个注册用户设置了域名配置，修改 Caddy 文件，加入配置，然后重启 caddy 服务器，也不现实啊。应该不是这样做吧。

谢谢大家。

React 中 input 元素的 onChange 事件怎么没有执行？

u1435638317 — Wed, 25 May 2022 23:29:18 +0800

我使用 react 封装了一下如下的时间调整的输入控件

控件的代码如下，就是给一个 input 元素加了两个调整控件，可以用来调整输入的小时和分钟。

import { useEffect, useState } from "react";

function padLeadingZeros(num, size) {
  var s = num + "";
  while (s.length < size) s = "0" + s;
  return s;
}

function TimeInput({ hour, minute, onChange }) {
  const [time, setTime] = useState("");
  const [valuep, setValuep] = useState(0);

  const setFormatTime = (hour, minute) => {
    setTime(padLeadingZeros(hour, 2) + ":" + padLeadingZeros(minute, 2));
  }

  const handleAdd = () => {
    let [hour_str, minute_str] = time.split(":");
    let hour_i = parseInt(hour_str);
    let minute_i = parseInt(minute_str);
    if (valuep < 3) {
      hour_i = hour_i + 1;
      if (hour_i > 23) {
        hour_i = 0;
      }
    } else {
      minute_i = minute_i + 1;
      if (minute_i > 59) {
        minute_i = 0;
      }
    }
    setFormatTime(hour_i, minute_i);
  };

  const handleMin = () => {
    let [hour_str, minute_str] = time.split(":");
    let hour_i = parseInt(hour_str);
    let minute_i = parseInt(minute_str);
    if (valuep < 3) {
      hour_i = hour_i - 1;
      if (hour_i < 0) {
        hour_i = 23;
      }
    } else {
      minute_i = minute_i - 1;
      if (minute_i < 0) {
        minute_i = 59;
      }
    }
    setFormatTime(hour_i, minute_i);
  };

  const markCurrentPosition = (e) => {
    setValuep(e.target.selectionStart);
  }

  useEffect(() => {
    setFormatTime(hour, minute);
  }, [hour, minute]);

  return <>
    <input type="text" value={time} onChange={onChange} onClick={markCurrentPosition} onKeyUp={markCurrentPosition} />
    <div className="flex flex-col">
      <div className="hover:bg-gray-200" onClick={handleAdd}>
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
        </svg>
      </div>
      <div className="hover:bg-gray-200" onClick={handleMin}>
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </div>
    </div>
  </>

}

export { TimeInput }

然后在父元素中使用这个 TimeInput 组件：

import { TimeInput } from "../components/TimeInput";

const Parent = () => {
  const [hour, setHour] = useState(0);
  const [minute, setMinute] = useState(0);
  const handleTimeInputChange = (e) => {
    console.log("handleTimeInputChange", e.target.value);
  };

 return <>
<TimeInput hour={hour} minute={minute} onChange={handleTimeInputChange} />
</>
}

测试发现，控件的时间可以自由调整，问题是它的 onChange 事件回调 handleTimeInputChange 没有执行。我需要在这个 onChange 回调事件时获取控件输入的值。

谁能解释一下是什么原因吗？我感觉是我对 Reactjs 的数据流理解的不到位造成的。

请教：Rails7 中 form_with 中的 submit 的 data-disable-wtih 不起作用

u1435638317 — Sat, 08 Jan 2022 09:39:46 +0800

在 Rails 7 中，data-disable-wtih 是由 rails-ujs 提供的功能，我发现和 turbo-rails js 搭配的话，表单提交时，提交按钮文字不变。把import "@hotwired/turbo-rails" 这一行去掉了就好了。

//app/javascript/application.js
/ Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import Rails from "@rails/ujs"
Rails.start()

请问这是一个已知的 bug 吗？另外我看了一些 Issue 讨论，Rails 以后是不是打算移除 rails-ujs 了啊？

折腾来折腾去，我看 Alpine.js 和 Rails 挺搭配的

u1435638317 — Wed, 05 Jan 2022 10:18:20 +0800

前端业态存在的问题

React / Vue 一类的框架对于 Rails 这种不甘于 View 端表达能力的，一下子就感觉是把一个人的手给剁了，感觉挺难受的。React / Vue 野心挺大，而 ActionView / ActionController 又配合也挺好的，这搞的挺分裂的。而 react_on_rails 、react-rails解决不了根本的问题，它们服务端渲染的本质是另搞一个 js 环境来解释执行 JS 代码，传送到浏览器端。
Hotwired / Stimulus 这种写写一般的页面逻辑还是挺方便的，但是对于组件抽象化的能力还是欠缺一些，不能形成生态气候，相对来说是一个封闭的环境。
github 搞的 view_component ，基本来说是不错的，https://ruby-china.org/topics/42030，但是缺少前端的能力，希望能强化一下。

直到我看到 Alpine.js 我眼前一亮，这不就是我想要的吗？ 轻量级，表达能力不弱，HTML 片段和数据状态管理搭配的挺好，同时又没有像其它框架发明很多概念和词汇，就算以后换 JS 框架（经常干的事）也不是很费脑力。它的 Hello world 是这样的：

script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>

    <span x-show="open">
      Content...
    </span>
</div>

再来一个看起来组件化一点的例子：

<div x-data="dropdown">
    <button @click="toggle">...</button>

    <div x-show="open">...</div>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,

            toggle() {
                this.open = ! this.open
            }
        }))
    })
</script>

Alpine.js

Alpine.js 通过很低的成本提供了与 Vue 或 React 这类大型框架相近的响应式和声明式特性，没有为了解决某某问题，给你再整个什么概念（说的就是你 React JS），它的文档里就这么点东西，看一会儿就可以上手了。

Alpine.js 中关于数据状态的 Reactivity 这部分，是直接基于 Vue 项目中的一个模块 @vue/reactivity，再没有其它依赖，整体代码很少，14KB，就这么点：https://unpkg.com/alpinejs@3.7.1/dist/cdn.min.js

我感觉是可以尝试一下了。大家觉得怎么样？

求助：Rails 6 中使用 webpacker 集成了 bootstrap4，modal 方法无效

u1435638317 — Sun, 01 Mar 2020 17:44:48 +0800

我通过 webpacker 集成了 Bootstrap 4 后，发现手动调用$("#modal_block").modal("show");无效，提示 TypeError $(...).modal is not a function.

而通过 data-toggle="modal" 的方式可以工作。想了解一下有没有人遇到这个问题呢？这是一个已知 Bug，还是我的用法配置有问题呢？

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

app/webpacker/pack/admin.js

import jquery from 'jquery';
window.$ = window.jquery = jquery;

import "bootstrap"
require("@rails/ujs").start()
require("turbolinks").start()
require("bootstrap-datepicker")

document.addEventListener("turbolinks:load", function(){


    $("#open_scan").click(function(){
      $("#modal-scan-shipping-box-start").modal("show");
    });

});