菜谱分享网站微信小程序开发说明(1)-介绍与运行
菜谱分享网站微信小程序开发说明(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:node>- 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: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开发,搭建要求:
-
安装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
等待构建完毕,项目中出现下面两个文件夹即可
重新编译一下项目,点击分类,如果分类中有数据,则表示项目运行成功(首页图片可能会不显示,因为图片实际并没有在你的电脑上,分类有数据即可)