Php 如何存储自定义用户选择的CSS模板样式（如wordpress visual editor）？

我正在制作一个日记应用程序。我希望用户能够自定义/设计其日志的外观，例如封面/背景/字体/颜色等

我想创建类似wordpress主题编辑器的东西，允许用户实时更新背景颜色：

下面是样式编辑器的外观

---

例如，如果用户希望将日记的书写区域设置为浅黄色，如何将该颜色保存到自定义CSS模板中，然后再次渲染？我是否需要为样式模板创建一个MySQL表，并为颜色、背景色等创建一行

在Framework7中，您可以使用函数更改页面的主题。我不完全确定您在问什么，但根据我对您问题的理解：您可以创建一个函数，将用户主题存储在LocalStorage中。在页面加载时，您可以读取LocalStorage并应用主题

另一个选择是，正如您在问题中所说的，将其存储在数据库中

---

如果这不是您要问的问题，请纠正我，我将编辑或删除我的答案。

如果不了解您的完整环境和完整用例，很难解释如何处理您的问题。根据您的标记，我假设您使用PHP使用Laravel框架获取页面

现在，你有几种方法来满足你的要求。但所有的方法都归结为一件事：你愿意如何管理持久性

基本上，你希望用户能够“保存”变量（在你的例子中是一个变量，比如说“background\u cover”或类似的东西），这样他们就可以获得更好的视觉体验或调整颜色等

存储变量的方法有很多，以下是截至2017年最常用的一些方法：

• LocalStorage：基本上，您将

  背景颜色=黄色
  存储到每个用户的浏览器中。这很酷，因为它很容易实现，但它并不是保存数据的最佳方式。如果用户清除缓存：他会丢失数据。。。就这么简单。我建议您先走这条路，如果您需要更多的持久性，可以发展到其他方法。另外，别忘了变量存储在用户的浏览器中，这意味着它以后不能共享给任何其他用户：它是私有的
  

• 随需应变存储：现在是一个非常好的解决方案，因为云计算每天都在变得更加可靠。我会先去谷歌的Firebase之类的按需解决方案。它只允许您发送REST命令来保存或检索任何。。。甚至使用实时功能。这是可靠的。它是可伸缩的。大人物都用它。在时间和金钱上投入很少，很难做得更好。您可以使用任何能够像PHP一样发送

  /POST

  或

  /GET

  请求的技术来使用它。您只需要一个瘦客户机来更好地处理这些请求，并确保它们始终得到处理（由旧的internet explorer或移动浏览器支持…）。我推荐的瘦客户端之一是

  axios

  ，据我所知，它是由Laravel支持的。如果LocalStorage不适合您的用例，那么这显然是我建议您采用的方法

• NoSQL数据库：MongoDB和类似的数据库并不是真正意义上的数据库。相反，你可以从概念上把它们想象成一个无限的记事本，你可以根据需要在上面书写和阅读。很明显，这不是那么简单，但你明白了。它们在生产持久性方面非常快速和可靠。可能有一些连接器可以让您轻松地将它们插入Laravel，这样您就可以在几个小时的学习过程中针对它运行一些命令。请小心，大多数NoSQL解决方案都更“面向Javascript”，所以您可能会迷失方向。尽管如此，它还是构建大型应用程序的一个相当好的方法，尽管它的设计目的不仅仅是存储1或2个东西，而是更好地建模数据之间的关系。但是，由于它的流行，我认为开发人员在其他方面过度使用了它

• 关系数据库：Mysql、PostGreSql等。。。是使用SQL存储和检索条目的数据库。显然，它在幕后有很多性能，但在你说“请存储这个”之前，应该警告你，它也会占用很多资源。大多数情况下，这意味着您需要在服务器上安装数据库（您也应该维护数据库…），学习SQL（非常简单，但仍然很重要），并了解如何对数据（主键、索引等）建模然后收集一个能够将数据库连接到PHP应用程序的解决方案，以便可以对其运行一些SQL命令。 显然，这不是一个“即插即用”的解决方案：如果你还不知道，那就给自己留出50个小时的时间，以便能够从你的应用程序中运行一个正常工作的SQL命令，或者雇人。 在任何情况下，这都是我最不推荐的。SQL数据库或RDBMS更擅长检索海量数据，我认为仅仅针对两个变量走这条路是没有意义的

