RailsJS环境下如何将前端设置写入数据库并调用update方法

你的问题核心在于混淆了服务器端ERB代码和前端JavaScript代码的执行时机：ERB代码是在页面加载时由服务器渲染执行的，这时候前端的settings变量还没在客户端创建，所以服务器根本识别不了这个变量，自然会报错。

下面是完整的解决方案，分步骤实现前后端交互来更新数据库：

1. 配置后端路由 #

首先在config/routes.rb中添加一个处理更新请求的路由，让前端能通过API调用后端：

# 标准RESTful路由，或者自定义路由都可以
resources :settings, only: [:update]
# 或者针对当前店铺的自定义路由（可选）
put '/shop_settings/update', to: 'settings#update'

2. 完善Settings控制器的update方法 #

修改app/controllers/settings.rb，确保它能接收前端的参数，找到当前店铺的Setting记录并更新，同时返回JSON响应给前端：

def update
  # 基于当前Shopify店铺找到对应的Setting记录
  @setting = Setting.find_by(shopify_domain: @currentShop.domain)
  # 或者如果前端传了id，也可以用Setting.find(params[:id])

  respond_to do |format|
    if @setting.update(setting_params)
      format.json { render json: { success: true, message: '设置更新成功' } }
    else
      format.json { render json: { success: false, errors: @setting.errors.full_messages }, status: :unprocessable_entity }
    end
  end
end

private
# 强参数，只允许更新指定字段，避免安全问题
def setting_params
  params.require(:setting).permit(:appearance, 
                                  # 这里添加你需要更新的其他字段，比如:color, :layout等
                                 )
end

3. 前端通过AJAX发送更新请求 #

修改你的writeSettings函数，用fetch（原生JS）或者jQuery AJAX发送PUT请求到后端路由，传递需要更新的数据：

function writeSettings() {
  const currentSetting = settings[0];
  const updatePayload = {
    setting: {
      appearance: 'box' // 这里可以换成动态值，比如从表单输入框获取：document.getElementById('appearance').value
    }
  };

  // 发送PUT请求到后端
  fetch(`/settings/${currentSetting.id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      // 必须带上Rails的CSRF令牌，防止跨站请求伪造
      'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
    },
    body: JSON.stringify(updatePayload)
  })
  .then(response => response.json())
  .then(result => {
    if (result.success) {
      alert('设置已成功保存到数据库！');
      // 同步更新前端的settings变量，保持前后端数据一致
      currentSetting.appearance = 'box';
    } else {
      alert('保存失败：' + result.errors.join(', '));
    }
  })
  .catch(error => {
    console.error('更新出错:', error);
    alert('更新设置时发生错误，请稍后重试。');
  });
}

关键原理说明 #

• ERB代码是服务器端预渲染的，页面加载完成后就不会再执行，所以无法直接访问前端的JavaScript变量。
• 前后端数据交互必须通过HTTP请求（比如PUT/POST），前端把数据发送到后端，后端处理数据库操作后返回结果。
• 必须带上Rails的CSRF令牌，否则会被拦截，这是Rails的安全机制。

内容的提问来源于stack exchange，提问作者Peter Lakatos - appnomads