nuxt1迁移奥nuxt2_如何使用Nuxt和Cosmic JS建立电子商务网站

最新推荐文章于 2023-09-27 15:39:58 发布

dfsgwe1231

最新推荐文章于 2023-09-27 15:39:58 发布

阅读量205

点赞数

文章标签： java python vue 大数据 web ViewUI

原文链接：https://hackernoon.com/how-to-build-an-e-commerce-website-with-nuxt-and-cosmic-js-292c94e37b41

版权

nuxt1迁移奥nuxt2

我们将要建立的。

对于简单的购物网站，使用诸如Shopify或Woocommerce之类的功能强大的解决方案可能完全是徒劳的。在本教程中，我们将使用Nuxt和Cosmic JS构建一个电子商务网站。我们还将使用Buefy ，这是Vue JS的UI组件库，它基于广受欢迎的Bulma 。

TL; DR

先决条件

您需要已经在计算机中安装了node和npm。如果不是，请访问node js网站并安装最新的稳定版本。

入门

对于我们的项目，首先构建后端模型是有意义的。

设置Cosmic JS后端

登录到您的Cosmic JS仪表板，然后选择“添加新存储桶”。在下一个屏幕中，为您的存储桶提供一个名称，然后选择“从头开始”。

导入存储桶数据

从存储库下载bucket.json文件。然后从仪表板转到设置->导入/导出页面，并导入下载的文件。现在，我们将在仪表板中提供可用的对象和对象类型。

设置条纹

对于任何电子商务网站，我们都必须在某一点或另一点接受来自客户的付款。设置付款处理器曾经是一个困难的领域，但是幸运的是，我们现在有许多便捷的解决方案。

对于我们的网站，我们将使用Stripe。首先，请访问他们的网站并创建一个帐户。填写详细信息并完成所有设置后，请转到“ API”部分并获取您的公共和私有密钥。

我们将需要这些键来使用非常方便的Stripe Checkout元素在我们的网站中配置Stripe。

安装演示

无论是通过下载或克隆回购协议，这是位于获取源代码到你的机器https://github.com/cosmicjs/vue-ecommerce 。然后跑

cd vue-ecommerce
npm install

在运行该应用程序之前，还需要再走一步。重命名.env.sample文件.env和文件中的环境变量存在。

COSMIC_BUCKET =
COSMIC_READ_KEY =
COSMIC_WRITE_KEY =
PORT =
STRIPE_SECRET_KEY =
STRIPE_PUBLIC_KEY =

由于生产用的HOST变量需要为0.0.0.0，NODE_ENV需要为“生产”，因此我们将它们都设置在package.json文件中，而在.env文件中则.env 。

现在运行npm run dev以在开发模式下运行该应用程序。如果要为生产而构建，请运行npm run build并使用npm start应用npm start

了解源代码

使用Nuxt构建Vue.js应用程序的一个主要好处是，对Nuxt持坚定态度。因此，您可以跳入任何Nuxt项目并在其中找到熟悉的结构。

最重要的文件是nuxt.config.js 。您会发现从plugins/文件夹导入的三个插件，用于Buefy，Stripe和Cosmic JS。

import Vue from 'vue' ;
import VueStripeCheckout from 'vue-stripe-checkout' ;

const options = {
  key : process.env.STRIPE_PUBLIC_KEY,
  image : 'https://cosmicjs.com/images/logo.svg' ,
  locale : 'auto' ,
  currency : 'USD' ,
  billingAddress : true ,
  panelLabel : 'Pay {{amount}}'
}

Vue.use(VueStripeCheckout, options);

我们正在使用vue-stripe-checkout作为Stripe的checkout元素的包装器。访问Stripe文档以了解可用选项。

必须在env部分中定义需要在客户端使用的任何环境变量，并且在scripts部分中还将链接带区脚本。

pages/文件夹包含主页和购物车页面。购物车页面中的checkout方法处理带区签出。基本上，我们正在做的是将由checkout组件生成的令牌和其他标识详细信息发送到应用服务器。检出vue-stripe-checkout软件包以了解有关用法的更多信息。

对于一个简单的Nuxt应用程序，我们只能将服务器仅用于SSR，并将所有代码交付给客户端。但是在这种情况下，我们需要在服务器中单独处理带区检出。在server/文件夹中，我们在index.js文件中有Express服务器设置，在api/index.js文件中有一个路由处理程序。我们将首先使用stripe.customers.create函数在Stripe中创建一个客户，然后使用stripe.charges.create函数进行收费。

查看https://stripe.com/docs/checkout/express以了解有关实施的更多信息。

付款成功后，我们会将订单添加到Cosmic JS Bucket的“订单”对象类型下。

let content = ''
items.forEach( item => {
  content+= ` ${item.title} x ${item.count} , `
})
const params = {
  type_slug : 'orders' ,
  title : name,
  content : content,
  metafields : [
    {
      key : 'Address' ,
      type : 'text' ,
      value : address
    },
    {
      key : 'City' ,
      type : 'text' ,
      value : city
    }
  ]
}
cosmic.addObject(params).then( data => {
  ...
}).catch( err => {
  ...
})