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

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

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

使用技术栈

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

项目地址

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

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

如何运行

数据库准备

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

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

复制运行下面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:node>-&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:node>吃白菜</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的示例

导入成功

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

需要修改的配置

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

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

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

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

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

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

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

运行效果:

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

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

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

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

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

微信小程序端运行

环境准备:

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

修改appid为你的appid

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

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

npm i axios axios-miniprogram-adapter

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

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

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

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

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

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

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