「轉(zhuǎn)載」我創(chuàng)建了一個(gè)無(wú)后端的電商網(wǎng)站！

是的，我創(chuàng)建了一個(gè)沒(méi)有后端的電子商務(wù)商店（無(wú)服務(wù)器，HTML，CSS和JS），不錯(cuò)，你沒(méi)有看錯(cuò)！我創(chuàng)建了一個(gè)電子商務(wù)（或電子商店）網(wǎng)站，沒(méi)有一行后端編程語(yǔ)言。我的職業(yè)生涯曾經(jīng)是一名前端開(kāi)發(fā)人員（雖然我知道后端）。因此，對(duì)于創(chuàng)建電子商務(wù)網(wǎng)站的這個(gè)新項(xiàng)目， 我就不想使用我常用的工具，因?yàn)樗鼈兌忌婕暗胶蠖恕？梢允褂媚男┕ぞ邅?lái)創(chuàng)建電子商務(wù)網(wǎng)站？作為一個(gè)認(rèn)為PHP是最好語(yǔ)言的Web開(kāi)發(fā)人員，我所知道的創(chuàng)建電子商店的工具是開(kāi)源CMS有：Magento，Prestashop和WooCommerce。問(wèn)題：它們涉及后端編程（我想在這里避免）。還有其他托管平臺(tái)，如：Shopify，SquareSpace和Wix。問(wèn)題：如果添加CSS和JS庫(kù)，維護(hù)主題Theming有時(shí)會(huì)很痛苦。這就是我遇到Stripe Checkout和Stripe Orders的方式。問(wèn)題：結(jié)賬很容易，但處理庫(kù)存和其他東西很麻煩。那么我最后選擇了什么？完全隨機(jī)，我在Facebook上發(fā)現(xiàn)了Snipcart！經(jīng)過(guò)一番搜索和思考，我將使用Stripe，因?yàn)樗麄冇幸粋€(gè)很好的文檔，幸運(yùn)的是，我在閱讀一些Facebook的開(kāi)發(fā)組帖子時(shí)掉在Snipcart坑。簡(jiǎn)而言之，Snipcart有一個(gè)SDK，就像任何其他JS SDK或庫(kù)一樣。此SDK鏈接到您的Snipcart帳戶的ID，你可以在其中管理訂單，產(chǎn)品和其他內(nèi)容（運(yùn)輸，稅收......?。Ｄ阒恍枰?件事就可以運(yùn)行：1. 注冊(cè)并將SDK添加到您的網(wǎng)站。2. 他們的爬蟲(chóng)必須在您的頁(yè)面上找到產(chǎn)品定義3. 在你的網(wǎng)站上隨處添加一些添加到購(gòu)物車按鈕！在那里，我遇到了第一個(gè)問(wèn)題。如果我使用SPA，我的產(chǎn)品將不會(huì)在頁(yè)面加載時(shí)呈現(xiàn)，除非在標(biāo)記中靜態(tài)地添加我的產(chǎn)品。現(xiàn)在有3個(gè)選項(xiàng)：靜態(tài)HTML文件，SSR或Prerendering。我決定使用webpack的prerender-spa-plugin.進(jìn)行預(yù)渲染：1. 對(duì)于本機(jī)JS：你可以使用任何靜態(tài)站點(diǎn)生成器，如Jekyll，Hugo ......2. 對(duì)于任何JS SPA：您可以使用webpack prerender-spa-plugin。好的，我們?nèi)绾卧O(shè)置一個(gè)無(wú)服務(wù)器僅有前端的電子商務(wù)網(wǎng)站？1. 首先，注冊(cè)https://snipcart.com。2. 然后，在您的帳戶中，轉(zhuǎn)到個(gè)人資料 - > api密鑰或點(diǎn)擊以下鏈接：https：//app.snipcart.com/dashboard/account/credentials。3. 你會(huì)看到一個(gè)代碼片段，基本上只是一些腳本標(biāo)簽鏈接到j(luò)Query的（是啊...）的Snipcart SDK與您的API密鑰。5. 在HTML中，粘貼代碼片段。7. 添加產(chǎn)品定義（ID，價(jià)格，名稱和URL是必需的）：https://docs.snipcart.com/configuration/product-definition。8.data-item-url是用來(lái)定位在本產(chǎn)品確定指標(biāo)呈現(xiàn)。在訂單的最后一步，Snipcart將驗(yàn)證購(gòu)物車中的產(chǎn)品是否與定義的產(chǎn)品相匹配。這是為了確保沒(méi)有人用JS 改變價(jià)格。9.添加prerender-spa-plugin以及要生成/呈現(xiàn)的URL。10.如果要在購(gòu)物車中顯示商品數(shù)量，請(qǐng)?zhí)砑佣ㄖ婆渲?1.有兩個(gè)CSS類是必需的，它們被Snipcart用于注入相應(yīng)的數(shù)據(jù)：https://docs.snipcart.com/getting-started/the-cart 。現(xiàn)在，一切似乎都很好，用npm run serve測(cè)試它，如果一切正常，用npm run build或yarn build構(gòu)建它。主機(jī)用什么？在console.firebase.google.com上創(chuàng)建Firebase項(xiàng)目。轉(zhuǎn)到菜單中的主機(jī)并按照指示進(jìn)行操作。完成所有指示后，編輯firebase.json。我們將公共目錄更改為dist，但是，如果你的構(gòu)建文件夾的名稱不同，請(qǐng)將其重命名為構(gòu)建文件夾的任何內(nèi)容。我們添加了一些重寫(xiě)以允許使用SPA（除現(xiàn)有文件或文件夾之外的所有URL都重定向到index.html，類似于Apache重寫(xiě)）。就是這樣！這是我制作的電子商務(wù)網(wǎng)站：https://futari.fr。這就是我創(chuàng)建一個(gè)電子商務(wù)網(wǎng)站的方式，沒(méi)有一行后端，只有一個(gè)靜態(tài)文件托管服務(wù)（與AWS S3一樣）。

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："「轉(zhuǎn)載」我創(chuàng)建了一個(gè)無(wú)后端的電商網(wǎng)站！"，僅為提供更多信息供用戶參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

分享名稱：「轉(zhuǎn)載」我創(chuàng)建了一個(gè)無(wú)后端的電商網(wǎng)站！
分享鏈接：http://www.muchs.cn/news23/311873.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、虛擬主機(jī)、網(wǎng)頁(yè)設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)