菜谱分享网站微信小程序开发说明(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

posted @ 2020-11-24 10:06  UtilMan  阅读(434)  评论(0编辑  收藏  举报