Javascript Shopping App

minio_JS1

本示例将会指导你如何构建一个使用Minio Server做存储服务的简单的Node.js的购物APP。我们将使用Minio Javascript Client SDK来获取Minio Server上的应用图片资源。

你可以通过这里获取完整的代码,代码是以Apache 2.0 License发布的。

1. 前提条件

3. 安装

按照下面所示获取本示例的代码,然后运行npm install来安装express,handlebars和minio node-modules。

minio-store.js将做为我们app的入口。

  1. git clone https://github.com/minio/minio-js-store-app
  2. cd minio-js-store-app
  3. npm install

4. 设置存储桶

  • 我们已经创建了一个公开的Minio Server(https://play.minio.io:9000) 供大家进行开发和测试。Minio Client mc已经预设好和play server的配置。下载mc来执行下面的操作。调用mc mb命令,在play.minio.io上创建一个名叫minio-store的存储桶。更多关于mc mb命令的细节,请参考这里

mc mb play/minio-store

  • 使用mc policy命令可以将存储桶设为可公开读写。更多关于mc policy命令的细节,请参考这里

  • mc policy public play/minio-store

  • 使用mc cp命令,将应用的图片上传到minio-store这个存储桶中。更多关于mc cp命令的细节,请参考这里

mc cp ~/Downloads/Product-1.jpg play/minio-store/
mc cp ~/Downloads/Product-2.jpg play/minio-store/
mc cp ~/Downloads/Product-3.jpg play/minio-store/
mc cp ~/Downloads/Product-4.jpg play/minio-store/

注意 : 我们已经在play.minio.io上创建了minio-store这个存储桶,并将本示例用到的资源上传上去到这个存储桶了。

5. 连接Minio Server

minio-store.js文件,使用require引入minio依赖,并使用play server的endpoint,端口和认证信息初使化minioClient

  1. varMinio=require('minio');
  2. var minioClient =newMinio.Client({
  3. endPoint:'play.minio.io',
  4. port:9000,
  5. accessKey:'Q3AM3UQ867SPQQA43P2F',
  6. secretKey:'zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG'
  7. });

注意 : 如果是使用本地的Minio Server,需要在上面的代码中加上secure: false,

6. 调用listObjects

在minio-store.js中设置好'/'的路由。调用listObjects方法,获取minio-store存储桶中所有的文件。listObjects返回商品的url,这些url被push到assets这个数组中,然后将assets这个数组传给home.handlebars这个view中。

  1. var minioBucket ='minio-store'
  2. app.get('/',function(req, res){
  3. var assets =[];
  4. var objectsStream = minioClient.listObjects(minioBucket,'',true)
  5. objectsStream.on('data',function(obj){
  6. console.log(obj);
  7. // Lets construct the URL with our object name.
  8. var publicUrl = minioClient.protocol +'//'+ minioClient.host +':'+ minioClient.port +'/'+ minioBucket +'/'+ obj.name
  9. assets.push(publicUrl);
  10. });
  11. objectsStream.on('error',function(e){
  12. console.log(e);
  13. });
  14. objectsStream.on('end',function(e){
  15. console.log(assets);
  16. // Pass our assets array to our home.handlebars template.
  17. res.render('home',{ url: assets });
  18. });
  19. });

7. 创建view

遍历home.handlebars中的assets_url来渲染商品图片的缩略图。为了简单起见,在本示例中我们没有用到数据库来存储商品的信息。如果你需要的话,你可以将这些信息存到你的数据库中。

  1. <!-- Page Features -->
  2. <divclass="row text-center">
  3. {{#each url}}
  4. <divclass="col-md-3 col-sm-6 hero-feature">
  5. <divclass="thumbnail">
  6. <imgsrc="{{this}}"max-height=200max-width=200alt="">
  7. <divclass="caption">
  8. <h3>Product Name</h3>
  9. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  10. <p><ahref="#"class="btn btn-primary">Buy Now!</a><ahref="#"class="btn btn-default">More Info</a></p>
  11. </div>
  12. </div>
  13. </div>
  14. {{/each}}
  15. </div>

8. 运行APP

完整的代码在这里。执行下列操作来启动app server。

  1. git clone https://github.com/minio/minio-js-store-app
  2. cd minio-js-store-app
  3. npm install
  4. node minio-store.js

访问http://localhost:3000 来查看这个app。

9. 了解更多。

原文: https://docs.minio.io/cn/javascript-shopping-app.html