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

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

使用技术栈

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

项目地址

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

微信小程序端
后端

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

如何运行

数据库准备

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

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

/*Navicat Premium Data TransferSource Server         : 本地Source Server Type    : MySQLSource Server Version : 80011Source Host           : localhost:3306Source Schema         : gourmetTarget Server Type    : MySQLTarget Server Version : 80011File Encoding         : 65001Date: 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开发，搭建要求：

安装JDK

没有安装参考我的这篇文章《windows10下安装配置JDK》
安装Maven

没有安装请参考我的这篇文章《Windows下安装Maven自定义仓库配置阿里下载源，配置Ecplise、IDEA》
合适的开发工具（IDEA、Ecplise皆可）

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

下面是IDEA的示例

导入成功

需要修改的配置

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

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

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

运行效果：

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

http://localhost:3000/api/index/latest

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

微信小程序端运行

环境准备：

node.js

没有安装的请参考我的这篇文章《Windows下安装Node.js完整详细步骤（npm切换淘宝源、修改全局安装位置）》

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

修改appid为你的appid

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

npm i axios axios-miniprogram-adapter

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

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

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

个人公众号