基于微信小程序+Java+Vue+MySQL的菜谱分享小程序

目录

菜谱分享小程序开发文档

如何运行

后端运行

微信小程序端运行

项目概览

开发环境

数据库

新表有数据

数据库创建

前后端交互

资源

分页面介绍（重点）

首页

搜索页

分类页

菜谱详细内容页

发布/编辑页

个人中心页

登录授权页

我的发布页 & 我的收藏页

其他

项目运行注意

如何运行

后端运行

克隆项目之后，打开 IDEA 或者 Ecplise，导入 Maven 项目（前提，本地已经安装 JDK，Maven），运行 Main 方法即可

微信小程序端运行

前提：本地机器安装了 Node.js

克隆完前端微信小程序的项目之后，导入到微信小程序开发者工具，修改为自己的 AppId（必须） 设置不校验合法域名 构建 npm 等待构建完成即可运行 默认请求的后端地址是我的服务器地址，随时可能会无法请求，如果出现构建完成页面中没有数据的情况，请在本地创建数据库，并启动本地的后端项目，并将微信小程序项目中的 resquest/http.js 里面的请求地址修改为本地地址 const serverIp = “http://127.0.0.1:3000/api” 项目概览 项目分为前端（微信小程序端）和后端项目，前端项目名称为 gourmet-web，后端项目名称为 gourmet-api。 项目结构为前后端分离结构，前后端使用 JSON 格式进行交互。 数据库使用 MySQL 8.0。 开发环境 微信小程序端 · 开发工具：微信开发者工具、Visual Studio Code · 使用 webpack 管理项目 · 微信小程序端使用原生开发框架 · 使用 npm 管理项目依赖 · 项目开发的所有图标资源均使用阿里巴巴矢量图库 · 使用 axios 发起服务端请求 · 调试基本库选择 2.13.1 · 使用 Git 进行版本控制 服务端 · 开发语言：Java · 开发工具：IntelliJ IDEA · 主要框架：Spring Boot 、MyBatis

· 使用 Maven 管理项目

· 使用 Git 对项目进行版本控制

数据库

· 数据库类型：MySQL 8.0

· 统一字符编码：utf8mb4

· 数据库管理工具：Navicat Premium

服务器

· 腾讯云服务器：1 核 1GB 带宽 1M

· 系统：CentOS 7.5

· JDK 版本：JDK8

· 管理工具：XShell、Xftp

数据库

表概览（6）

· 菜谱主表

· 用料表

· 菜谱浏览记录表

· 分类表（两级或三级分类）

· 用户表

· 用户收藏表

本文转载自：http://www.biyezuopin.vip/onews.asp?id=16554

// 引入全局mixinimport mixin from './libs/mixin/mixin.js'// 引入关于是否mixin集成小程序分享的配置// import wxshare from './libs/mixin/mpShare.js'// 全局挂载引入http相关请求拦截插件import http from './libs/request'function wranning(str) {// 开发环境进行信息输出,主要是一些报错信息// 这个环境的来由是在程序编写时候,点击hx编辑器运行调试代码的时候,详见:// https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e5%92%8c%e7%94%9f%e4%ba%a7%e7%8e%af%e5%a2%83if (process.env.NODE_ENV === 'development') {console.warn(str)}}// 尝试判断在根目录的/store中是否有$u.mixin.js，此文件uView默认为需要挂在到全局的vuex的state变量// HX2.6.11版本,放到try中,控制台依然会警告,暂时不用此方式，// let vuexStore = {};// try {// vuexStore = require("@/store/$u.mixin.js");// } catch (e) {// //TODO handle the exception// }// post类型对象参数转为get类型url参数import queryParams from './libs/function/queryParams.js'// 路由封装import route from './libs/function/route.js'// 时间格式化import timeFormat from './libs/function/timeFormat.js'// 时间戳格式化,返回多久之前import timeFrom from './libs/function/timeFrom.js'// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制import colorGradient from './libs/function/colorGradient.js'// 生成全局唯一guid字符串import guid from './libs/function/guid.js'// 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份import color from './libs/function/color.js'// 根据type获取图标名称import type2icon from './libs/function/type2icon.js'// 打乱数组的顺序import randomArray from './libs/function/randomArray.js'// 对象和数组的深度克隆import deepClone from './libs/function/deepClone.js'// 对象深度拷贝import deepMerge from './libs/function/deepMerge.js'// 添加单位import addUnit from './libs/function/addUnit.js'// 规则检验import test from './libs/function/test.js'// 随机数import random from './libs/function/random.js'// 去除空格import trim from './libs/function/trim.js'// toast提示，对uni.showToast的封装import toast from './libs/function/toast.js'// 获取父组件参数import getParent from './libs/function/getParent.js'// 获取整个父组件import $parent from './libs/function/$parent.js'// 获取sys()和os()工具方法// 获取设备信息，挂载到$u的sys()(system的缩写)属性中，// 同时把安卓和ios平台的名称"ios"和"android"挂到$u.os()中，方便取用import {sys, os} from './libs/function/sys.js'// 防抖方法import debounce from './libs/function/debounce.js'// 节流方法import throttle from './libs/function/throttle.js'// 配置信息import config from './libs/config/config.js'// 各个需要fixed的地方的z-index配置文件import zIndex from './libs/config/zIndex.js'const $u = {queryParams: queryParams,route: route,timeFormat: timeFormat,date: timeFormat, // 另名datetimeFrom,colorGradient: colorGradient.colorGradient,colorToRgba: colorGradient.colorToRgba,guid,color,sys,os,type2icon,randomArray,wranning,get: http.get,post: http.post,put: http.put,'delete': http.delete,hexToRgb: colorGradient.hexToRgb,rgbToHex: colorGradient.rgbToHex,test,random,deepClone,deepMerge,getParent,$parent,addUnit,trim,type: ['primary', 'success', 'error', 'warning', 'info'],http,toast,config, // uView配置信息相关，比如版本号zIndex,debounce,throttle,}// $u挂载到uni对象上uni.$u = $uconst install = Vue => {Vue.mixin(mixin) if (Vue.prototype.openShare) {Vue.mixin(mpShare);}// Vue.mixin(vuexStore);// 时间格式化，同时两个名称，date和timeFormatVue.filter('timeFormat', (timestamp, format) => {return timeFormat(timestamp, format)})Vue.filter('date', (timestamp, format) => {return timeFormat(timestamp, format)})// 将多久以前的方法，注入到全局过滤器Vue.filter('timeFrom', (timestamp, format) => {return timeFrom(timestamp, format)})Vue.prototype.$u = $u}export default {install}