应用实战|微信小程序开发示例之在线商城

这篇具有很好参考价值的文章主要介绍了应用实战|微信小程序开发示例之在线商城。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

“超能力”数据库~拿来即用,应用开发人员再也不用为撰写API而发愁。MemFire Cloud 为开发者提供了简单易用的云数据库(表编辑器、自动生成API、SQL编辑器、备份恢复、托管运维),很大地降低开发者的使用门槛。

环球商城是一个可以查看全球最新精品及不同分类商品的商城类小程序。商城类小程序后端服务使用了 MemFire Cloud,其中使用到的 MemFire Cloud 功能包括:

  • 云数据库:存储商城小程序数据表的信息。
  • 即时API:创建数据表时会自动生成 API。
  • 云存储:存储商品的图片。

应用实战|微信小程序开发示例之在线商城

创建应用

目的:通过创建的一个 MemFire Cloud 应用来获得数据库、云存储等一系列资源,并将获得该应用专属的API访问链接和访问密钥,用户可以轻松的调用API接口与以上资源进行交互。

登录https://cloud.MemFiredb.com/auth/login,在“我的应用”页面创建一个新应用

应用实战|微信小程序开发示例之在线商城

创建数据表

第一种:点击进入应用详情页面,在“数据表”页面可视化建表。

第二种:在首页的数据库管理找到该应用的数据库的"SQL查询",用 MemFire Cloud 自带的sql编辑器进行建表。
应用实战|微信小程序开发示例之在线商城

1.创建type_list表

在数据表页面,点击“新建数据表”,创建type_list表。type_list表主要记录商品种类的列表,表结构字段如下:

名称 类型 描述
id int8 主键,自增,唯一标识ID
smallpic text 图片
created_at timetamptz 创建时间
typeName text 类型名称
if_choice text 是否是精品

应用实战|微信小程序开发示例之在线商城

sql操作如下:

CREATE TABLE "public"."type_list" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-18 15:18:52.594141+08'::timestamp with time zone ,
  "smallpic" TEXT NOT NULL,
  "typeName" TEXT NULL,
  "if_choice" BIGINT NULL,
  CONSTRAINT "venues_list_pkey" PRIMARY KEY ("id")
);

「数据表创建完后需在表中手动插入几条商品种类数据 ,如下图」

INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('1', '2022-10-18 15:19:07.248+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/包包.png', '包包', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('2', '2022-10-18 15:22:38.515+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/化妆品.png', '化妆品', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('3', '2022-10-18 15:23:00.302+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/宝宝.png', '宝宝用品', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('4', '2022-10-18 15:24:00.343+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/食物.png', '食物', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('5', '2022-10-18 15:24:30.226+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/营养保健.png', '保健品', '1');
INSERT INTO "public"."type_list" ("id", "created_at", "smallpic", "typeName", "if_choice") VALUES ('6', '2022-10-18 15:24:50.961+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/T-恤.png', '服装', '1');

2.创建brand_list表

在数据表页面,点击“新建数据表”,创建brand_list表。brand_list表主要记录品牌种类的列表,表结构字段如下:

名称 类型 描述
id int8 主键,自增,唯一标识ID
type_id int8 商品类型id
created_at timetamptz 创建时间
pic text 商品类型图片
logo text 商品类型标志图片
chinesename text 名称
brief text 简短的概述
minprice int8 最低价格

应用实战|微信小程序开发示例之在线商城

sql操作如下:

CREATE TABLE "public"."brand_list" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-18 17:53:30.080335+08'::timestamp with time zone ,
  "type_id" BIGINT NOT NULL,
  "pic" TEXT NOT NULL,
  "logo" TEXT NOT NULL,
  "chinesename" TEXT NOT NULL,
  "brief" TEXT NOT NULL,
  "minprice" TEXT NOT NULL,
  CONSTRAINT "brandList_pkey" PRIMARY KEY ("id")
);

「数据表创建完后需在表中手动插入几条品牌种类数据 ,如下图」

INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('1', '2022-10-18 17:54:36.628+08', '1', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/fotojet-6-1585018811.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN010Wk2So2Hf7TtpN9Om_!!1893149177.jpg_240x240q75.jpg', '包包', '一个新皮包啊哦爹和地位服务IE成本价', '1000');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('2', '2022-10-18 17:55:35.659+08', '2', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/images.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/images.jpg', '化妆品', '化妆品化妆品化妆品化妆品化妆品化妆品化妆品', '200');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('3', '2022-10-18 17:56:20.633+08', '3', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/img-e8e4c376a47b919e3e259e731ece9c1e.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/img-e8e4c376a47b919e3e259e731ece9c1e.jpg', '婴幼儿', '婴幼儿婴幼儿婴幼儿婴幼儿婴幼儿', '232');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('4', '2022-10-18 17:57:04.387+08', '3', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/下载.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/下载.jpg', '宝宝用品', '宝宝用品宝宝用品宝宝用品宝宝用品宝宝用品宝宝用品', '211');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('5', '2022-10-20 16:34:06.057+08', '1', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN018pvNOi2FPt4m2mswo_!!698598873.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN018pvNOi2FPt4m2mswo_!!698598873.jpg_468x468q75.jpg', '南风包包', '南风Chio2nd 往事邮差包包女秋冬2022新款手提包高级感通勤斜挎包', '210');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('6', '2022-10-20 17:15:22.46+08', '2', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01dIh17s2JOkYPRCmz7_!!0-item_pic.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01dIh17s2JOkYPRCmz7_!!0-item_pic.jpg_468x468q75.jpg', '法国兰蔻', '法国兰蔻', '300');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('7', '2022-10-20 17:16:34.768+08', '2', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01fAe4Kh25GaseMoh6K_!!0-item_pic.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01fAe4Kh25GaseMoh6K_!!0-item_pic.jpg_468x468q75.jpg', '巴黎欧莱雅', '巴黎欧莱雅', '300');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('8', '2022-10-20 19:04:15.83+08', '3', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01GEWGnk1KJ53eKWAgJ_!!0-item_pic.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01GEWGnk1KJ53eKWAgJ_!!0-item_pic.jpg_468x468q75.jpg', '迪士尼婴儿', '迪士尼婴儿洗澡盆宝宝浴盆', '99');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('9', '2022-10-20 19:05:30.618+08', '3', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01YWFZJO1G8liNRYVaP_!!0-item_pic.jpg_468x468q75.jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01YWFZJO1G8liNRYVaP_!!0-item_pic.jpg_468x468q75.jpg', 'modomoma婴儿', 'modomoma婴儿礼盒新生儿', '328');
INSERT INTO "public"."brand_list" ("id", "created_at", "type_id", "pic", "logo", "chinesename", "brief", "minprice") VALUES ('10', '2022-10-21 11:32:33.24+08', '4', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (1).jpg', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (1).jpg', '进口饮品', '进口饮品很好喝很好喝', '10');

3.创建goods_by_type_brand表

在数据表页面,点击“新建数据表”,创建brand_list表。brand_list表主要记录商品详情信息,表结构字段如下:

名称 类型 描述
id int8 主键,自增,唯一标识ID
picurl text 商品图片
created_at timetamptz 创建时间
country text 来自国家
bigname text 商品名称
title text 商品标题
ourprice int8 最终价格
marketprice int8 实际价格
discount int8 折扣
brand_id int8 属于的品牌id
detail text 详情
boutique int8 是否是精品商品
swiper int8 是否是头图轮播商品

应用实战|微信小程序开发示例之在线商城
sql操作如下:

CREATE TABLE "public"."goods_by_type_brand" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-18 18:15:16.563781+08'::timestamp with time zone ,
  "picurl" TEXT NOT NULL,
  "country" TEXT NOT NULL,
  "bigname" TEXT NOT NULL,
  "title" TEXT NOT NULL,
  "ourprice" BIGINT NOT NULL,
  "marketprice" BIGINT NOT NULL,
  "discount" BIGINT NOT NULL,
  "brand_id" BIGINT NULL,
  "detail" TEXT NULL,
  "boutique" BIGINT NULL,
  "swiper" BIGINT NULL,
  CONSTRAINT "goods_by_type_brand_pkey" PRIMARY KEY ("id")
);

「数据表创建完后需在表中手动插入几条商品详情数据 ,如下图」

INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('1', '2022-10-18 18:18:56.61+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/fotojet-6-1585018811.jpg', '意大利', '米兰', '时尚包包', '2100', '4500', '8', '1', '魅力时尚违法违法为成为', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('2', '2022-10-18 18:21:16.866+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/images.jpg', '法国巴黎', '欧莱雅', '欧莱雅的文档', '500', '3210', '5', '2', '而访问份额为范文芳为分为非我方违法', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('3', '2022-10-18 18:22:33.05+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/img-e8e4c376a47b919e3e259e731ece9c1e.jpg', '日本', '日本东芝', '大青蛙多群无多', '21', '333', '4', '3', '人人若干个头条号', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('4', '2022-10-18 18:23:53.211+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/venuesList/下载.jpg', '中国', '教育局', '个人股', '12', '323', '5', '3', '富海云天教育统计', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('5', '2022-10-18 18:38:19.857+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (1).jpg', '新西兰', '的文档', '发热', '434', '656', '6', '2', '合议庭样5月5', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('7', '2022-10-18 18:40:06.259+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (3).jpg', '日本', '日本原粮米酒', '带我去多', '32', '434', '4', '2', '有还要还要', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('8', '2022-10-18 18:40:47.243+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (4).jpg', '韩国', '好吃调味酱', '单位的翁', '45', '777', '5', '2', '个人人', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('9', '2022-10-20 16:36:15+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN010Wk2So2Hf7TtpN9Om_!!1893149177.jpg_240x240q75.jpg', '韩国', 'cassile卡思乐斜挎包', 'cassile卡思乐斜挎包', '230', '420', '8', '1', 'cassile卡思乐斜挎包女2022新款牛仔链条腋下包大容量通勤流浪包', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('10', '2022-10-20 16:37:32.364+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN018pvNOi2FPt4m2mswo_!!698598873.jpg_468x468q75.jpg', '日本', '南风Chio2nd 往事邮差包包', '南风Chio2nd 往事邮差包包', '321', '324', '9', '1', '南风Chio2nd 往事邮差包包女秋冬2022新款手提包高级感通勤斜挎包', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('11', '2022-10-20 16:41:39.937+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01I4vTFX1Tamw3fWWA6_!!2210991072399.jpg_468x468q75.jpg', '韩国', '草莓熊正版迪士尼毛绒包包', '草莓熊正版迪士尼毛绒包包', '32', '54', '8', '1', '草莓熊正版迪士尼毛绒包包女大容量托特包可爱大学生上课包通勤包', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('12', '2022-10-20 16:43:33.536+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01mb9moq2FPt4U06e9I_!!698598873.jpg_468x468q75.jpg', '米兰', '南风Chio2nd 兔子城堡手提包包', '南风Chio2nd 兔子城堡手提包包', '321', '545', '8', '5', '南风Chio2nd 兔子城堡手提包包女2022新款高级感通勤单肩斜挎包', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('13', '2022-10-20 16:44:32.072+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01xiSvAN1SfXR6JNhJs_!!0-item_pic.jpg_468x468q75.jpg', '美国', 'UZV2022夏季新款潮牌包包', 'UZV2022夏季新款潮牌包包', '431', '564', '8', '5', 'UZV2022夏季新款潮牌包包', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('14', '2022-10-20 16:45:35.407+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01yG5Ugm2FPt43MGZpN_!!698598873.jpg_400x400.jpg', '缅甸', '秋冬高级质感复古小包包', '秋冬高级质感复古小包包', '65', '76', '9', '5', '秋冬高级质感复古小包包女2022新款百搭手提包小众设计单肩斜挎包', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('15', '2022-10-20 16:46:17.607+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01zaxWGy1fGt82DR7FU_!!2259593980.jpg_468x468q75.jpg', '日本', 'TOUTOU2022秋冬新款小众设计饼干包', 'TOUTOU2022秋冬新款小众设计饼干包', '87', '213', '7', '5', 'TOUTOU2022秋冬新款小众设计饼干包编织方包百搭胸包单肩斜挎包女', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('16', '2022-10-20 17:22:41.372+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01pmOs1R2JOkYYcb7SQ_!!0-item_pic.jpg_468x468q75.jpg', '法国', '兰蔻发光眼霜 秋冬保湿淡纹淡黑眼圈 修护眼周', '兰蔻发光眼霜 秋冬保湿淡纹淡黑眼圈 修护眼周', '432', '564', '8', '6', '【双11抢先加购】兰蔻发光眼霜 秋冬保湿淡纹淡黑眼圈 修护眼周', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('17', '2022-10-20 17:24:18.171+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01dIh17s2JOkYPRCmz7_!!0-item_pic.jpg_468x468q75.jpg', '法国', '兰蔻粉金小蛮腰唇膏 持久显色口红 299羊绒焦糖', '兰蔻粉金小蛮腰唇膏 持久显色口红 299羊绒焦糖', '310', '320', '9', '6', '【双11抢先加购】兰蔻粉金小蛮腰唇膏 持久显色口红 299羊绒焦糖', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('18', '2022-10-20 17:25:34.059+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01hhWbdQ1Pf8D5WkMGu_!!3457371867.jpg_468x468q75.jpg', '法国', '兰蔻大粉水400ml爽肤水补水保湿旗舰店官网免税正品㊣', '兰蔻大粉水400ml爽肤水补水保湿旗舰店官网免税正品㊣', '168', '230', '8', '6', '【双11抢先加购】兰蔻大粉水400ml爽肤水补水保湿旗舰店官网免税正品㊣', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('19', '2022-10-20 17:26:41.562+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01fxLvcN2JOkYQh0njV_!!0-item_pic.jpg_468x468q75.jpg', '法国', '兰蔻持妆粉底液 混油皮不闷痘不脱妆 持久控油', '兰蔻持妆粉底液 混油皮不闷痘不脱妆 持久控油', '430', '500', '8', '6', '【双11抢先加购】兰蔻持妆粉底液 混油皮不闷痘不脱妆 持久控油', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('20', '2022-10-20 17:27:36.495+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN011MvGce2JOkYfeWFAM_!!0-item_pic.jpg_468x468q75.jpg', '法国', '兰蔻菁纯眼霜 秋冬保湿滋润抗皱抗老化淡纹紧致', '兰蔻菁纯眼霜 秋冬保湿滋润抗皱抗老化淡纹紧致', '1150', '1250', '8', '6', '【双11抢先加购】兰蔻菁纯眼霜 秋冬保湿滋润抗皱抗老化淡纹紧致', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('21', '2022-10-20 17:28:49.927+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01fAe4Kh25GaseMoh6K_!!0-item_pic.jpg_468x468q75.jpg', '巴黎', '欧莱雅第二代紫熨斗眼霜补水保湿抗皱紧致淡纹', '欧莱雅第二代紫熨斗眼霜补水保湿抗皱紧致淡纹', '289', '300', '0', '7', '【双11抢先加购】欧莱雅第二代紫熨斗眼霜补水保湿抗皱紧致淡纹', '1', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('22', '2022-10-20 17:30:06.623+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01IbSRWP25GaspAcnzM_!!0-item_pic.jpg_468x468q75.jpg', '巴黎', '欧莱雅复颜水乳套装妈妈护肤品紧致抗老化抗皱', '欧莱雅复颜水乳套装妈妈护肤品紧致抗老化抗皱', '559', '700', '8', '7', '【双11抢先加购】欧莱雅复颜水乳套装妈妈护肤品紧致抗老化抗皱', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('23', '2022-10-20 17:31:40.76+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01GLe4p225GaslAnCvE_!!0-item_pic.jpg_468x468q75.jpg', '巴黎', '欧莱雅小蜜罐滋润版保湿面霜紧致抗老化抗皱补水', '欧莱雅小蜜罐滋润版保湿面霜紧致抗老化抗皱补水', '329', '379', '8', '7', '【双11抢先加购】欧莱雅小蜜罐滋润版保湿面霜紧致抗老化抗皱补水', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('24', '2022-10-20 17:33:53.398+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN019XzAwe25GasuYKUzD_!!0-item_pic.jpg_468x468q75.jpg', '巴黎', '欧莱雅复颜玻色因水乳套装护肤补水保湿抗皱紧致', '欧莱雅复颜玻色因水乳套装护肤补水保湿抗皱紧致', '279', '399', '8', '7', '【双11抢先加购】欧莱雅复颜玻色因水乳套装护肤补水保湿抗皱紧致', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('25', '2022-10-20 19:06:30.473+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01GEWGnk1KJ53eKWAgJ_!!0-item_pic.jpg_468x468q75.jpg', '英国', '迪士尼婴儿洗澡盆宝宝浴盆', '迪士尼婴儿洗澡盆宝宝浴盆', '99', '129', '8', '8', '迪士尼婴儿洗澡盆宝宝浴盆可折叠新生儿浴桶大号坐躺小孩幼童用品 99 129', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('26', '2022-10-20 19:08:30.502+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01zwijPA25ElHm221mo_!!83727495.jpg_468x468q75.jpg', '英国', '迪士尼婴儿用品大全', '迪士尼婴儿用品大全', '138', '168', '8', '8', '迪士尼婴儿用品大全宝宝初生满月礼盒高档刚出生的新生儿见面礼物 138 168 ', '1', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('27', '2022-10-20 19:12:08.665+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01JFSOEr1oLJSTJ80a2_!!2208581615208.jpg_468x468q75.jpg', '法国', '迪士尼新生的儿见面礼初生婴', '迪士尼新生的儿见面礼初生婴', '138', '148', '9', '8', '迪士尼新生的儿见面礼初生婴儿礼盒用品大全玩具套装满月宝宝礼物 138 148', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('28', '2022-10-20 19:18:48.176+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01YWFZJO1G8liNRYVaP_!!0-item_pic.jpg_468x468q75.jpg', '德国', 'modomoma婴儿礼盒新生儿', 'modomoma婴儿礼盒新生儿', '328', '248', '9', '9', 'modomoma婴儿礼盒新生儿用品初生虎宝宝衣服连体衣满月礼物见面礼', '0', '1');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('29', '2022-10-20 19:20:31.828+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01ctrThQ1G8lez98nbz_!!0-item_pic.jpg_468x468q75.jpg', '德国', 'modomoma新生儿用品婴儿礼盒', 'modomoma新生儿用品婴儿礼盒', '426', '448', '9', '9', 'modomoma新生儿用品婴儿礼盒春秋初生男女宝宝纯棉长袖无骨爬爬服', '1', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('30', '2022-10-20 19:21:23.415+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/O1CN01dP0xis1G8leYnrfmK_!!0-item_pic.jpg_468x468q75.jpg', '德国', 'modomoma新生儿用品婴儿礼盒秋', 'modomoma新生儿用品婴儿礼盒秋', '388', '408', '9', '9', ' modomoma新生儿用品婴儿礼盒秋冬公主女宝初生见面礼满月周岁礼物', '0', '0');
INSERT INTO "public"."goods_by_type_brand" ("id", "created_at", "picurl", "country", "bigname", "title", "ourprice", "marketprice", "discount", "brand_id", "detail", "boutique", "swiper") VALUES ('31', '2022-10-21 11:35:32.69+08', 'https://cd71ps25g6h3ij26om3g.baseapi.memfiredb.com/storage/v1/object/public/choiceList/images (1).jpg', '日本', '绿茶牌绿色饮品', '绿茶牌绿色饮品', '8', '10', '8', '10', '绿茶牌绿色饮品添加维生素婴儿可以喝', '0', '0');

4.创建cart_list表

在数据表页面,点击“新建数据表”,创建cart_list表。cart_list表主要记录购物车的列表,表结构字段如下:

名称 类型 描述
id int8 主键,自增,唯一标识ID
goods_id int8 商品id
created_at timetamptz 创建时间
number int8 数量
list_pic_url text 商品图片
goods_name text 商品名称
retail_price int8 商品价格
isChecked int8 是否被选中

sql操作如下:

CREATE TABLE "public"."cart_list" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-19 15:34:24.620926+08'::timestamp with time zone ,
  "goods_id" BIGINT NOT NULL,
  "number" BIGINT NOT NULL,
  "list_pic_url" TEXT NOT NULL,
  "goods_name" TEXT NOT NULL,
  "retail_price" BIGINT NOT NULL,
  "isChecked" BIGINT NULL,
  CONSTRAINT "cart_list_pkey" PRIMARY KEY ("id")
);

5.创建order_list表

在数据表页面,点击“新建数据表”,创建order_list表。order_list表主要记录商品订单的列表,表结构字段如下:

名称 类型 描述
id int8 主键,自增,唯一标识ID
order_detail text 商品详情信息的json
created_at timetamptz 创建时间

sql操作如下:

CREATE TABLE "public"."order_list" ( 
  "id" SERIAL,
  "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT '2022-10-20 10:58:46.973755+08'::timestamp with time zone ,
  "order_detail" TEXT NOT NULL,
  CONSTRAINT "order_list_pkey" PRIMARY KEY ("id")
);

创建存储桶

创建云存储的存储桶,用来存储商城小程序所需要的商品图片,涉及操作包括:

1.创建一个存储桶goodsImgList
在该应用的云存储导航栏,点击“新建Bucket”按钮,创建存储桶goodsImgList,并选为公开。

应用实战|微信小程序开发示例之在线商城

允许下载图片

选中存储桶goodsImgList,切换到权限设置栏,点击“新规则”按钮,弹出策略编辑弹框,选择“自定义”,如下图所示:

应用实战|微信小程序开发示例之在线商城

选择SELECT操作,输入策略名称,点击“生成策略”按钮,如下图所示。

应用实战|微信小程序开发示例之在线商城

允许上传图片

选中存储桶goodsImgList,切换到权限设置栏,点击“新规则”按钮,弹出策略编辑弹框,选择“自定义”,如下图所示:

应用实战|微信小程序开发示例之在线商城

选择SELECT操作,输入策略名称,点击“生成策略”按钮,如下图所示。

应用实战|微信小程序开发示例之在线商城

查看结果:

应用实战|微信小程序开发示例之在线商城

注册商城小程序

以上是我们在MemFire Cloud上配置的全部步骤,接下来是在微信开发者工具上操作了。

「如果您还未注册过商城小程序,请参考官方步骤注册商城小程序(只需要通过您的邮箱注册一个商城小程序获得一个appid,然后下载一个微信开发工具即可)」

下载代码

https://github.com/LucaRao/globaltown.git

「Node.js (>=14.x <=16.x)」

开发环境配置

选择目录是下载好的商城小程序项目的目录,AppID为您在微信公众平台注册商城小程序获得的专属appid。

应用实战|微信小程序开发示例之在线商城

在右侧详情里面的本地设置把“使用npm模块”和“不校验合法域名”勾上。

应用实战|微信小程序开发示例之在线商城

打开终端,在项目根目录下执行如下命令 。

npm init
npm install

接下来,下载商城小程序需要的MemFire Cloud的微信商城小程序SDK。

npm install supabase-wechat-stable

这一步npm就构建完成了,我们需要的依赖也已经下载好了,根目录下会多出两个文件,如下图。

应用实战|微信小程序开发示例之在线商城

获取 API密钥

接下来需要创建一个可以访问应用程序数据的客户端,商城小程序使用了Supabase 微信小程序SDK包,使用他生态里提供的功能(登录、注册、增删改查等)去进行交互。创建一个可以访问微信小程序数据的客户端需要接口的地址(URL)和一个数据权限的令牌(ANON_KEY),我们需要去应用的概览里面去获取这两个参数然后配置到lib/supabase.ts里面去。

lib/supabase.js

import { createClient } from 'supabase-wechat-stable'
const url = ""
const key = ""

export const supabase = createClient(url, key)

回到MemFire Cloud首页,在应用/概括页面,获取服务地址以及token信息,只需要从总览中获取URL接口地址和anon的密钥。

应用实战|微信小程序开发示例之在线商城

Anon(公开)密钥是客户端API密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。

注意:service_role密钥可以绕过任何安全策略完全访问您的数据。这些密钥必须保密,并且要在服务器环境中使用,绝不能在客户端或浏览器上使用。 在后续示例代码中,需要提供supabaseUrl和supabaseKey。

编译商城小程序

应用实战|微信小程序开发示例之在线商城文章来源地址https://www.toymoban.com/news/detail-501489.html

到了这里,关于应用实战|微信小程序开发示例之在线商城的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程

    校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程 完整代码下载地址:校园二手书商城源代码基于微信小程序云开发 长话短说,下面直接说配置流程 1、下载导入 直接下载到本地,然后导入开发者工具 最近墙的厉害,也可使用蓝奏云下载 ht

    2023年04月24日
    浏览(72)
  • 微信小程序在线商城购物系统设计与实现

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年02月04日
    浏览(48)
  • 基于微信小程序的在线商城设计(后台PHP)

    目 录 摘 要 I ABSTRACT II 一、前言 1 1.1 研究的背景、目的和意义 1 1.2 国内外文献综述 2 1.3 研究的主要内容 3 二、系统相关技术研究 5 2.1 微信小程序 5 2.2 ThinkPHP 5 框架 7 2.3 RESTFul API 8 2.4 微信支付技术 10 2.5 MySQL数据库 12 三、需求分析与可行性研究 14 3.1 市场定位分析 14 3.2 可行

    2024年02月09日
    浏览(45)
  • Axure在线购物商城小程序原型图,抖音商城垂直电商APP实战案例

    页面数量:共 60+ 页 兼容软件:Axure RP 9/10,不支持低版本 应用领域:品牌自营商城、垂直电商、短视频社区商城 作品申明:页面内容仅用于功能演示,无实际功能 本作品为品牌自营在线商城小程序的原型图,属于垂直电商解决方案(以某药业为例);目前已实现功能包括:

    2024年02月02日
    浏览(37)
  • Web实战丨基于django+html+css的在线购物商城

    本期内容:基于Django+HTML+CSS+的在线购物商城 实验环境: vscode或pycharm python(3.11.4) django celery dj-static 代码下载地址:https://download.csdn.net/download/m0_68111267/88718630 使用Django+HTML+CSS开发一个在线购物商城系统,该在线购物商城分为四大部分:购物界面、购物车、订单界面以及后台。

    2024年02月02日
    浏览(128)
  • springboot框架开发的多商家在线商城系统

    基于springboot开发的程序,系统以Java作为编程语言,采用Mysql数据库作为后台数据库。它是基于Browser/Server结构下形成的数据驱动的Web应用程序。前端以jsp页面展示。系统分为管理员和商家、普通用户三大功能角色。 功能如下: 主页:有用户登录和商品搜索与浏览等功能 用户注

    2023年04月08日
    浏览(52)
  • 微信小程序毕业设计作品成品(39)微信小程序在线购物商城系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(49)
  • 微信小程序毕业设计作品成品(60)微信小程序网上在线购物商城系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(61)
  • 微信小程序毕业设计作品成品(78)微信小程序仿叮咚在线买菜商城系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(42)
  • 计算机团队毕业设计:JAVA在线购物商城系统+微信小程序系统设计与实现

    本次选用JAVA进行在线购物商城系统团队毕业设计开发,包含:WEB网站系统+微信小程序系统。 开发操作系统:windows10 + 8G内存 + 500G WEB开发环境:JDK1.8 + Tomcat8 WEB开发语言:Java WEB开发框架:springboot WEB模板引擎:Thymeleaf WEB常规技术:html + css +javascript WEB开发工具:Idea 数据库:

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包