菜谱分享网站微信小程序开发说明(1)-介绍与运行

菜谱分享网站微信小程序开发说明(1)-介绍与运行

此项目是作为课设的小项目,实现的功能比较简单,可以入门练手~~也可以参考作为课设

使用技术栈

  • 微信小程序原生框架
  • Spring Boot + MyBatis
  • MySQL

项目地址

项目分为微信小程序端项目和后端项目,项目托管于Gitee

可以选择Gitee直接下载,后者使用Git的clone命令,如果你本地没有安装Git,可以参考我的这篇文章《写给小白看的Git的安装配置和使用》

如何运行

数据库准备

首先需要创建对应的数据库,数据库名称 gourmet,字符集:utf8mb4,排序规则:utf8mb4_general_ci

image-20201008191326317

复制运行下面SQL语句创建表和测试数据

/*
 Navicat Premium Data Transfer

 Source Server         : 本地
 Source Server Type    : MySQL
 Source Server Version : 80011
 Source Host           : localhost:3306
 Source Schema         : gourmet

 Target Server Type    : MySQL
 Target Server Version : 80011
 File Encoding         : 65001

 Date: 24/11/2020 09:24:23
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for gourmet_classify
-- ----------------------------
DROP TABLE IF EXISTS `gourmet_classify`;
CREATE TABLE `gourmet_classify`  (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '主键,自增',
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '分类名称',
  `parent_id` int(10) UNSIGNED NULL DEFAULT 0 COMMENT '父级分类id',
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `fore_parentid`(`parent_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 40 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of gourmet_classify
-- ----------------------------
INSERT INTO `gourmet_classify` VALUES (2, '肉类', 0);
INSERT INTO `gourmet_classify` VALUES (3, '蛋类', 0);
INSERT INTO `gourmet_classify` VALUES (4, '奶类', 0);
INSERT INTO `gourmet_classify` VALUES (5, '鱼类', 0);
INSERT INTO `gourmet_classify` VALUES (6, '水产', 0);
INSERT INTO `gourmet_classify` VALUES (7, '蔬菜', 0);
INSERT INTO `gourmet_classify` VALUES (8, '豆类', 0);
INSERT INTO `gourmet_classify` VALUES (9, '果品类', 0);
INSERT INTO `gourmet_classify` VALUES (10, '药食', 0);
INSERT INTO `gourmet_classify` VALUES (11, '菜式', 0);
INSERT INTO `gourmet_classify` VALUES (12, '菜系', 0);
INSERT INTO `gourmet_classify` VALUES (13, '烘焙', 0);
INSERT INTO `gourmet_classify` VALUES (14, '其他', 0);
INSERT INTO `gourmet_classify` VALUES (15, '猪肉', 2);
INSERT INTO `gourmet_classify` VALUES (16, '排骨', 2);
INSERT INTO `gourmet_classify` VALUES (17, '猪肚', 2);
INSERT INTO `gourmet_classify` VALUES (18, '五花肉', 2);
INSERT INTO `gourmet_classify` VALUES (19, '猪肝', 2);
INSERT INTO `gourmet_classify` VALUES (20, '牛肉', 2);
INSERT INTO `gourmet_classify` VALUES (21, '牛腩', 2);
INSERT INTO `gourmet_classify` VALUES (22, '牛排', 2);
INSERT INTO `gourmet_classify` VALUES (23, '牛尾', 2);
INSERT INTO `gourmet_classify` VALUES (24, '羊肉', 2);
INSERT INTO `gourmet_classify` VALUES (25, '羊排', 2);
INSERT INTO `gourmet_classify` VALUES (26, '羊肝', 2);
INSERT INTO `gourmet_classify` VALUES (27, '羊蝎子', 2);
INSERT INTO `gourmet_classify` VALUES (28, '鸡肉', 2);
INSERT INTO `gourmet_classify` VALUES (29, '鸭肉', 2);
INSERT INTO `gourmet_classify` VALUES (30, '肉制品', 2);
INSERT INTO `gourmet_classify` VALUES (31, '其他肉类', 2);
INSERT INTO `gourmet_classify` VALUES (32, '鸡蛋', 3);
INSERT INTO `gourmet_classify` VALUES (33, '鸭蛋', 3);
INSERT INTO `gourmet_classify` VALUES (34, '鹌鹑蛋', 3);
INSERT INTO `gourmet_classify` VALUES (35, '咸鸭蛋', 3);
INSERT INTO `gourmet_classify` VALUES (36, '松花蛋', 3);
INSERT INTO `gourmet_classify` VALUES (37, '鹅蛋', 3);
INSERT INTO `gourmet_classify` VALUES (38, '奶酪', 4);
INSERT INTO `gourmet_classify` VALUES (39, '黄油', 4);
INSERT INTO `gourmet_classify` VALUES (40, '奶油', 4);

-- ----------------------------
-- Table structure for gourmet_materials
-- ----------------------------
DROP TABLE IF EXISTS `gourmet_materials`;
CREATE TABLE `gourmet_materials`  (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '主键,自增',
  `menu_id` int(11) UNSIGNED NOT NULL COMMENT '外键(菜谱主表的id)',
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '材料名称',
  `quantity` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '用量',
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `fk_menu_materials`(`menu_id`) USING BTREE,
  CONSTRAINT `fk_menu_materials` FOREIGN KEY (`menu_id`) REFERENCES `gourmet_menu` (`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE = InnoDB AUTO_INCREMENT = 29 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of gourmet_materials
-- ----------------------------
INSERT INTO `gourmet_materials` VALUES (22, 1, '葱花', '1根');
INSERT INTO `gourmet_materials` VALUES (23, 1, '花椒', '适量');
INSERT INTO `gourmet_materials` VALUES (24, 1, '酱油', '1勺');
INSERT INTO `gourmet_materials` VALUES (25, 1, '醋', '2勺');
INSERT INTO `gourmet_materials` VALUES (26, 1, '猪肉', '1头');
INSERT INTO `gourmet_materials` VALUES (29, 11, '大白菜', '10棵');

-- ----------------------------
-- Table structure for gourmet_menu
-- ----------------------------
DROP TABLE IF EXISTS `gourmet_menu`;
CREATE TABLE `gourmet_menu`  (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '主键,自增',
  `img` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '菜谱图片url',
  `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '菜谱标题',
  `introd` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '菜谱简介',
  `content` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '菜谱内容(html)',
  `nickname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '作者昵称',
  `recommend` tinyint(1) UNSIGNED NOT NULL DEFAULT 0 COMMENT '是否是推荐(首页轮播图)',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 12 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of gourmet_menu
-- ----------------------------
INSERT INTO `gourmet_menu` VALUES (1, 'http://10.178.167.88:3000/api/images/ad521ed1-d793-4dd4-b4a3-ce999aa7dac6.jpg', '测试1猪肉(xiugai)', '这是测试1的简介xiugai', '<h3 wx:nodeid=\"110\"><br wx:nodeid=\"111\"></h3><h3 wx:nodeid=\"114\"><strong wx:nodeid=\"127\">Think&nbsp;Different</strong></h3><p wx:nodeid=\"116\"><span style=\"color: rgb(229, 51, 51);\" wx:nodeid=\"117\">Here’s&nbsp;to&nbsp;the&nbsp;crazy&nbsp;ones.&nbsp;The&nbsp;misfits.&nbsp;The&nbsp;rebels.&nbsp;The&nbsp;troublemakers.&nbsp;The&nbsp;round&nbsp;pegs&nbsp;in&nbsp;the&nbsp;square&nbsp;holes.</span>&nbsp;The&nbsp;ones&nbsp;who&nbsp;see&nbsp;things&nbsp;differently.&nbsp;They’re&nbsp;not&nbsp;fond&nbsp;of&nbsp;rules.&nbsp;And&nbsp;they&nbsp;have&nbsp;no&nbsp;respect&nbsp;for&nbsp;the&nbsp;status&nbsp;quo.&nbsp;You&nbsp;can&nbsp;quote&nbsp;th<span wx:nodeid=\"120\" style=\"color: rgb(229, 102, 0);\">em,&nbsp;disagree&nbsp;with<img src=\"http://kindeditor.net/ke4/attached/W020091124524510014093.jpg\" wx:nodeid=\"141\">&nbsp;them,&nbsp;glorify&nbsp;or&nbsp;vilify&nbsp;them.&nbsp;About&nbsp;the&nbsp;only&nbsp;thing&nbsp;you&nbsp;can’t&nbsp;do&nbsp;is&nbsp;ignore&nbsp;them.&nbsp;Because&nbsp;they&nbsp;change&nbsp;things.&nbsp;They&nbsp;push&nbsp;the&nbsp;human&nbsp;race&nbsp;forward.&nbsp;And&nbsp;while&nbsp;some&nbsp;may&nbsp;see&nbsp;them&nbsp;as&nbsp;the&nbsp;crazy&nbsp;ones,&nbsp;we&nbsp;see&nbsp;genius.&nbsp;Because&nbsp;the&nbsp;people&nbsp;who&nbsp;are&nbsp;crazy&nbsp;enough&nbsp;to&nbsp;think&nbsp;they&nbsp;can&nbsp;change&nbsp;the&nbsp;world,&nbsp;are&nbsp;the&nbsp;ones&nbsp;who&nbsp;do.</span></p><p wx:nodeid=\"134\"><strong wx:nodeid=\"135\"><em wx:nodeid=\"136\">-&nbsp;Apple&nbsp;Inc.</em></strong></p>', 'java.util.Man', 0);
INSERT INTO `gourmet_menu` VALUES (2, 'https://images.pexels.com/photos/5419093/pexels-photo-5419093.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', '测试2', '这是测试2的简介', '这是测试2的内容部分', 'TEST', 1);
INSERT INTO `gourmet_menu` VALUES (3, 'https://images.pexels.com/photos/3464543/pexels-photo-3464543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', '测试3', '这是测试3的简介', '这是测试3的内容部分', 'TEST', 1);
INSERT INTO `gourmet_menu` VALUES (11, 'http://10.178.167.88:3000/api/images/fcbec34b-8350-4548-af98-de8051b71d7c.jpg', '清炒白菜', '可好吃了', '<ul data-checked=\"false\" wx:nodeid=\"119\"><li wx:nodeid=\"104\">杀白菜</li><li wx:nodeid=\"125\">洗白菜</li><li wx:nodeid=\"129\">切白菜</li><li wx:nodeid=\"131\">炒白菜</li><li wx:nodeid=\"132\">吃白菜</li></ul>', 'java.util.Man', 0);

-- ----------------------------
-- Table structure for gourmet_menu_scan
-- ----------------------------
DROP TABLE IF EXISTS `gourmet_menu_scan`;
CREATE TABLE `gourmet_menu_scan`  (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '主键,自增',
  `menu_id` int(10) UNSIGNED NOT NULL COMMENT '外键(菜谱主表的id)',
  `pageviews` bigint(20) UNSIGNED NOT NULL DEFAULT 0 COMMENT '浏览量',
  `favorites` bigint(20) UNSIGNED NOT NULL DEFAULT 0 COMMENT '收藏量',
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `fk_menu_scan`(`menu_id`) USING BTREE,
  CONSTRAINT `fk_menu_scan` FOREIGN KEY (`menu_id`) REFERENCES `gourmet_menu` (`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of gourmet_menu_scan
-- ----------------------------
INSERT INTO `gourmet_menu_scan` VALUES (1, 1, 2528, 21);
INSERT INTO `gourmet_menu_scan` VALUES (2, 2, 4803, 232);
INSERT INTO `gourmet_menu_scan` VALUES (3, 3, 3005, 2);
INSERT INTO `gourmet_menu_scan` VALUES (5, 11, 12, 0);

-- ----------------------------
-- Table structure for gourmet_star
-- ----------------------------
DROP TABLE IF EXISTS `gourmet_star`;
CREATE TABLE `gourmet_star`  (
  `nick_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '双主键,用户表外键,用户表用户昵称',
  `menu_id` int(10) UNSIGNED NOT NULL COMMENT '双主键,菜谱表外键,菜谱表id',
  PRIMARY KEY (`nick_name`, `menu_id`) USING BTREE,
  INDEX `fk_menu_star`(`menu_id`) USING BTREE,
  CONSTRAINT `fk_menu_star` FOREIGN KEY (`menu_id`) REFERENCES `gourmet_menu` (`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of gourmet_star
-- ----------------------------
INSERT INTO `gourmet_star` VALUES ('java.util.Man', 1);
INSERT INTO `gourmet_star` VALUES ('java.util.Man', 2);

-- ----------------------------
-- Table structure for gourmet_user
-- ----------------------------
DROP TABLE IF EXISTS `gourmet_user`;
CREATE TABLE `gourmet_user`  (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '主键,自增',
  `nick_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '用户昵称',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of gourmet_user
-- ----------------------------
INSERT INTO `gourmet_user` VALUES (1, 'TEST');

SET FOREIGN_KEY_CHECKS = 1;

如果运行完毕数据库中有数据,即可搭建后端环境

后端准备

后端使用的是Java,使用Spring Boot开发,搭建要求:

下载完项目后,在你的开发工具中导入后端项目gourmet-api,以Maven项目的方式导入

下面是IDEA的示例

导入成功

image-20201124093719092

需要修改的配置

修改application.yml配置文件中的数据库连接相关属性为你本地实际开发环境的属性

image-20201124093939209
image-20201124094015118

小程序前端涉及到上传文件(图片),因此需要你配置一下上传文件的保存位置,我这里是在E盘下创建了一个upload目录,你修改为自己创建的路径即可

image-20201124094212819

配置修改完毕,运行Main函数,测试是否可以正常运行

image-20201124094325215

运行效果:

image-20201124094405194

可以在浏览器地址栏中输入下面路径测试是否运行成功

http://localhost:3000/api/index/latest
image-20201124094536819

成功返回数据,后端运行成功

微信小程序端运行

环境准备:

在微信小程序中导入项目gourmet-web

修改appid为你的appid

image-20201124095338614

在项目根路径下打开命令行工具,运行下面命令

npm i axios axios-miniprogram-adapter
image-20201124095607798

在微信开发者工具中点击 工具-构建npm

image-20201124095722142

等待构建完毕,项目中出现下面两个文件夹即可

image-20201124095806786

重新编译一下项目,点击分类,如果分类中有数据,则表示项目运行成功(首页图片可能会不显示,因为图片实际并没有在你的电脑上,分类有数据即可)

image-20201124100103969
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 198,082评论 5 464
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,231评论 2 375
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 145,047评论 0 327
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,977评论 1 268
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,893评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,976评论 3 388
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,605评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,888评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,906评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,732评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,513评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,980评论 3 301
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,132评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,447评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,027评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,232评论 2 339

推荐阅读更多精彩内容