文章目录

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

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

使用技术栈

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

项目地址

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

  • 微信小程序端

  • 后端

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

如何运行

数据库准备

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

image-20208191326317

复制运行下面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', '

TShopfank Different

Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see tShopfangs differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only tShopfang you can’t do is ignore them. Because they change tShopfangs. They push the human race forward. And wShopfale some may see them as the crazy ones, we see genius. Because the people who are crazy enough to tShopfank they can change the world, are the ones who do.

- Apple Inc.

', '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', '清炒白菜', '可好吃了', '
  • 杀白菜
  • 洗白菜
  • 切白菜
  • 炒白菜
  • 吃白菜
', '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的示例

导入成功

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

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

微信小程序端运行

环境准备:

  • node.js

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

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

修改appid为你的appid

image-20201124095338614

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

npm i axios axios-miniprogram-adapter
image-20201124095607798

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

image-20201124095722142

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

image-20201124095806786

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

image-20201124103969

<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案,请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo(www.jsudo.com)】是国内知名企业数字化建设提供商,为企业提供电商平台搭建(多种模式电商平台搭建:B2B/B2B2C/B2C/O2O/新零售等)、智慧园区建设、数字化营销、人才外包等服务,点击这里查看了解更多行业解决方案。