「转载」我创建了一个无后端的电商网站！

是的，我创建了一个没有后端的电子商务商店（无服务器，HTML，CSS和JS），不错，你没有看错！我创建了一个电子商务（或电子商店）网站，没有一行后端编程语言。我的职业生涯曾经是一名前端开发人员（虽然我知道后端）。因此，对于创建电子商务网站的这个新项目， 我就不想使用我常用的工具，因为它们都涉及到后端。可以使用哪些工具来创建电子商务网站？作为一个认为PHP是最好语言的Web开发人员，我所知道的创建电子商店的工具是开源CMS有：Magento，Prestashop和WooCommerce。问题：它们涉及后端编程（我想在这里避免）。还有其他托管平台，如：Shopify，SquareSpace和Wix。问题：如果添加CSS和JS库，维护主题Theming有时会很痛苦。这就是我遇到Stripe Checkout和Stripe Orders的方式。问题：结账很容易，但处理库存和其他东西很麻烦。那么我最后选择了什么？完全随机，我在Facebook上发现了Snipcart！经过一番搜索和思考，我将使用Stripe，因为他们有一个很好的文档，幸运的是，我在阅读一些Facebook的开发组帖子时掉在Snipcart坑。简而言之，Snipcart有一个SDK，就像任何其他JS SDK或库一样。此SDK链接到您的Snipcart帐户的ID，你可以在其中管理订单，产品和其他内容（运输，税收......！）。你只需要3件事就可以运行：1. 注册并将SDK添加到您的网站。2. 他们的爬虫必须在您的页面上找到产品定义3. 在你的网站上随处添加一些添加到购物车按钮！在那里，我遇到了第一个问题。如果我使用SPA，我的产品将不会在页面加载时呈现，除非在标记中静态地添加我的产品。现在有3个选项：静态HTML文件，SSR或Prerendering。我决定使用webpack的prerender-spa-plugin.进行预渲染：1. 对于本机JS：你可以使用任何静态站点生成器，如Jekyll，Hugo ......2. 对于任何JS SPA：您可以使用webpack prerender-spa-plugin。好的，我们如何设置一个无服务器仅有前端的电子商务网站？1. 首先，注册https://snipcart.com。2. 然后，在您的帐户中，转到个人资料 - > api密钥或点击以下链接：https：//app.snipcart.com/dashboard/account/credentials。3. 你会看到一个代码片段，基本上只是一些脚本标签链接到jQuery的（是啊...）的Snipcart SDK与您的API密钥。5. 在HTML中，粘贴代码片段。7. 添加产品定义（ID，价格，名称和URL是必需的）：https://docs.snipcart.com/configuration/product-definition。8.data-item-url是用来定位在本产品确定指标呈现。在订单的最后一步，Snipcart将验证购物车中的产品是否与定义的产品相匹配。这是为了确保没有人用JS 改变价格。9.添加prerender-spa-plugin以及要生成/呈现的URL。10.如果要在购物车中显示商品数量，请添加定制配置11.有两个CSS类是必需的，它们被Snipcart用于注入相应的数据：https://docs.snipcart.com/getting-started/the-cart 。现在，一切似乎都很好，用npm run serve测试它，如果一切正常，用npm run build或yarn build构建它。主机用什么？在console.firebase.google.com上创建Firebase项目。转到菜单中的主机并按照指示进行操作。完成所有指示后，编辑firebase.json。我们将公共目录更改为dist，但是，如果你的构建文件夹的名称不同，请将其重命名为构建文件夹的任何内容。我们添加了一些重写以允许使用SPA（除现有文件或文件夹之外的所有URL都重定向到index.html，类似于Apache重写）。就是这样！这是我制作的电子商务网站：https://futari.fr。这就是我创建一个电子商务网站的方式，没有一行后端，只有一个静态文件托管服务（与AWS S3一样）。

　　非常感谢您读完蓝港网络的这篇文章："「转载」我创建了一个无后端的电商网站！"，仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供：网站建设、网站制作、官网建设、SEO优化、小程序制作等服务，欢迎联系我们提供您的需求。