菜谱分享网站微信小程序开发说明（1）-介绍与运行
此项目是作为课设的小项目，实现的功能比较简单，可以入门练手~~也可以参考作为课设
使用技术栈
- 微信小程序原生框架
- Spring Boot + MyBatis
- MySQL
项目地址
项目分为微信小程序端项目和后端项目，项目托管于Gitee
可以选择Gitee直接下载，后者使用Git的clone命令，如果你本地没有安装Git，可以参考我的这篇文章《写给小白看的Git的安装配置和使用》
如何运行
数据库准备
首先需要创建对应的数据库，数据库名称 gourmet，字符集：utf8mb4，排序规则：utf8mb4_general_ci
复制运行下面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 Different</strong></h3><p wx:nodeid="116"><span style="color: rgb(229, 51, 51);" wx:nodeid="117">Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes.</span> The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote th<span wx:nodeid="120" style="color: rgb(229, 102, 0);">em, disagree with<img src="http://kindeditor.net/ke4/attached/W020091124524510014093.jpg" wx:nodeid="141"> them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.</span></p><p wx:nodeid="134"><strong wx:nodeid="135"><em wx:nodeid="136">- Apple 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
等待构建完毕，项目中出现下面两个文件夹即可
重新编译一下项目，点击分类，如果分类中有数据，则表示项目运行成功（首页图片可能会不显示，因为图片实际并没有在你的电脑上，分类有数据即可）