让我知道这个答案是否适合你

编辑

在看到其他一些答复后，我想知道问题的深度是多少。我最初认为“如何存储…”这个问题是一个更广泛的工作流解释。如果真的需要有真正的代码来持久化数据，我会说这是一个重复的

现在，整个过程取决于已经可用的体系结构，但要坚持我的主张，请使用，这一切归结为：

• 注册到firebase
• 在Firebase中生成私有API密钥
• 在Firebase中创建一个名为say

  /POST/user/preferences

  的API端点，该端点将存储“选定的颜色”（以及其他变量，如果需要）
• 创建一个HTML页面，使用Firebase（通过电子邮件、facebook或其他方式）对用户进行身份验证
• 创造

  id (INT), user_id (INT), section_id (INT), value (VARCHAR 1000).
  

  class UserStyle extends Model {
  
      const JOURNAL_COVER = 1;
      const FONT_NAME = 2;
      const FONT_SIZE = 3;
      const PAGE_THEME = 4;
      const PAD_THEME = 5;
      const BACKGROUND_COLOR = 6;
      // ...
  }
  

  class SiteSection extends Model {
  
      const MAIN = 1;
      const BLOG = 2;
      const CALENDAR = 3;
      // ...
  }
  

  SELECT value
  FROM users_styles
  WHERE user_id = (int)$currentUserId
        AND section_id = (int)SiteSection::MAIN
  

  $userStyles = {"1":"sand.jpg","2":"water.jpg","3":"fire.jpg","4":"#EFEFEF","5":"Lora","6":"17px"};
  

  [
      1=>'sand.jpg',
      2=>'water.jpg',
      3=>'fire.jpg',
      4=>'#EFEFEF',
      5=>'Lora',
      6=>'17px'
  ];
  

  <style type="text/css">
  body {
      font-family: "<?= $userStyles[UserStyle::FONT_NAME] ?>", serif !important;
      font-size: <?= $userStyles[UserStyle::FONT_SIZE] ?>px !important;
      background-color: #<?= $userStyles[UserStyle::BACKGROUND_COLOR] ?> !important;
  }
  
  #journal-cover {
      background-image: url("<?= $currentUserStylesFilesDirPath.$userStyles[UserStyle::JOURNAL_COVER] ?>") !important;
  }
  
  #pad-theme {
      background-image: url("<?= currentUserStylesFilesDirPath.$userStyles[UserStyle::PAD_THEME] ?>") !important;
  }
  <style>
  

  template: [
      {selector: '.notepad-container', property: 'background-image', value: null},
      {selector: '.notepad', property: 'background-image', value: null},
      {selector: '.notepad', property: 'font-size', value: null},
      {selector: '.notepad', property: 'font-family', value: null},
  ]
  

  <div class="swatch render" data-selector=".notepad-container" data-property="background-image" style="background-image: url(img/background/asphalt.jpg);"></div>
  

  saveTemplate: function(e){
      // get data-property and className attribute
      var selector = $(e.target).data('selector');
      var property = $(e.target).data('property');
      // where selector and property are same change model value
      var template = model.template;
      for (var i = 0; i < template.length; i++) {
          if (template[i].selector === selector && template[i].property === property) {
              template[i].property = $(e.target).data('property');
              model.template[i].value = $(e.target).css(property);
              view.renderTemplate(model.template); // render json template
              return;
          }
      }
  },
  

  renderTemplate: function(template){
      // json
      for (var i = 0; i < template.length; i++) {
          if (template[i].value !== null) {
              $(template[i].selector).css(template[i].property, template[i].value);
          }
      }
  }