今天来给大家讲解一个完整的微信小程序点餐项目。java后台+微信小程序实现点餐系统。
第一章,技术选型
1,后台技术选型:
- JDK8 (必须保持一致)
- Mysql8 (必须保持一致)
- Spring-boot
- Spring-data-jpa
- Lombok
- Freemarker
- Bootstrap
- Websocket即时通讯
- Tomcat服务器
- Excel数据的批量导入与导出
2,小程序端技术选型
- 微信小程序
- css3
- JavaScript
第二章,效果图
1, 管理后台
后台登录
饭店管理员
菜品类目
excel批量导入
菜品管理
菜品批量导入与导出
订单管理
饭店收入统计和菜品库存预警
2,小程序端
如上图,目前实现了如下功能。
小程序首页
1,扫码点餐
2,菜品浏览
3,餐厅电话
4,在线客服
5,排号等位
6,顶部轮播图
7,搜索功能
菜品分类显示
购物车编辑页
订单确认页(可以选择就餐人数)
这里新加了会员8折优惠的功能
支付系统(模拟支付,可接入微信支付)
学习版只提供模拟支付,这里的模拟是否使用用户的积分来支付。支付之前可以实时显示用户当前余额。
订单列表页(多种订单状态)
评论系统(评价列表)
个人中心页
1,可以注册用户
2,可以注册会员
3,可以查看我的订单
4,可以查看我的评价
5,可以查看我的排号
6,可以拨打饭店电话
用户注册
会员充值
排号等位系统
可以排大桌和小桌
过号后可以重新排号
排号订阅消息授权
我们每次排号时可以获取订阅消息,排到自己时可以收到微信消息
当管理员点击当前用户入座时
用户会收到如下消息
第三章,Java项目的部署
1,准备工作
- 1,安装jdk8或者jdk11
- 2,安装mysql8.0
- 3,安装IntelliJ IDEA 开发工具(java)
- 4,安装微信小程序开发者工具
- 5,注册小程序获取小程序appid
- 6,开通小程序云开发功能
jdk8和MySQL8的安装
jdk8和MySQL8的安装与使用,网上很多教程的,可以自己去网上随便找一个跟着安装即可
当然也可以参考我后面的笔记,往下翻就可以找到的
2,源码导入
2-1,首先下载源码
这里先说明下,我的源码会不断的更新,带会员功能的是最新版的,建议大家使用带会员的。当然不带会员的源码也可以使用。
打开上图中的带会员功能源码
把上图所示的以diancan开头的源码下载到桌面并解压
- 点击open导入上图的java源码,下面两种方式都可以
- 选择你解压后的源码
这里要说明下,我源码可能会更新,记得去网盘里下载最新的源码,解压后导入即可。
2-2,导入成功后如下图
2-3,git不用管
有的同学导入项目后会报下面这个错误,如果报的话,可以忽略不用管,当然没报肯定更好了。
2-4,项目启动报错解决方案
确认下项目是不是使用的jdk8,有时候不用jdk8有可能会报如下错误
解决方法如下图
3,安装mysql8数据库
我们这里要安装的是mysql8.0数据库。只要是8.0开头的,不管是8.0.11还是8.0.19都可以。
数据库的安装,我在点餐视频的第3章的2,3,4节里都有讲。
3-1,关联mysql可视化管理
接下来,我们就要关联mysql数据库了,方便后面的可视化管理
然后选择Mysql 如下图
3-2,链接数据库
接下来就要进行数据库的配置了,这里如实的输入自己的数据库名和密码就行
这里要强调下,mysql数据库默认端口是3306,如果你有变过,记得把下面这里的端口号改为你最新的。一般不建议改变mysql的端口号的。
3-3,链接成功
如果运气好的话,你点完Test Connection后会出现下面的绿色对勾。
链接成功后,不要忘记点ok
这就说明你关联成功了,但是好多同学会出现以下错误。
3-4,关联mysql常见错误
3-4-1,时区错误
时区错误,MySQL默认的时区是UTC时区,比北京时间晚8个小时。所以要修改mysql的时区。
解决:
找到mysql安装目录并进入bin文件夹,我的是安装在c盘
然后输入cmd,回车
输入:mysql -uroot -p123456进入mysql命令模式
然后输入
set persist time_zone='+8:00';
再次连接成功
配置完后,点击下test,如果出现绿色对勾,即代表链接成功。然后点击ok
3-4-2,驱动错误
这是因为驱动没有安装的问题。
解决
问题出在了上图所示的地方。这个地方你如果有看我视频,肯定知道在哪里的。
我们下面就来说下怎么解决吧。
一定要注意,上图我使用的是com.mysql.jdbc.Driver这个数据库驱动。
然后下面的8.0.15的添加是先点加号,然后再如下图所示。
4,执行qcl.sql创建数据库和相关数据表
如果下面第3步箭头是灰色无法点击,说明你mysql数据库没有链接成功,去看下上面第三步里提到的视频。
idea链接数据库成功后,我们再来执行qcl.sql文件。
正常来说,点完run就可以直接执行sql了,但是由于idea做了升级,上面直接右键可能不是直接执行,当然了,如果你是老一点版本的idea,就会直接执行,但是如果你是新版的就会变成了下面所示。
这个时候,也不用害怕,只需要简单配置即可
然后就可以看到控制台打印下面日志
到这里我们数据相关的配置就完成了。
5,本地运行项目
启动项目有两种方法
5-1,通过DianCanApplication类启动
如下图所示
5-2,点击工具栏三角按钮
点击下图绿色箭头,运行项目
因为之前我们执行了sql,可能有的同学是这样的。
这里要记得切换成这个
6,运行成功的检验
我们上面点完运行,日志台会出现下面字样,就代表启动成功了
然后输入下面网址,如果返回下面文字,就代表启动成功了
也可以通过url.md里存的这个链接
输入下面网址,即可进入登陆后台页面。
注意端口号要和你设置页里的保持一致
7,无法查看数据表的问题
有好多同学说执行项目后为啥只有一个表,如下
这是因为我们用的是jpa,项目运行的时候,会自动建表,当然创建后的表,需要你点击一下刷新才可以看得到。
刷新后如下
第四章,导入Java常见问题汇总
1,程序包lombok不存在
如果不存在下面错误,直接跳过即可
通常报这个错误,是因为,我们的开发者工具idea没有安装lombok库导致的
解决办法如下:
提示我们没有安装,我们就安装一个不就行了,下面来教大家如何安装。
mac电脑点击扳手进入设置页
window电脑点击file----》settings
点击plugins,然后搜索lombok,点击install即可安装
安装完成后,重启idea开发工具即可
2,Idea导入三方依赖报红
问题如下图所示:
产生这个问题的原因就是因为,你项目相关类库没有加载成功。或者说你的默认maven是国外链接,加载的比较慢,甚至没有加载下来。所以我们最好使用国内镜像的maven仓库。
2-1解决方案:
1,先去我们的网盘里下载下图这个xml文件,下载后放到桌面
2,去配置maven
然后就是静静的等待了,快的话1分钟,慢的话5-10分钟。就可以把所有类库加载完了。
视频讲解:
可以到网盘里找到下面红框里的讲解视频
2-2, 使用2-1方法不行,还是没法加载依赖
有些同学的电脑,使用1-1的解决方法还是不行,通常是因为这些同学的电脑上不能使用阿里云镜像。所以这个时候我们就要换个解决思路了。这些同学常见的问题如下
这个时候我们就要使用默认的settings.xml了,下面教大家解决思路。
解决方案
然后右键pom.xml如下
新建sttings.xml后重新导入下依赖包即可。
如果上面操作还不能加载类库,就如下图所示点击下clean
3,项目启动报SQLException错误
SQLException: Access denied for user ‘root’@‘localhost’ (using password: YES)
其实出现这个错误的主要原因,是因为你不细心,数据库的密码没有输入对。所以解决的方法就是数据库密码要输对。
4,数据库链接时的时区问题serverTimezone错误
问题原因:
时区错误,MySQL默认的时区是UTC时区,比北京时间晚8个小时。所以要修改mysql的时区。
解决方法如下
找到mysql安装目录并进入bin文件夹,我的是安装在c盘
然后输入cmd,回车
输入:mysql -uroot -p123456进入mysql命令模式
然后输入
set persist time_zone='+8:00';
注意,上面的mysql> 不用输入的。只需要输入set persist time_zone=‘+8:00’; 后面这个分号不要忘记。
- 然后再输入下
flush privileges;
做权限刷新,这样你设置的新的时区才会起效果。
再次连接成功
配置完后,点击下test,如果出现绿色对勾,即代表链接成功。然后点击ok
讲解视频:
5,Driver files are not downloaded, jdbc.Driver报红
问题截图如下
出现这种问题是因为jdbc驱动问题,解决方案就是把默认的驱动删除,重新加载一个。解决方案如下
-
1,删除默认的驱动
-
2,重新添加jdbc驱动8.0.15
这里使用com.mysql.jdbc.Driver
6,出现Public Key Retrieval is not allowed这个问题
这个问题呢,是你重启电脑后,再来启动项目时,会报的一个错误,如下图所示。
这是mysql8才会出现的一个问题,如果你出现了这个问题,解起来也很简单,只需要在链接数据库的url后面追加一个 allowPublicKeyRetrieval=true
讲解视频:
第五章,小程序代码的导入与运行
1,小程序开发工具
你如果没有小程序开发基础,只需要看下这个视频学习下如何导入小程序源码到开发者工具即可
https://edu.csdn.net/course/play/9531
1-1,微信开发者工具的安装与使用
我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。
一,其实很简单,只需要进入小程序官网,然后点击工具,如下图所示。
当然了,也可以直接通过下面链接去下载
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
二,下载安装包如下
不管你是window还是mac电脑,只需要双击安装包实现安装即可。
等待安装即可
安装完成
三,进入开发者工具
第一次进入时,如下
点击上图的加号,我们来创建一个新项目
完成上图的配置后,点击新建。即可创建项目。创建好以后的项目如下图所示。
这样我们就完成了小程序开发者工具的安装了,后面我们就可以开始小程序的代码编写了。
1-2,注册小程序
我们前面虽然可以用测试号创建小程序,但是测试号有很多功能会受限,比如我们后面讲的云开发,必须是注册小程序后才可以使用,所以今天我们就来讲讲小程序的注册.
其实官方给的注册步骤很详细了
官方注册地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
进入注册页面时,跟着提示一步步来就可以了
注意点:
如果只是学习的话,注册个人小程序即可.
如果想商用,想使用微信支付,取用户手机号等复杂功能,可以注册企业小程序,不过企业小程序必须有营业执照才可以注册.
2,下载小程序源码并运行
2-1,下载小程序源码并解压
大家去网盘里把对应的代码下载下来即可。
2-2,打开小程序开发者工具,并导入小程序源码
1,点击加号创建小程序项目
2,导入源码,填写自己的appid
至于appid如何获取,我这里不做讲解了,我零基础入门小程序的视频里都有讲解的:https://edu.csdn.net/course/detail/25749
2-3,注册小程序获取appid
和创建普通小程序一样,如上图所示,需要注意的就是这里必须要填写自己的appid,不可以用测试号. appid的获取如下图所示.
3,云开发环境的创建
今天我们就来正式的创建自己的第一个云开发项目,在创建云开发之前,有下面几个注意事项
- 1,必须注册小程序后才可以开通云开发
- 2,一个小程序可以创建两个云开发环境
3-1,开通云开发
3-1-1,开通小程序云开发
-点击下图箭头所示,如果你第一步创建项目时,没有使用自己的appid,这里不会有下图箭头所示的云朵.
这里云开发用免费版就可以了。
3-1-2,给云开发环境取名
等待创建
创建成功
3-1-3,获取云开发环境id
3-2,初始化云开发环境id
把app.js里的云开发环境id换成你自己的
至于云开发的一些基础知识,本节不做讲解,有不懂的可以去看下我们的零基础入门小程序云开发视频:https://edu.csdn.net/course/detail/26572
3-3,部署getopenid云函数
编译项目,如果能请求到openid即代表云函数部署成功了
4,运行小程序
这和你上面java的运行要保持一致,如果是本地的java项目运