devbox
算法编织者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Java后台微信点餐小程序开发最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序，包含语音提示，微信消息推送，网页管理后台_java扫码点餐

作者：算法编织者 | 2024-01-30 14:15:04

赞

踩

java扫码点餐

由于之前的Java后台微信点餐小程序有些知识点过时了，所以今天重新出一版，把里面过时的知识点更新下

前五章是部署笔记，后面是知识点的详细讲解，大家可以先看部署笔记，部署起来后，再跟着详细知识学习。

第一章，技术选型(重要一定要看)

在开始学习之前，要记得安装jdk8和mysql8，后面的笔记里也会具体讲解怎么安装，但是jdk8和mysql8必须和石头哥保持一致。

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，购物车页面
9，会员功能

菜品分类显示

购物车编辑页

购物车页面

订单确认页（可以选择就餐人数）

这里新加了会员8折优惠的功能

支付系统（模拟支付，可接入微信支付）

学习版只提供模拟支付，这里的模拟是否使用用户的积分来支付。支付之前可以实时显示用户当前余额。

订单列表页（多种订单状态）

评论系统（评价列表）

个人中心页

1，可以注册用户
2，可以注册会员
3，可以查看我的订单
4，可以查看我的评价
5，可以查看我的排号
6，可以拨打饭店电话

用户注册

会员充值

排号等位系统

可以排大桌和小桌

过号后可以重新排号

排号订阅消息授权

我们每次排号时可以获取订阅消息，排到自己时可以收到微信消息

当管理员点击当前用户入座时

用户会收到如下消息

第三章，Java项目的部署

1，准备工作

  • 1，安装jdk8
  • 2，安装mysql8.0
  • 3，安装IntelliJ IDEA 开发工具（java）
  • 4，安装微信小程序开发者工具
  • 5，注册小程序获取小程序appid
  • 6，开通小程序云开发功能

1-1， jdk8和MySQL8的安装

jdk8和MySQL8的安装与使用，网上很多教程的，可以自己去网上随便找一个跟着安装即可

1-2，当然也可以参考我后面的笔记，往下翻就可以找到的

2，源码导入

关于源码的导入，我这里说下，只要大家认真跟着笔记或者视频走，都可以跑起来的，如果你实在不想看笔记或者视频，可以找石头哥付费部署，石头哥可以远程协助你在10-30分钟内把项目完整的运行起来。

2-1，首先要下载源码

这里先说明下，我的源码会不断的更新，建议大家用最新的代码，历史文件忽略就行了

把上图所示的以Java-diancan开头的源码下载到桌面并解压

  • 点击open导入上图的java源码，下面两种方式都可以
    image
    image
  • 选择你解压后的源码

这里要说明下，我源码可能会更新，记得去网盘里下载最新的源码，解压后导入即可。

2-2，配置小程序相关的appid和密匙

导入成功后如下图

这里我们需要配置APPID和APPSECRET，记得把这两个换成你自己的。

这两个的获取，需要你先去注册小程序，下面小程序部分的章节会具体讲小程序的注册。这里先教大家怎么拿到APPID和APPSECRET
、

2-3，git不用管

有的同学导入项目后会报下面这个错误，如果报的话，可以忽略不用管，当然没报肯定更好了。

2-4，项目启动报错解决方案

确认下项目是不是使用的jdk8，有时候不用jdk8有可能会报如下错误
image
解决方法如下图

记得要使用Java8

3，mysql8数据库相关

我们这里要安装的是mysql8.0数据库。只要是8.0开头的，不管是8.0.11还是8.0.19都可以。
数据库的安装，我在点餐视频的第3章的2，3，4节里都有讲。
image

3-1，关联mysql可视化管理

接下来，我们就要关联mysql数据库了，方便后面的可视化管理

然后选择Mysql 如下图

3-2，链接数据库

接下来就要进行数据库的配置了，这里如实的输入自己的数据库名和密码就行

这里要强调下，mysql数据库默认端口是3306，如果你有变过，记得把下面这里的端口号改为你最新的。一般不建议改变mysql的端口号的。

3-3，链接成功

如果运气好的话，你点完Test Connection后会出现下面的绿色对勾。

链接成功后，不要忘记点ok

这就说明你关联成功了，但是好多同学会出现以下错误。

3-4，关联mysql常见错误

3-4-1，时区错误

image
时区错误，MySQL默认的时区是UTC时区，比北京时间晚8个小时。所以要修改mysql的时区。

解决：

找到mysql安装目录并进入bin文件夹，我的是安装在c盘
image
然后输入cmd，回车
image
输入：mysql -uroot -p123456进入mysql命令模式
image
然后输入

 set persist time_zone='+8:00';


  • 1
  • 2

再次连接成功
image
配置完后，点击下test，如果出现绿色对勾，即代表链接成功。然后点击ok

3-4-2，驱动错误

image
image
image
这是因为驱动没有安装的问题。

解决
image
问题出在了上图所示的地方。这个地方你如果有看我视频，肯定知道在哪里的。
我们下面就来说下怎么解决吧。
image
一定要注意，上图我使用的是com.mysql.jdbc.Driver这个数据库驱动。
然后下面的8.0.15的添加是先点加号,然后再如下图所示。
image

4，执行qcl.sql创建数据库和相关数据表

如果下面第3步箭头是灰色无法点击，说明你mysql数据库没有链接成功，去看下上面第三步里提到的视频。
image
idea链接数据库成功后，我们再来执行qcl.sql文件。
image
正常来说，点完run就可以直接执行sql了，但是由于idea做了升级，上面直接右键可能不是直接执行，当然了，如果你是老一点版本的idea，就会直接执行，但是如果你是新版的就会变成了下面所示。

这个时候，也不用害怕，只需要简单配置即可

然后就可以看到控制台打印下面日志

到这里我们数据相关的配置就完成了。

5，本地运行项目

启动项目有两种方法

5-1，通过DianCanApplication类启动

如下图所示

5-2，点击工具栏三角按钮

点击下图绿色箭头，运行项目

因为之前我们执行了sql，可能有的同学是这样的。

这里要记得切换成这个

6，运行成功的检验

我们上面点完运行，日志台会出现下面字样，就代表启动成功了

然后输入下面网址，如果返回下面文字，就代表启动成功了
image
也可以通过url.md里存的这个链接

输入下面网址，即可进入登陆后台页面。
image
注意端口号要和你设置页里的保持一致
image

7，无法查看数据表的问题

有好多同学说执行项目后为啥只有一个表，如下

这是因为我们用的是jpa，项目运行的时候，会自动建表，当然创建后的表，需要你点击一下刷新才可以看得到。

刷新后如下

8，导入的菜品图片失效

导入菜品后，有的图片可能因为时间太久失效了，记得自己去网上找下对应的图片链接来替换下失效的菜品图片链接。

第四章，导入Java常见问题汇总

1，程序包lombok不存在

如果不存在下面错误，直接跳过即可
image
通常报这个错误，是因为，我们的开发者工具idea没有安装lombok库导致的

解决办法如下：

提示我们没有安装，我们就安装一个不就行了，下面来教大家如何安装。
mac电脑点击扳手进入设置页
image
window电脑点击file----》settings

点击plugins，然后搜索lombok，点击install即可安装

安装完成后，重启idea开发工具即可
image

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';


  • 1
  • 2

注意，上面的mysql> 不用输入的。只需要输入set persist time_zone=‘+8:00’; 后面这个分号不要忘记。

  • 然后再输入下
flush privileges;


  • 1
  • 2

做权限刷新，这样你设置的新的时区才会起效果。

再次连接成功

配置完后，点击下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，不要用石头哥的。

至于appid如何获取，我这里不做讲解了，我零基础入门小程序的视频里都有讲解的：https://edu.csdn.net/course/detail/25749

2-3，注册小程序获取appid

和创建普通小程序一样,如上图所示,需要注意的就是这里必须要填写自己的appid,不可以用测试号. appid的获取如下图所示.

3，做一些设置(重要)

3-1，记得把基础库调为2.27.0（重要）

3-2，勾选不校验域名

4，运行小程序

这和你上面java的运行要保持一致，如果是本地的java项目运行你就用 localhost

如果你是真机调试就用下面这个。

6，编译运行小程序

image

如果上述菜品栏没有数据，记得去自己的管理后台，先添加类目，再添加菜品
image
image
上面两步操作，可以批量导入，相应的数据，我也再网盘里给大家准备好了。

到这里我们点餐系统的java后台和微信小程序就完整的部署了。后面再有问题，我也会持续在这里给大家更新出来的。

7,真机调试小程序(在手机上运行)

正常情况下，我们的本地模拟器运行小程序是没问题的。如果想在手机上运行小程序。就只有两种方式了
1，部署Java后台到线上服务器(比较麻烦后面讲解)
2，运用真机调试

所以我们接下来重点讲解下真机调试

7-1，真机调试的准备工作

1，手机和电脑必须在同一个wifi下(也可以手机开热点)电脑链接热点
2，电脑防火墙要关掉
3，小程序代码app.js里要做如下处理

7-2，获取电脑ip

下面教大家如何获取自己的电脑ip
首先随便打开自己电脑的一个文件

输入cmd然后按回车键

然后就会出现下图所示的命令行窗口

然后输入ipconfig

这样就拿到我们需要的电脑ip了，然后去app.js里把ip换成你自己电脑的ip就行了。

记得把本地调试注释掉，把真机调试解开注释

7-3，真机调试

真机调试前，一定记得把Java后台运行起来，然后点击真机调试

点完真机调试会出现一个二维码，然后用手机微信去扫描即可。

这里再次强调下
1，手机和电脑必须在同一个wifi下(也可以手机开热点)电脑链接热点
2，电脑防火墙要关掉
3，小程序代码app.js里要用你自己电脑的ip

第六章，详细代码讲解

第1节~IntelliJ IDEA的下载与安装

IntelliJ IDEA是我们使用的Java开发者工具，后面简称idea，我们先教大家如何下载并破解idea，由于官方是收费的，只能免费试用30天，所以今天我会教大家如何破解。我们破解的话必须和我的版本一致，我用的是2019.2或者2019.3 最新的版本基本上很难破解的，所以不建议用最新版

我们这里以2019.2为例

一，IntelliJ IDEA软件的下载

  • 1，找石头哥获取，石头哥已经把安装包放到了网盘里。

    mac和window的都有为大家准备好，如果大家有买我Java课，或者有办我的年卡，都可以获取到。
  • 2，借助万能的百度了

    直接百度 IntelliJ IDEA 2019.2下载 ，然后去找对应的安装包即可。记得一定要下载2019.2版本，否则没法破解

二，软件下载好，我们就来安装了

不同电脑上安装步骤可能有些差异，下面步骤仅供参考。

  • 1，双击安装
  • 2，点击next
  • 3，选择安装目录
  • 4,勾选

    如果你是32位的电脑，就勾选32
  • 5，安装
  • 6，等待安装
  • 7，点击finish

三， 安装完成，打开软件。

  • 1，点击打开软件

    如果找不到图标，就可以去常用软件找图标即可。
  • 2，选择do not import settings,然后点击ok
  • 3，同意协议，点击continue
  • 4，点击Dont send
  • 5,设置主题，直接跳过即可

四，idea的破解

由于这里存在法律风险，我这里不再教大家如何破解，大家去网上搜索即可，网上很多破解教程的。

第2节~jdk的安装

今天来教大家如何安装Java开发环境jdk，我们这里以jdk8为例。

一，jdk安装包的下载

目前有3种方式

  • 1，Java官网下载
    https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

    因为Java官网是国外的，有些地方的同学可能下载有点慢。
  • 2，直接百度搜索jdk8安装包，如下图

    缺点就是网上东西太多太乱，不一定能找到合适的。
  • 3，石头哥在网盘里帮大家准备好了，对应的安装包

    对应的mac电脑，window电脑的32位和64位的安装包都有。
    下载链接我也发给大家
    链接：https://pan.baidu.com/s/1GvmSRJx72vSZi3l71kr2SQ
    提取码：mj3o

二，以window64位安装为例

  • 1，双击安装包
  • 2，点击下一步
  • 3，设置安装目录，保持默认即可，然后点击下一步
  • 4，然后等待安装
  • 5，安装完成，点击确定
  • 6，接着点击下一步
  • 7，接着等待进度
  • 8，安装完成

三，配置全局环境变量

  • 1，这里点击搜索框，然后输入cmd打开命令提示符
  • 2，命令行输入javac如果提示下面，就说明需要配置全局环境变量
  • 3，拿到自己的jdk安装目录
  • 4，打开控制面板
  • 5，然后点击高级系统配置
  • 6，点击高级，然后点击环境变量

  • 7，新建JAVA_HOME,把我们上面第3步的jdk安装目录设置到下面

  • 8，新建CLASSPATH，设置变量值，
    .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
    注意前面的.表示当前目录。然后点击“确定”按钮。
  • 9，新建PATH，设置变量值，%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

    然后点击确定即可

四，验证

重新打开cmd命令行，输入javac，如果出现下面一大串提示就代表Java环境变量配置成功了。
image.png

第3节~开发自己的第一个java项目

上一节带领大家成功安装的java开发工具IntelliJ IDEA，这一节就来教大家如何创建自己的第一个java项目。

所用技术

  1. jdk8（java8）
  2. springboot2.2.2

同样本节课程会配套一个视频讲解。我们每节图文教程后面都会配套一个视频讲解，方便大家更直观的学习。

话不多说，我们就来教大家如何快速创建我们的第一个java项目。

一，打开idea开发者工具

我们工具第一次打开，可能会等待几分钟。

二，点击新建项目

image

就是点击 我们上图箭头所指的 Create New Project

三，配置信息

跟着下面图片一步一步来就行

image

image

image

image

image

到这里我们项目就创建完成了

四，认识项目结构

image

我们开发java项目的时候，只需要关心src目录和pom.xml文件即可，别的都可以先不用管。

五，创建自己的第一个java文件

image

image

名字这里你可以随便取，但是有两点要求

  1. 必须是英文或者拼音
  2. 第一个字母要大写

六，编写java代码

image

代码如下

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
/**
 * Created by qcl on 2019-06-05
 * desc:
 */
@RestController
public class Hello {
 @GetMapping("/hello")
 public String hello() {
 return "欢迎访问我的网站";
 }
} 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

到这里我们的第一个java项目就成功创建了，接下来我们运行项目看下效果

七，运行项目

image

image

这里如果出现 Started DemoApplication in 3.426 seconds (JVM running for 4.769)

就代表项目成功运行起来了。

八，访问项目

我们这里在浏览器里输入下面网址

image

到这里我们就完整的实现了自己的第一个可以访问的java项目。

如果觉得图文不太好理解，请查看本专栏下一节。老师下一节会用录制视频来讲解本节课程。

本节课是《手把手带你零基础入门java开发》系列课程的一节，如果你想快速入门java开发，想开发一款属于自己的java项目，想学习springboot，想了解小程序，想了解全栈开发，想开发自己的网站，可以跟着石头哥来零基础入门。

第4节~数据库Mysql8的安装

上一节给大家讲了mysql5.7的安装，有好多同学反应，在使用5.7安装包时，最终系统却安装成了mysql8.0。这是因为现在官方也提倡我们用最新版本的，所以今天我们就再来教下大家8.0的安装。在安装8.0之前，建议大家先把之前安装的5.7卸载了。

一，安装包的下载

1-1，安装包的下载

如果这种方式安装不成功，可以试下1-2的压缩包安装( 个人推荐压缩安装，Msi安装如果出现错误，容易安装失败。)


点击 No thanks

如果觉得官网下载有点慢，可以去我网盘里下载

  • 2,网盘下载，安装包我已经给大家放到网盘

    有买我点餐系统或者Java基础入门课程的同学，都可以获取到这个网盘链接。
  • 3,当然你也可以去百度下 mysql8安装包，去下载

注意：这里只要是8.0开头的就可以了，不管是8.0.11，8.0.18，8.0.19都可以的。

我这里以mysql8.0.11为例，如果你电脑上有安装过mysql，记得卸载干净。

  • 1，双击安装
  • 2，勾选协议，然后点击next
  • 3，保持默认，直接点击next
  • 4，点击next，然后点击yes
    image.png
  • 5，点击Execute

    等待所有的安装成功
  • 6，全部安装通过后，点击next

    继续点击next
  • 7，保持默认，点击next
  • 8，保持默认端口号
  • 9.保持默认，点击next
  • 10，设置密码，学习用的，尽量简单，设置好以后要牢牢记住，后面还会用到。
  • 11，保持默认，点击next

  • 12，点击Execute，等待校验

    校验通过，点击Finish
  • 13，点击next
  • 14，点击Finish

    点击next
  • 15，验证密码，默认的用户名是root

    验证通过，点击next
  • 16，点击Execute

    成功后点击Finish
  • 17，点击next
  • 18，点击Finish

    到这里就安装成功了，步骤有点多，可能不同电脑上会有出入，但是大体都是一样的。

1-2，压缩包安装

mysql压缩包下载

1.首先需要下载压缩包8.0版，下载过程我就不多赘述了（在此须特别注意压缩包的解压路径，后面步骤会用到）

2，以管理员身份进入命令提示符

进入到CMD环境后，输入mysql所在盘符d:后回车，进入d盘

然后输入命令：cd D:\mysql-8.0.29-winx64\mysql-8.0.29-winx64\bin
也就是你mysql安包的路径

以管理员身份进入命令提示符后，执行命令。
mysqld --initialize-insecure

（这里特别提一下，Mysql8.0版压缩包安装有很多方式，其中网上有些坑说要配置.ini文件和新建data文件夹，其实都不用，你会发现，如果你按照他们的说法去做，你的服务是无法启动的，还是那种不报错误的无法启动。）

然后再执行 mysqld -install

安装成功后，运行mysql 执行 net start mysql

（注意，上面的，命令行一个符号都不能少，后面的-insecure是初始化的时候，密码默认为空就是无密码，如果你不加。执行完后会随机生成一个密码，随机密码会在执行完后下面显示）
如果提示net不是内容命令，要记得用管理身份启动cmd命令行，然后再执行net start mysql

然后就可以登录mysql，并修改密码。

  • 登录mysql，无密码
mysql -u root -p 

  • 1
  • 修改密码,比如我把密码改为123456，做如下操作即可
 set password for root@localhost='123456';

  • 1

出现下面语句则修改成功。

Query OK, 0 rows affected (0.02 sec)

  • 1

至此，Mysql8.0压缩包版就安装好了

二，打开mysql并进入

两种方式，建议用第一种方式即可。如果第一种不行，再用第二种。

1，mysql自带客户端。

输入密码，成功进入

  • 2，用cmd命令行

    但是这里提示mysql不是内部或外部命令，所以我们接下来要配置mysql全局环境变量。

三，配置全局环境变量

  • 1，进入高级设置
  • 2，设置MYSQL_HOME
    把你mysql的安装目录，如我的是下面这个
    C:\Program Files\MySQL\MySQL Server 8.0\bin
  • 3，设置PATH
    在PATH里添加 %MYSQL_HOME%
    如果PATH 里已有内容，就把%MYSQL_HOME%追加进去

    如果PATH里没有内容，就新建添加，如下图
  • 4,打开cmd命令行输入mysql -V

如果能出现版本号，就代表环境变量配置完成。

四，登陆mysql

mysql -uroot -p123456
这里的root是mysql的用户名，123456是密码

第5节~idea连接Mysql8数据库

上一节，我们讲了mysql5.7可视化操作，今天再来讲下mysql8的可视化操作，后面我们的课程，都用mysql8来讲，所以这一节很重要，一定要跟着老师一步步配置。

一，新建一个Java项目

  • 1，新建项目

    如果你是第一次打开的话，应该是这样的
  • 2，创建springboot项目



二,idea链接mysql

1，如下图所示，点击最右侧的DataBase，然后点击Data Source
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NhHNb1o9-1616120369963)(https://upload-images.jianshu.io/upload_images/6273713-1d5f493478fbe870.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
然后选择mysql

2，配置数据库

三，时区错误及解决方案

如果出现下面错误

时区错误，MySQL默认的时区是UTC时区，比北京时间晚8个小时。所以要修改mysql的时区。
解决：
找到mysql安装目录并进入bin文件夹，我的是安装在c盘

然后输入cmd，回车

输入：mysql -uroot -p123456进入mysql命令模式

然后输入

set persist time_zone='+8:00';

  • 1

再次连接成功

配置完后，点击下test，如果出现绿色对勾，即代表链接成功。然后点击ok

四，可视化操作数据库

  • 1，上面第二步链接成功后，我们这里就可以添加数据库，添加数据表了。

    我们执行下面sql语句，创建一个test数据库
create database test default character set utf8 collate utf8_general_ci;

  • 1
  • 2，创建一个user表
    同样的执行下面sql语句，来创建一个user表
use test;
create table user
(
    id int null,
    name varchar(20) null
);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

创建好以后的user表，如下图。

  • 3，添加数据
  • 4，查询数据

到这里我们就可以成功的借助idea来可视化的操作mysql8了。后面我会讲解更多Java和小程序的知识，敬请关注。

第6节~Jpa操作数据库

我们经过前面的学习，已经可以正式操作mysql数据库，进行增删改查了。今天就来讲讲通过JPA来操作mysql数据库。学完本节，你会感慨springboot结合jpa操作数据库是如此的简单。好了，话不多说，我们开始在springboot中使用jpa。

一，创建springboot项目

1，创建一个新项目

2，定义项目名称，点击next

3，勾选Spring Web

4,勾选jpa和mysql驱动

5，点击finish

到这里我们就成功的创建springboot项目，并在项目里引入jpa了。下面我们就来讲解下怎么使用jpa操作数据库。

二，配置数据库相关信息

我们需要在配置文件里配置数据相关的信息。
image.png

完整配置代码如下

# 数据库驱动
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
# 数据库用户名
spring.datasource.username=root
# 数据库密码
spring.datasource.password=123456
# 链接本地数据库
spring.datasource.url=jdbc:mysql://localhost:3306/test?characterEncoding=utf-8&useSSL=false
# 每次启动项目时更新数据库
spring.jpa.hibernate.ddl-auto=update

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

我们这里用到了test数据库，所以我们要先新建一个test数据库。
创建test数据库的sql语句。如果你还不知道怎么使用idea链接mysql并创建数据库，可以去看下我前面的文章或者看下配套视频。

create database test default character set utf8 collate utf8_general_ci;

  • 1

如下图所示，即代表我们创建test数据库成功

三，编写一个实体类和数据库表一一对应

我们这里编写一个 Test类，这个test类会和我们的数据表test一一对应。然后表里有一个自增的id字段，和一个name字段。

/**
 * 作者：编程小石头
 */
@Entity
public class Test {
    @Id
    @GeneratedValue
    private int id;
    private String name;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

四，实现一个持久层，用来操作数据库

@Repository
public interface TestDao extends JpaRepository<Test,Integer> {
}

  • 1
  • 2
  • 3

五，实现一个controller用来供浏览器操作数据库

@RestController
public class TestController {
    @Resource
    TestDao dao;

    @GetMapping("/add")
    public Test add() {
        Test test = new Test();
        test.setName("编程小石头");
        Test save = dao.save(test);
        return save;
    }
    @GetMapping("/list")
    public List<Test> list() {
        List<Test> all = dao.findAll();
        return all;
    }  
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

六，效果演示

执行下面操作之前，别忘记先启动项目

  • 1，增加一条数据
  • 2，看下我们的数据表里，有成功添加这条数据
  • 3，查询所有数据

    到这里我们就成功的在springboot引入jpa，成功的实现的数据的增加和查询了，是不是很简单。spingboot结合jpa对mysql数据库进行增删改查的操作，可以去看下配套视频。

第7节~springboot引入freemarker

今天我就要正式学习Java后台页面编写了,通常我们应该用html直接编写,也可以用前后端分离的方式,比如vue来编写后台网页,但是呢,作为Java后端开发来所,有一个很方便的模板,可以快速实现Java后台页面的开发,这就是我们今天要讲的freemarker.

一,pom.xml里引入freemarker类库

这里默认你已经新建了一个spingboot项目,我们这里直接引入类库.

        <!--freemarker-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

二,新建ftlh文件

在resources里新建templates文件,默认freemarker页面都是放在templates里.

如果又同学学过freemarker,肯定会问,这里为什么是ftlh结尾,而不是ftl结尾呢,因为spingboot2.2以后默认使用ftlh来表示freemarker文件了,所以我们以后都用.ftlh结尾

三,新建一个controller


这样我们运行项目,然后访问效果如下

到这里我们就成功的在springboot里引入freemarker里,后面我们就可以愉快的编写后台网页了.

四,freemarker常用标签

  • 1,列表<#list>
<#list nameList as names>  
  ${names} 
</#list>


  • 1
  • 2
  • 3
  • 4
  • 2,if语句
<#if (age>=18)>
    成年人
</#if>


  • 1
  • 2
  • 3
  • 4
  • 3,if else语句
<#if (age>=18)>
    成年人
<#else>
    未成年人
</#if>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 4,elseif语句
<#if (age>=18)>
    年龄大于等于18
<#elseif (age>12)>
    年龄大于12
<#else>
    年龄小于12
</#if>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 5,导入文件
    可以导入ftlh,也可以导入html文件.
<#include "left.ftlh">


  • 1
  • 2

第8节~freemarker+bootstrap实现管理后台

我们做后台开发时，难免会要开发管理后台。如下面这样的管理后台，我们完全可以不用h5同学，自己快速开发管理web后台的。

所以接下来我会用几节来教大家如何快速实现管理后台。

本节知识点

  • springboot2.2.2
  • freemarker
  • bootstrap4
  • maven

老规矩，先看效果图

所以本节就来教大家如何快速实现管理后台表格数据的展示与操作。

这节课是建立在你已经会创建springboot项目的基础上，如果你还不知道怎么创建一个springboot项目请异步到这里：https://edu.csdn.net/course/detail/23443

好了，下面就来讲解，如何使用springboot+freemarker+bootstrap快速实现管理后台表格数据的展示。

一，首先要在你的pom.xml 加入freemarker仓库

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>


  • 1
  • 2
  • 3
  • 4
  • 5

二，在项目的templates目录下创建demo目录，然后创建list.ftl文件

我们freemarker使用的是 .ftl结尾的模版文件

list.ftl完整代码如下

<html>
<head>
	<meta charset="utf-8">
	<title>freemarker+bootstrap学习</title>
	<#--本地引入-->
	<#--<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">-->
	<!-- 新 Bootstrap4 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap
	.min.css">

</head>
<body>
<div class="container-fluid">
	<div class="table-responsive">
		<table id="dataGrid" class="table table-striped table-bordered">
			<thead>
			<tr>
				<th width="50"><input type="checkbox" class="checkall"></th>
				<th>标题</th>
				<th>姓名</th>
				<th>微信</th>
				<th width="50">操作</th>
			</tr>
			</thead>
			<tbody>
			<#list demoList as row>
				<tr>
					<td>
						<input type="checkbox" name="id" value="${row.id}">
					</td>
					<td>${row.title}</td>
					<td>${row.name}</td>
					<td>${row.wechat}</td>
					<td>
						<button class="btn btn-xs btn-primary"
								onclick="deleteRow(${row.id})">删除
						</button>
					</td>
				</tr>
			</#list>
			</tbody>
		</table>
	</div>
</div>
<script type="text/javascript">
    function deleteRow(rowId) {
        console.log("点击了删除", rowId);
    }
</script>

</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

这里需要讲下，我们引入bootstrap有两种方式，大家学习阶段推荐用第一种方式。

  • 1，直接引入网上资源(推荐)
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap
    .min.css">


  • 1
  • 2
  • 3
  • 2,把bootstrap下载到本地，然后再引入本地
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">


  • 1
  • 2

三，我们页面写好了，接下来就是网页面里传数据了。

这里我们定义一个DemoController如下

package com.qcl.demo.controller;

import com.qcl.demo.bean.Demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * Created by qcl on 2019-04-29
 * weixin：2501902696
 * desc:freemarker学习
 */
@RestController
public class DemoController {

    @GetMapping("/demoList")
    public ModelAndView list(Map<String, Object> map) {
        List<Demo> demoList = new ArrayList<>(4);
        demoList.add(new Demo(1, "标题1", "编程小石头1", "2501902696"));
        demoList.add(new Demo(2, "标题2", "编程小石头2", "2501902696"));
        demoList.add(new Demo(3, "标题3", "编程小石头3", "2501902696"));
        demoList.add(new Demo(4, "标题4", "编程小石头4", "2501902696"));
        map.put("demoList", demoList);
        return new ModelAndView("demo/list", map);
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

这里我们先模拟4条数据，然后把数据传到我们的list.ftl页面，正常数据都应该是从数据库里取的，后面会做讲解。
这就是用freemarker模版的好处。可以直接在页面里使用我们的java数据。

<table id="dataGrid" class="table table-striped table-bordered">
	<thead>
	<tr>
		<th width="50"><input type="checkbox" class="checkall"></th>
		<th>标题</th>
		<th>姓名</th>
		<th>微信</th>
		<th width="50">操作</th>
	</tr>
	</thead>
	<tbody>
	<#list demoList as row>
		<tr>
			<td>
				<input type="checkbox" name="id" value="${row.id}">
			</td>
			<td>${row.title}</td>
			<td>${row.name}</td>
			<td>${row.wechat}</td>
			<td>
				<button class="btn btn-xs btn-primary"
						onclick="deleteRow(${row.id})">删除
				</button>
			</td>
		</tr>
	</#list>
	</tbody>
</table>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

这样我们运行项目，然后进入web后台，就可以看到了，我们这里点击删除时，是可以拿到每行的id的，这样我们就可以根据id删除具体数据，然后再重新刷新下页面就可以了。后面会给大家讲解通过web后台操作数据库的。

到这里我们就实现了管理后台表格数据的展示与操作了，是不是很简单啊。

我会把10小时实战入门java系列课程录制成视频，如果你看文章不能很好的理解，可以去看下视频：https://edu.csdn.net/course/detail/23443

编程小石头，码农一枚，非著名全栈开发人员。分享自己的一些经验，学习心得，希望后来人少走弯路，少填坑。

第9节~freemarker+bootstrap实现分页功能

本节是建立在上节的基础上，上一节给大家讲了管理后台表格如何展示数据，但是当我们的数据比较多的时候我们就需要做分页处理了。这一节给大家讲解如何实现表格数据的分页显示。

准备工作

还是老规矩，看效果图

可以看出我们实现了如下功能

  • 1，表格数据的展示
  • 2，分页效果的实现
  • 3，上一页和下一页的实现
  • 4，当前选中页码加重颜色

下面来看实现步骤

一，定义表格和分页组件

简单说说代码

  • head里面是引入bootstrap的样式库
  • table定义表格来展示数据
  • ul里定义分页
    代码如下：
<html>
<head>
	<meta charset="utf-8">
	<title>freemarker+bootstrap学习</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- 新 Bootstrap4 核心 CSS 文件 -->
	<link rel="stylesheet"
		  href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">

</head>
<body>
<div class="container-fluid">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<table class="table table-bordered table-condensed table-striped">
				<thead>
				<tr>
					<th>id</th>
					<th>姓名</th>
					<th>微信</th>
					<th colspan="2">操作</th>
				</tr>
				</thead>
				<tbody>

				<#list productInfoPage as productInfo>
					<tr>
						<td>${productInfo.id}</td>
						<td>${productInfo.name}</td>
						<td>${productInfo.wechat}</td>
						<td>
							<#if productInfo.id%2 == 0>
								<a href="#">下架</a>
							<#else>
								<a href="">上架</a>
							</#if>
						</td>
					</tr>
				</#list>
				</tbody>
			</table>
		</div>

		<#--分页-->
		<div class="col-md-12 column">
			<ul class="pagination ">
				<#if currentPage lte 1>
					<li class="disabled "><a class="page-link" href="#">上一页</a></li>
				<#else>
					<li>
						<a class="page-link" href="/pageList?page=${currentPage -
						1}&size=${size}">上一页</a>
					</li>
				</#if>

				<#list 1..totalPage as index>
					<#if currentPage == index>
						<li class="page-item active "><a class="page-link" href="#">${index}</a>
						</li>
					<#else>
						<li>
							<a class="page-link" href="/pageList?page=${index}&size=${size}">
								${index}</a>
						</li>
					</#if>
				</#list>

				<#if currentPage gte totalPage>
					<li class="disabled "><a class="page-link" href="#">下一页</a></li>
				<#else>
					<li>
						<a class="page-link" href="/pageList?page=${currentPage + 1}&size=${size}">下一页</a>
					</li>
				</#if>
			</ul>
		</div>
	</div>
</div>
</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81

二，定义好页面后，我们就来获取数据

同样这里的数据我们先用模拟数据，后面会用数据库里的数据。
看下面代码可以看出来，我们模拟了6条数据，然后每页显示2条数据。

package com.qcl.demo.controller;

import com.qcl.demo.bean.Demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * Created by qcl on 2019-04-29
 * weixin：2501902696
 * desc:freemarker学习
 */
@RestController
public class DemoController {

    /*
     * 分页效果的实现
     * */
    @GetMapping("/pageList")
    public ModelAndView list(@RequestParam(value = "page", defaultValue = "1") Integer page,
                             @RequestParam(value = "size", defaultValue = "2") Integer size,
                             Map<String, Object> map) {
        List<Demo> demoList = new ArrayList<>(4);
        demoList.add(new Demo(1, "标题1", "编程小石头1", "2501902696"));
        demoList.add(new Demo(2, "标题2", "编程小石头2", "2501902696"));
        demoList.add(new Demo(3, "标题3", "编程小石头3", "2501902696"));
        demoList.add(new Demo(4, "标题4", "编程小石头4", "2501902696"));
        demoList.add(new Demo(5, "标题5", "编程小石头4", "2501902696"));
        demoList.add(new Demo(6, "标题6", "编程小石头4", "2501902696"));
        demoList.add(new Demo(7, "标题7", "编程小石头7", "2501902696"));
        int start = (page - 1) * 2;
        int end = start + size;
        List<Demo> subList = demoList.subList(start, end);
        int totalPage = (int) Math.ceil(demoList.size() / size);
        map.put("productInfoPage", subList);
        map.put("totalPage", totalPage);
        map.put("currentPage", page);
        map.put("size", size);
        return new ModelAndView("demo/list", map);
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

三，启动springboot查看效果。

注意每一页地址栏的url



可以看出，我们第一次访问时，默认显示第一页，url里没有page和size字段。
访问第2页和第3页时，url里就有了page和size。page是显示那一页，size是每页显示多少条数据。
到这里我们就实现的管理后台的分页效果。

我会把10小时实战入门java系列课程录制成视频，如果你看文章不能很好的理解，可以去看下视频：https://edu.csdn.net/course/detail/23443

第10节，点餐系统排号等位功能讲解

最近忙着创业，好久没有写文章了。今天就抽空给点餐系统加一个排号等位功能，想加这个功能很久了，一直没有瞅到时间写。今天就把这个功能实现了，顺便写个文章出来。

老规矩，先给大家看效果图






只顾实现功能了，ui没怎么美化，后面有时间再做下ui美化吧。下面就来给大家讲解下。
讲之前，先给大家看一个简单的流程图。

流程其实很简单，就是客户端(小程序端)操作，点击排位。

然后Java后台，入库，并生成排位的号码，用户端可以看到自己当前排在第几号。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cZLe34d2-1616120369987)(https://upload-images.jianshu.io/upload_images/6273713-f5a1d2cbcbb46bdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
然后管理员在后台操作，排到位的客户可以入座。

等到号的用户，就会出现可入座的标识。后面会增加排到号的用户接受微信订阅消息通知的功能。敬请期待。

流程基本上讲完了，接下来就给大家讲解代码部分。这里只把重要的代码贴出来给到大家，顺便给大家讲下思路。后面也会录制完整的讲解视频：《点餐系统，java后台+点餐小程序》

一，小程序端代码

1，排号相关代码


我们先来讲讲排号相关的代码，从上图可以看出，我们排号的wxml文件里可以显示两种状态，未排号和已排号。上图展示的是未排号的状态，用户点击完取号以后，就可以展示已排号状态了。

其实排号的小程序端代码很简单。下面再把paihao.js的代码贴出来给到大家。

let app = getApp()
Page({
  data: {
    num: 1111, //当前排号
    type: 1,
    currentSmall: -1,
    currentBig: -1
  },
  onShow: function () {
    this.getNum()
  },
  //取号
  quhao(event) {
    let type = event.currentTarget.dataset.type
    let that = this;
    //如果openid不存在，就重新请求接口获取openid
    var openid = app.globalData.openid;
    if (openid === null || openid === undefined) {
      app.getOpenid();
      wx.showToast({ //这里提示失败原因
        title: 'openid为空！',
        duration: 1500
      })
      return;
    }
    wx.request({
      url: app.globalData.baseUrl + '/paihao/quhao',
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      data: {
        openid: openid,
        type: type,
      },
      success(res) {
        if (res && res.data && res.data.data) {
          wx.showToast({
            title: '排号成功',
          })
          console.log(res)
          that.setData({
            type: res.data.data.type,
            num: res.data.data.num
          })
        }
      },
      fail(res) {
        console.log("排号失败", res)
      }
    })

  },
  //查询我的排号
  getNum() {
    let that = this;
    //如果openid不存在，就重新请求接口获取openid
    var openid = app.globalData.openid;
    if (openid === null || openid === undefined) {
      app.getOpenid();
      wx.showToast({ //这里提示失败原因
        title: 'openid为空！',
        duration: 1500
      })
      return;
    }
    wx.request({
      url: app.globalData.baseUrl + '/paihao/getNum',
      data: {
        openid: openid
      },
      success: function (res) {
        if (res && res.data && res.data.data) {
          let dataList = res.data.data;
          console.log("请求到的排号情况", dataList)
          that.setData({
            type: dataList.type,
            num: dataList.num,
            smallOkNum: dataList.smallOkNum,
            bigOkNum: dataList.bigOkNum,
          })
        } else {
          that.setData({
            num: -1
          })
        }
      },
      fail(res) {
        console.log("查询排号失败", res)
      }
    })
  }
})


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94

这里需要注意一点，就是一定要先获取用户的openid,因为openid是用户的唯一标识。每人每天只能排一次号。买我点餐系统这门课的同学，都知道如何获取openid，我课程配套的视频也有讲。

二，Java后台代码讲解

如果有仔细看上面第一步小程序端代码，应该可以看到wx.request网络请求部分，其实这个网络请求就是请求的我们Java后台。下面先把Java后台源码贴出来。

/**
 * 小程序端排号相关接口
 */
@RestController
@RequestMapping("/paihao")
@Slf4j
public class WxPaihaoController {
    @Autowired
    PaihaoRepository repository;

    /*
     * 取号
     * */
    @PostMapping("/quhao")
    public ResultVO quhao(@RequestParam(value = "type") Integer type,
                          @RequestParam("openid") String openid) {
        int size = repository.findByDayAndType(TimeUtils.getYMD(), type).size();
        log.info("当前排号数={}", size);
        Paihao paihao = new Paihao();
        paihao.setDay(TimeUtils.getYMD());
        paihao.setNum(size + 1);
        paihao.setType(type);
        paihao.setOpenid(openid);
        paihao.setRuzuo(false);
        return ApiUtil.success(repository.save(paihao));
    }
    /*
     * 查询当前排号
     * */
    @GetMapping("/getNum")
    public ResultVO getNum(@RequestParam("openid") String openid) {
        //获取当前小桌入座情况
        List<Paihao> listSmall = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 0);
        //获取当前大桌入座情况
        List<Paihao> listBig = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 1);
        //查询当前客户的排号情况
        List<Paihao> listKeHu = repository.findByOpenidAndDay(openid,TimeUtils.getYMD());
        //组装数据返回给小程序端
        PaihaoVO paihao = new PaihaoVO();
        if (listSmall != null && listSmall.size() > 0) {
            paihao.setSmallOkNum(listSmall.get(listSmall.size() - 1).getNum());
        } else {
            paihao.setSmallOkNum(0);
        }
        if (listBig != null && listBig.size() > 0) {
            paihao.setBigOkNum(listBig.get(listBig.size() - 1).getNum());
        } else {
            paihao.setBigOkNum(0);
        }
        if (listKeHu != null && listKeHu.size() > 0) {
            paihao.setNum(listKeHu.get(listKeHu.size() - 1).getNum());
            paihao.setType(listKeHu.get(listKeHu.size() - 1).getType());
        } else {
            paihao.setNum(0);
            paihao.setType(0);
        }
        return ApiUtil.success(paihao);
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

可以看到我们一共给小程序前端提供两个接口，一个是取号，一个是查询当前排号状态。

1，先给大家讲讲取号

    /*
     * 取号
     * */
    @PostMapping("/quhao")
    public ResultVO quhao(@RequestParam(value = "type") Integer type,
                          @RequestParam("openid") String openid) {
        int size = repository.findByDayAndType(TimeUtils.getYMD(), type).size();
        log.info("当前排号数={}", size);
        Paihao paihao = new Paihao();
        paihao.setDay(TimeUtils.getYMD());
        paihao.setNum(size + 1);
        paihao.setType(type);
        paihao.setOpenid(openid);
        paihao.setRuzuo(false);
        return ApiUtil.success(repository.save(paihao));
    }


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

取号其实很简单，就是先查询当前已经排到第几号，然后新排号的客户号码再前面排号的基础上加一。然后数据入库就可以了。

2，再给大家讲下排号状态查询。

    @GetMapping("/getNum")
    public ResultVO getNum(@RequestParam("openid") String openid) {
        //获取当前小桌入座情况
        List<Paihao> listSmall = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 0);
        //获取当前大桌入座情况
        List<Paihao> listBig = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 1);
        //查询当前客户的排号情况
        List<Paihao> listKeHu = repository.findByOpenidAndDay(openid,TimeUtils.getYMD());
        //组装数据返回给小程序端
        PaihaoVO paihao = new PaihaoVO();
        if (listSmall != null && listSmall.size() > 0) {
            paihao.setSmallOkNum(listSmall.get(listSmall.size() - 1).getNum());
        } else {
            paihao.setSmallOkNum(0);
        }
        if (listBig != null && listBig.size() > 0) {
            paihao.setBigOkNum(listBig.get(listBig.size() - 1).getNum());
        } else {
            paihao.setBigOkNum(0);
        }
        if (listKeHu != null && listKeHu.size() > 0) {
            paihao.setNum(listKeHu.get(listKeHu.size() - 1).getNum());
            paihao.setType(listKeHu.get(listKeHu.size() - 1).getType());
        } else {
            paihao.setNum(0);
            paihao.setType(0);
        }
        return ApiUtil.success(paihao);
    }


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

这一步稍微复杂一点。这一步的主要就是给小程序端返回所需的数据，比如当前大桌排到了第几号，小桌排到了第几号，当前用户的排号，当前用户是否被叫到。代码里注释都很清楚了，感兴趣的同学仔细看下上面代码即可。

3，管理员端

管理员就是用来操作谁可以入座的。

这个页面主要是用freemarker写的前端页面。代码如下图。

对应的后台接口。

/**
 * 排号相关
 */
@Controller
@RequestMapping("/adminPaihao")
@Slf4j
public class AdminPaihaoController {

    @Autowired
    PaihaoRepository repository;

    /*
     * 页面相关
     * */
    @GetMapping("/list")
    public String list(ModelMap map) {
        //获取小桌未入座的用户
        List<Paihao> listSmall = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), false, 0);
        //获取大桌未入座的用户
        List<Paihao> listBig = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), false, 1);
        map.put("listSmall", listSmall);
        map.put("listBig", listBig);
        return "paihao/list";
    }

    @GetMapping("/ruzhuo")
    public String ruzhuo(@RequestParam("id") int id, ModelMap map) {
        try {
            Paihao paihao = repository.findById(id).orElse(null);
            if (paihao == null) {
                throw new DianCanException(ResultEnum.PAIHAO_NOT_EXIST);
            }
            if (paihao.getRuzuo()) {
                throw new DianCanException(ResultEnum.PAIHAO_STATUS_ERROR);
            }
            paihao.setRuzuo(true);
            repository.save(paihao);
        } catch (DianCanException e) {
            map.put("msg", e.getMessage());
            map.put("url", "/diancan/adminPaihao/list");
            return "zujian/error";
        }
        map.put("url", "/diancan/adminPaihao/list");
        return "zujian/success";
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

管理页对应的代码很简单，就是一个显示当前排号数据列表，另外一个就是操作到号用户入座，后面还会添加到号后微信订阅消息通知相应用户的功能。
到这里完整的点餐排号等位功能就差不多实现了，相应的讲解视频和源码我会放到网盘，感兴趣的同学可以联系石头哥vx: 2501902696

第11节，微信订阅消息推送的讲解

其实想给点餐系统加推送很久了，之前也有单门写过Java版的微信消息推送和云开发版的微信消息推送。之所以一直没有加，也是考虑到大家的学习接受度，因为做订阅消息推送是一个综合性的开发工作。
需要你既要会小程序端开发，又要会Java端开发，还要会web网页端开发。还要懂得小程序公众号后台操作，还要自己去申请消息模板，自己配置appid，模板id，模板内容。就是因为怕大家一上来被这么多问题吓到，所以一直没有搞点餐系统的消息推送。

老规矩，先看效果图

我们今天就以排号入座为例，当排号等位的用户被叫号时，会给用户发送一条微信订阅消息。就是在管理点击下图的可入座时，发送订阅消息给用户。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QHdft1kj-1616120369993)(https://upload-images.jianshu.io/upload_images/6273713-8bd91ecb9666ba7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

至于如何创建模板消息，如果获取模板id我这节就不再讲解，不知道的同学可以查看我上篇文章《借助云开发实现小程序订阅消息和模板消息的推送功能》里面有详细的讲解。
今天呢就来重点讲下如何在Java后台编写小程序订阅消息推送的知识。
其实我很早之前有写过一篇Java实现模板消息推送的，但是小程序后面用订阅消息替换了模板推送，所以我也会根据最新的知识点不定期的更新文章的。

发送订阅消息三步走
1，拿到用户的openid
2，获取access_token
3，调用小程序消息推送的接口

一，获取用户的openid

关于用户openid的获取，我写过很多篇文章了，也有录过视频出来的，还不知道怎么获取的同学，可以取翻看下我之前的文章，或者看下我录制的零基础入门小程序的视频：《5小时零基础入门小程序云开发》 所以这一步不是今天的重点。
我们点餐系统里前面的排号功能讲解里也已经成功的存入了我们的openid到数据库了。

二，获取access_token

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html

首先来看下access_token是什么，下图是官方给出的
image

其实通俗的讲，access_token就是小程序官方给我们提供的一个凭证，你要调用小程序官方的接口，就必须先拿到access_token。所以下面先讲下如果获取access_token

  • 看下官方文档，可以知道我们需要用到下面的几个参数

    grant_type是一个固定的值，只有appid和secret是需要我们填入的，这两个值在我们的小程序后台就可以拿到，我也有录视频教大家如何拿到，如果不知道怎么获取的同学可以去看下我的视频。

    这里需要注意的是，AppSectet一定要记好，要不然每次都要重置。

下面就是Java代码的编写了

我们这里用的是springboot，这里涉及到一个请求小程序官方接口，所以我们这里用了springboot自带的RestTemplate来做网络请求。具体代码如下。

可以看出代码很简单，就是用RestTemplate来实现一个get请求，这样我们就可以轻松的获取到了access_token。获取到的access_token返回数据如下图。

请求上面代码，返回的数据如下。

注意点

关于这个access_token，是存在有效期的，来看下官方给出的提示

image

所以我要在获取到access_token的时候，把access_token存到数据库，或者存到本地缓存，并且还要记录当前时间，后面再用的时候先判断这个access_token有没有超过2个小时，如果超过2个小时的话，就要重新获取了。由于这里不是本节的重点，我这里只给大家说下原理。

三，发送消息到小程序

我们通过上面第二步，成功的获取到了access_token。下面就要调用小程序官方为我们提供的发送消息的接口了。先看下官方文档。

image

上面的参数都是我们发送消息时需要的。这些参数的定义和设置我在前面的文章里也都讲过了，不知道的同学可以去看下我前面写的这篇文章 《借助云开发实现小程序订阅消息和模板消息的推送功能》

这里需要注意的一点是，我们要给用户发送消息，就必须引导用户授权，就是下面这个图

因为用户不点击允许，你是没有办法给用户推送消息的。每一次授权只允许发送一条消息，所以如果你想尽量多的发送消息，就得尽量多的引导用户授权。

推送的Java代码如下

可以看到，我们这里需要定义用户的openid，模板id，跳转路径，模板消息内容。。。

这些都定义好以后，我们就可以提供一个服务给到Java的其他代码调用，或者提供一个接口供外界传入openid，然后给对应的用户推送消息了。

我们在浏览器里调用上面接口，可以看到下图所示，这样就代表我们消息推送成功了。

image
这里要注意，我们要把openid和一些参数动态的获取到，然后封装到模板里。

所以接下来继续改造我们的推送代码

我们既然要获取一些用户的信息，比如openid，桌号，排队开始时间等，我们一个个传进来就有些太麻烦了，所以最简单的方式，就是把排号表里对应的id拿过来。所以我们只需要知道用户当前排号的id，就可以拿到所有需要的信息。
改造后的发送订阅消息的方法如下：

这个时候，如果我们直接调用发送，会报下面这个错误。

仔细看下错误，就可以知道，我们的模板id不正确，所以，我们要配置我们自己的模板id。我们可以去小程序后台获取到我们自己的模板id。

填入我们的模板id后，还会报下面的错误。


上面的这个错误，就是因为我们在小程序端没有做授权。所以授权这一步也必不可少的。而这个授权应该在用户点击取号的时候，就应该弹出来询问用户授权的。

四，微信小程序端用户授权

授权代码的官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html

下面我把小程序端的代码和注意事项也和大家说下

我们在用户取号时，不仅要请求取号接口，还要获取用户授权。

这个模板id为了方便管理，我写在了app.js里了，方便全局使用。

其实小程序端只需要做这些就可以了，无非在取号时，我们要把模板id传给后台，存到数据库，方便后台Java后台调用消息发送时使用。

五，我再把Java的完整代码贴出来给到大家

1，获取AccessToken

//获取AccessToken
    public String getAccessToken() {
        RestTemplate restTemplate = new RestTemplate();
        Map<String, String> params = new HashMap<>();
        params.put("APPID", GlobalConst.APPID);  //这里替换成你的appid
        params.put("APPSECRET", GlobalConst.APPSECRET);  //这里替换成你的appsecret
        ResponseEntity<String> responseEntity = restTemplate.getForEntity(
                "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={APPID}&secret={APPSECRET}", String.class, params);
        String body = responseEntity.getBody();
        AccessToken object = new Gson().fromJson(body, AccessToken.class);
        log.info("返回的AccessToken={}", object);
        String Access_Token = object.getAccess_token();
        return Access_Token;
    }


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

2，Java调用订阅消息推送

package com.qcl.push;
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import com.qcl.bean.Paihao;
import com.qcl.global.GlobalConst;
import com.qcl.repository.PaihaoRepository;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestClientException;
import org.springframework.web.client.RestTemplate;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 作者：编程小石头
 * 发送小程序订阅消息
 */
@Service
@Slf4j
public class SendWxMessage {
    @Autowired
    private PaihaoRepository repository;
    //发送订阅消息
    public String pushOneUser(Integer id) {
        Paihao paihao = repository.findById(id).orElse(null);
        RestTemplate restTemplate = new RestTemplate();
        //这里简单起见我们每次都获取最新的access_token（时间开发中，应该在access_token快过期时再重新获取）
        String url = "https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=" + getAccessToken();
        //拼接推送的模版
        WxMssVo wxMssVo = new WxMssVo();
        wxMssVo.setTouser(paihao.getOpenid());//用户的openid（要发送给那个用户，通常这里应该动态传进来的）
        wxMssVo.setTemplate_id(paihao.getTemplateid());//订阅消息模板id
        wxMssVo.setPage("pages/index/index");
        //封装模板消息内容。必须和你申请的小程序模板格式一模一样。
        Map<String, TemplateData> m = new HashMap<>(2);
        //A小桌，B大桌
        String num = (paihao.getType() == 1 ? "B" : "A") + paihao.getNum();
        m.put("phrase1", new TemplateData("您可入座啦"));
        m.put("character_string5", new TemplateData(num));
        wxMssVo.setData(m);
        ResponseEntity<String> responseEntity =
                restTemplate.postForEntity(url, wxMssVo, String.class);
        log.info("推送返回的信息 ={}", responseEntity.getBody());
        return responseEntity.getBody();
    }
    //获取AccessToken
    public String getAccessToken() {
        RestTemplate restTemplate = new RestTemplate();
        Map<String, String> params = new HashMap<>();
        params.put("APPID", GlobalConst.APPID);  //这里替换成你的appid
        params.put("APPSECRET", GlobalConst.APPSECRET);  //这里替换成你的appsecret
        ResponseEntity<String> responseEntity = restTemplate.getForEntity(
                "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={APPID}&secret={APPSECRET}", String.class, params);
        String body = responseEntity.getBody();
        AccessToken object = new Gson().fromJson(body, AccessToken.class);
        log.info("返回的AccessToken={}", object);
        String Access_Token = object.getAccess_token();
        return Access_Token;
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

WxMssVo类

package com.qcl.push;

import java.util.Map;

/*
 * 小程序推送所需数据
 * 编程小石头
 * */
public class WxMssVo {
    private String touser;//用户openid
    private String template_id;//订阅消息模版id
    private String page = "pages/index/index";//默认跳到小程序首页
    private Map<String, TemplateData> data;//推送文字

    public String getTouser() {
        return touser;
    }

    public void setTouser(String touser) {
        this.touser = touser;
    }

    public String getTemplate_id() {
        return template_id;
    }

    public void setTemplate_id(String template_id) {
        this.template_id = template_id;
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }

    public Map<String, TemplateData> getData() {
        return data;
    }

    public void setData(Map<String, TemplateData> data) {
        this.data = data;
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

TemplateData类

package com.qcl.push;

import lombok.Data;

/*
 * 编程小石头
 * 用来封装订阅消息内容
 * */
@Data
public class TemplateData {
    private String value;//

    public TemplateData(String value) {
        this.value = value;
    }

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

AccessToken类

package com.qcl.push;
import lombok.Data;
/**
 * 作者：编程小石头
 * 微信返回的Access_Token对应的bean
 */
@Data
public class AccessToken {
    private String access_token;
    private String expires_in;
}



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

服务器部署相关（选学）

001~简单Java项目部署到腾讯云linux服务器

前面给大家讲了一个点餐系统的开发，包括java点餐后台和微信点餐小程序。可是都是教大家如何在本地把项目跑起来。今天就来教大家如何把这个点餐系统部署到服务器，实现商用。

本节知识点

  • 1，使用springboot开发java项目
  • 2，小程序后台的开发
  • 3，小程序后台部署到服务器
  • 4，java项目部署到服务器
  • 5，springboot项目部署到服务器

准备工作

  • 1，需要购买一台腾讯云服务器
  • 2，需要开发一个springboot后台项目
  • 3，需要购买一个域名，并做备案。
  • 4，需要配置你的服务器环境 jdk，mysql（下面会做讲解）

我们默认你上面的准备工作都做好了，下面我们就来开始学习把后台项目部署到服务器，让所有人都可以访问到你的服务器。

一，首先创建一个springboot（java项目）

1，创建springboot项目，选用jdk1.8

2，填写包名，选择配置，这些保持默认即可
image
3，添加一些项目依赖，使用最新springboot版本
image.png
4，项目名，项目目录设置。可以保持默认
image
5，导入依赖，下面两种方式都可以。
image
6，实现一个简单的后台数据接口
image
如果上面这些简单的创建一个项目的步骤你不是很懂，可以看下我录制的java零基础视频：https://edu.csdn.net/course/detail/23443

  • 7，本地运行项目
    image
    8，运行成功的标示，在run里看到控制台日志显示项目端口是 8080
    image
    9，浏览器里访问本地项目，查看访问效果。可以看到我们成功的访问到了后台数据。
    image

二，项目打包

上面给大家演示的是在idea开发者工具里启动的项目，我们正常部署服务器的时候，肯定不会有开发者工具的，所以我们接下来要先学会项目打包，然后在本地通过命令行的方式运行后台项目。

  • 1，项目打包
    image
  • 2，打包成功
    image
  • 3，修改jar的名字（也可以不改名字，我是觉得这个jar名字太长，所以改一个短的）
    image
    我这里改名为qcl80.jar 建议大家也改成这个名字，因为后面运行脚本里用的就是qcl80这个名字，大家和我保持一致，省得出问题。
    image

三，服务器环境的登录

我们前面三步，都是在自己的本地电脑启动的后台项目，这样我们只能在自己的电脑浏览器访问到，别人是访问不到的，如果想让别人访问，就需要把我的qcl80.jar这个文件传到服务器上，并且在服务器上通过命令行启动这个java项目，这样别人才可以访问到

所以我们接下来要讲服务器环境的搭建。

  • 1，首先我们要买一台云服务器（推荐阿里云或者腾讯云）
  • 2，买完服务器后我们登录服务器后台，这里以腾讯云为例。
    image
  • 3，点击登录
    image
    重置密码方式
    image
  • 4，输入实力的账号和密码，登录linux服务器
    image
  • 5，登录成功
    image
    大家不要看到一堆命令行，就头疼，我接下来会教大家如何一步步配置服务器环境的。大家只需要跟着我的步骤，一步步来就可以了。

四，linux服务器安装jdk

  • 1，采用yum安装jdk1.8，非常简单，下面用来查看yum库中jdk的版本
yum search java|grep jdk			


  • 1
  • 2

image

安装jdk8

yum -y  install java-1.8.0-openjdk*    


  • 1
  • 2

image
耐心的等待jdk的安装，大概2分钟左右，出现下面标志，即代表安装成功
image

  • 2，检查jdk是否安装成功
    命令行里输入 java -version 出现下面标示，可以看到我们的jdk版本 1.8.0_222
    image

五，上传jar包到服务器

我们第五步已经在linux服务器上成功的安装了jdk，接下来就是要想办法把qcl80.jar传到服务器了。可能有同学要问了，你部署服务器，不要在linux服务器里安装tomcat吗，其实我们用springboot开发出来的jar包，已经有内置的tomcat了。所以我们不用再部署tomcat了，只需要把qcl80.jar这个文件上传到服务器，然后用java命令启动即可。

我们上传文件到Linux服务器用下面这个软件
image
你只需要去百度下你电脑对应系统的安装包，安装即可。具体怎么安装这里就不教大家了。

下面教下大家如何使用FileZilla上传文件到服务器。

1,打开FileZilla软件， 链接服务器
image
2，去服务器根目录看看
image
image
3，上传文件到home文件里，如果在父亲根目录没有home文件，可以自己新建。
image
到这里我们就成功的上传qcl80.jar到服务器了。下面就教大家如何在服务器里启动我们的项目。

六，在服务器里启动java后台项目

1，首先重复上面第四步登录服务器。然后在服务器里输入

cd..    #用来返回服务器根目录 
ls      #显示当前根目录有那些文件


  • 1
  • 2
  • 3

image

cd home     #进入home文件
ls          #显示home文件里都有那些子文件，可以看到我们的qcl80.jar


  • 1
  • 2
  • 3

image

2，启动java项目

java -jar qcl80.jar


  • 1
  • 2

image

3,项目启动成功，出现下面的标示，即代表项目启动成功
image
4,访问我们服务器的项目
image
通过上图可以看到，我们通过公网ip+8080端口，可以成功的访问到我们服务器的数据了。

  • 我们再用手机浏览器试试
    image
    可以看到我们在手机浏览器里也可以访问到后台数据了。你把上面的这个网址发给你朋友，你朋友应该也可以访问到数据了。
    到这里我们就成功的把一个java项目部署到服务器，并成功的可以让任何人访问了，但是有个问题，你用公网ip做域名，很容易被封的，基本上能成功访问几次以后，就会被拒绝访问了

所以我们接下来还要讲解如何通过域名访问我们的服务器

我会把这些录制成视频来给大家做讲解，

讲解视频地址：https://study.163.com/course/courseMain.htm?courseId=1209428915（如购买，找石头哥要视频和配套资源）

七，服务器绑定域名

我们在做域名绑定之前，需要你先自己去注册一个域名，比如我注册的域名是：“www.saibanmall.com”，我这里还是以腾讯云为例

  • 1，登录腾讯云后台，找到自己的域名列表，点击解析
    image
  • 2，添加解析规则
    image
  • 3，绑定自己服务器的公网ip到解析规则
    image
  • 4，我们主要设置下面两个解析规则
    image
    这样把我们服务器公网ip和域名绑定以后，就可以通过域名访问我们的服务器了，效果如下。
    image
    再来看下手机浏览器访问的效果
    image

还有我们小程序访问的效果。

image

到这里我们就成功的部署好我的后台服务器了，但是还有几个问题

  • 1，小程序上线的话需要https请求，所以我们后面还会讲我们的服务器如何支持https
  • 2，我们通过java -jar qcl80.jar部署的java项目，不能后台运行。所以我们后面还会讲如何让我们的java项目常驻后台运行。

八，java项目在服务器后台长期运行

我们通过上面的方法，会有一个问题，就是我们命令行窗口关闭时，会导致java项目停止，所以我们要通过脚本实现java项目在后台长期运行。

springboot生成的jar在阿里云的linux服务器后台运行

image
通过创建stop.sh , start.sh ,run.sh这三个脚本文件来实现后台长久运行springboot
这里我把运行的qcl80.jar ，start .sh,stop.sh ,run.sh都放在home下的jar目录下

  • 1，创建stop.sh

vim stop.sh 创建文件然后把下面内容复制进去，一定要把qcl80.jar替换成你的jar

#!/bin/bash
PID=$(ps -ef | grep qcl80.jar | grep -v grep | awk '{ print $2 }')
if [ -z "$PID" ]
then
    echo Application is already stopped
else
    echo kill $PID
    kill $PID
fi


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 2，创建start.sh,

这里我们用80端口，这样可以直接通过ip访问，不用再输端口了
vim start.sh 输入这个命令后然后把下面的内容复制进去

#!/bin/bash
nohup java -jar qcl80.jar --server.port=80 &


  • 1
  • 2
  • 3
  • 3，创建run.sh

整合了关闭和启动的脚本：run.sh，由于会先执行关闭应用，然后再启动应用，这样不会引起端口冲突等问题，适合在持续集成系统中进行反复调用。
把下面内容复制进去，一定要注意复制时不能少东西

#!/bin/bash
echo stop application
source stop.sh
echo start application
source start.sh


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 4，start .sh,stop.sh ,run.sh都创建后

./run.sh 运行run.sh脚本
如果遇到没有权限运行的问题，就在run.sh所在目录下执行
chmod u+x *.sh 这样就ok了。
执行完以后，我们可以去nohup.out文件中查看启动的log
cat nohup.out 这个命令可以查看jar启动的log
image
这个时候我们的项目就启动了，就可以通过下面这个网址访问项目了：http://saibanmall.com/

上面start.sh,stop.sh,run.sh如果觉得写起来麻烦的话，也可以直接获取我写好的。
image

image

有问题可以加我微信：2501902696

002~java配置ssl证书实现https请求

上一节给大家讲了服务器的部署，正常的http请求都可以实现了，但是我们做小程序开发时需要用到https，所以这一节要教大家如何让自己的后台服务器实现https请求。这节是以java部署服务器并配置https为例，别的语言可以把这篇文章作为参考。

我们实现https必须先具备下面条件

1，申请一个ssl证书（阿里云腾讯云都可以免费申请）
2，有一台自己的服务器（阿里云腾讯云都可以）

一，申请ssl证书

这里以腾讯云为例，我们首先要登录自己的腾讯云服务器，然后进入ssl证书申请页。
image
然后选择免费的ssl证书，申请即可
image
给证书绑定域名，一个证书只能绑定一个顶级域名或者二级域名。
image
证书申请成功
image

二，下载ssl证书

点击下载证书后，会得到一个压缩包，解压后可以看到每种服务器对应的证书，选择自己的即可。
image
我们看下tomcat对应的文件都有什么
image

把证书放到我们项目里

image.png

三，springboot项目配置ssl证书

image
代码给大家贴出来

#https加密端口号 443
server.port=443
#SSL证书路径 一定要加上classpath:
server.ssl.key-store=classpath:2501902696.jks
#SSL证书密码（密码在第一步的keystorePass.txt中）
server.ssl.key-store-password=x6qm42y4auvhh
#证书类型
server.ssl.key-store-type=JKS


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

配置好以后，我们就可以使用maven打包了。
image
打包完成后，我们把打包好的jar包改下名字
image
改名完成后，我们通过FileZilla 把这个jar包上传到服务器。
image
上面上个脚本是我提前定义好的，我的上一篇文章里有讲怎么定义脚本文件，这三个脚本是为了我们的项目可以长期运行在后台用的。

四，进入服务器，部署项目。

点击登录，登录服务器
image
进入服务器对应的目录
image
我们通过执行 ./run.sh 来运行项目， 如果遇到没有权限运行的问题，就在run.sh所在目录下执行 chmod u+x *.sh 这样就ok了。
image
通过上图可以看到，我们成功执行来 run.sh脚本。
然后执行下面命令可以查看我们项目是否成功启动

tail -f nohup.out


  • 1
  • 2

image

五，访问https

image
通过上图我们可以看到，我们成功的访问到了https。到这里我们的https就配置好了，然后把我们的域名配置到小程序里就可以直接在小程序里使用https了。

003~腾讯云Linux服务器安装Mysql8并实现远程访问

上一节已经给大家讲解了我们java项目，也就是微信小程序后台项目部署到腾讯云服务器，但是呢，我们服务器肯定要装mysql数据库吧，要不然我们的数据放哪里呢，所以这一节来教大家如何在linux服务器里安装mysql数据库，并做一些数据库常见的配置。

一，首先还是登录到我们的服务器

服务器如何登录我在上一节已经讲过了，大家只需要去看我上一节课程即可。
image
然后通过下面命令行，检测服务器上是否安装过mysql

rpm -qa|grep mysql


  • 1
  • 2

如果安装过，可以通过下面命令卸载删除

rpm -e --nodeps mysql-libs


  • 1
  • 2

二，下载并安装mysql

  • 1，检查服务器是否已经安装过mysql
yum list installed mysql*


  • 1
  • 2

出现下图所示，代表没有安装过
image

  • 2,安装mysql源
sudo wget https://repo.mysql.com//mysql80-community-release-el7-1.noarch.rpm



  • 1
  • 2
  • 3
  • 3,下载mysql rpm源
wget http://repo.mysql.com/mysql57-community-release-el7-8.noarch.rpm


  • 1
  • 2

  • 4安装下载好的rpm包
sudo rpm -ivh mysql80-community-release-el7-1.noarch.rpm 


  • 1
  • 2

  • 5安装mysql，发现提示，y到底
sudo yum install mysql-server


  • 1
  • 2


凡是让输入的地方，都输入y

image

image
有的地区服务器安装mysql比较慢，只能耐心等待了

出现下面标志，代表安装成功
image

  • 6,查看下mysql的版本，确定是否安装成功
mysql -V


  • 1
  • 2

可以看出我们安装的mysql版本是5.7.27

  • 7，运行mysql
service mysqld start


  • 1
  • 2

image
查看是否启动

service mysqld status


  • 1
  • 2

出现下面箭头所示，代表已经启动mysql
image

  • 8，取得mysql初始化随机密码
grep "password" /var/log/mysqld.log


  • 1
  • 2

image
可以看到我们的初始密码是 l>KbWhk6K&+Y

  • 9，登录mysql
mysql -uroot -p'l>KbWhk6K&+Y'


  • 1
  • 2

记得把l>KbWhk6K&+Y换成你自己的密码。下面代表登录成功。
image

  • 10，更改root密码
alter user user() identified by '你的新密码';


  • 1
  • 2

（“需要带数字，大写字母，小写字母，特殊符号”）如我设置密码为 Qc123456!

设置密码永不过期

ALTER USER 'root'@'localhost' PASSWORD EXPIRE NEVER; 


  • 1
  • 2

image
一定要记得执行下面代码刷新MySQL的系统权限相关表

flush privileges; 


  • 1
  • 2

image

三，设置mysql可以远程访问

默认情况下，我们的mysql只可以在服务器的本地访问，远程是没法访问的，今天就来教大家如何设置mysql的远程访问。

  • 1，同样还是先登陆mysql，这时登陆记得用我们新设置的密码。
    如我们的mysql -uroot -p’Qc123456!’ 这里的Qc123456!就是我的新密码

    2，登陆成功后用 show databases; 来显示所有的数据库

    3，use mysql; 来更改管理员信息

    4，select user,host from user; 查询所有的管理员

    5， update user set host = ‘%’ where user = ‘root’; 更新root用户的本地访问为% ，即代表可以远程访问。通常情况下我们的root用户应该只能本地访问，但是我们今天是为了学习方便，所以就设置root可以远程访问了。

    6，设置完，一定要记得 flush privileges;刷新下权限。

    7，再来看user表，root后面的信息就改变了。

四，添加mysql数据库的子管理员

我们上面直接用root来操作数据库，有些危险，所以我们再来教大家添加一个子管理员。

如上图所示:
1,添加用户名为xiaoshitou，密码为Xiaoshitou123!的子用户

create user 'xiaoshitou'@'%' identified with mysql_native_password by 'Xiaoshitou123!';


  • 1
  • 2

2，设置xiaoshitou这个用户可供远程访问

grant all privileges on *.* to 'xiaoshitou'@'%' with grant option;


  • 1
  • 2

3，刷新权限

flush privileges;


  • 1
  • 2

可以看到我们的xiaoshitou用户的host也变成了 %

4，可以看到我们的xiaoshitou子用户也可以供远程访问了(远程访问前，要记得设置下服务器的安全组，下面第五步有讲)

后面的生产环境里我们也可以给这个xiaoshitou用户设置一些权限，比如只可以增加和修改mysql数据库，不可以删除数据。。。。

五，设置完以后不要忘记设置你服务器的安全组

出站和入站规则都要设置3306端口
image
image

六，idea远程访问服务数据库。

  • 1，进入mysql链接
    image
  • 2，输入信息链接服务器mysql数据库
    image
  • 3，查看链接效果
    image

到这里我们就完整的在linux服务器里安装好mysql了，并且可以通过远程访问到。

有任何问题可以加我微信询问：2501902696（只限年卡用户奥）

004~部署点餐系统到腾讯云服务器

经过前面几节的学习，我们在腾讯云Linux服务器上成功的安装了jdk8，mysql8，并且教会了大家如何配置ssl证书实现https，今天我们就来正式的部署点餐系统到linux服务器，这里以腾讯云服务器为例。

准备工作

  • 1，linux服务器安装jdk8
  • 2，linux服务器安装mysql8
  • 3，申请ssl证书，配置https
  • 4，要有一个备案的域名
    上面这几条我前面的章节和视频都有讲解过，大家翻下我的文章，或者去看下我的视频：《点餐系统，java后台+点餐小程序》
    上面的准备工作都做好以后，我们就来开始正式的部署工作了。

一，申请并下载ssl证书

这里以腾讯云为例，我们首先要登录自己的腾讯云服务器，然后进入ssl证书申请页。

然后选择免费的ssl证书，申请即可

给证书绑定域名，一个证书只能绑定一个顶级域名或者二级域名。

等待审核，证书申请成功后点击下载

下载解压后有下面几个，我们使用Tomcat


把证书放到我们项目里的resources目录下

二，配置ssl证书到点餐项目里


把上图的配置代码贴出来给大家，一定要注意，根据代码上的注释来配置。

server:
  #https加密端口号 443
  port: 443
  #SSL证书路径 一定要加上classpath:
  ssl:
    key-store: classpath:xiaoshitou.jks
    #SSL证书密码（密码在第一步的keystorePass.txt中）
    key-store-password: pa2pzzb8436
    #证书类型
    key-store-type: JKS


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

同时数据库的账号和密码记得改下

三，打包项目成jar包

我们这里使用maven打包

等待项目打包

打包成功


把jar包改名为qcl443，为后面部署做准备

四，通过FileZilla把jar包和443运行脚本上传到服务器

通常服务器有个home目里，我们把jar包和脚本文件放到home目里下

五，登陆服务器，创建数据库和表

1，到服务器后台，点击登陆

2，登陆mysql

qcl.sql里的语句

3,把我们qcl.sql里的sql语句复制到控制台，执行如下

然后按ctrl+z,退出mysql命令行

然后cd …回到我们的跟目里

也可以直接 cd …/home 进入我们的home目录里

六，执行脚本运行项目

进入home目里后，可以看到我们之前传的qcl443.jar和脚本文件,然后执行 ./run.sh

通常会遇到上图所示，没有权限的问题，这个时候我们 在目录下执行 chmod u+x *.sh 这样就ok了。

然后再执行 ./run.sh 就可以执行脚本,启动项目了

然后再输入 tail -f nohup.out查看执行日志

七，配置出站和入站规则

在安全组里添加443端口的出站和入站规则

八，域名绑定公网ip



这些都处理好以后，就可以通过https链接访问点餐后台了

九，访问演示

这样我们熟悉的登陆页面，就部署成功了，外界就可以访问我的程序了。

登陆后台后，记得添加一个轮播图片，下面小程序演示时会用到

https://www.pyjwyx.com/diancan/leimu/list这个是我一个学生的，大家可以用这个访问下点餐后台试试。你自己部署的时候，一定要记得把下面的XXX换成你自己的域名 https://XXX/diancan/leimu/list

十，小程序里演示

1，在app.js里把baseUrl配置为
https://你的域名/diancan
image.png
2,先勾选不校验https

3，然后就可以看到我们访问到了后台配置的轮播图数据

十一，小程序配置安全域名


如果我们的不校验https没有勾选，就会报下面的错误

本地调试不校验https没事，但是我们要上线小程序的话，必须校验小程序，所以，我接下来需要把我们的域名配置到小程序安全域名里。

添加域名到request里，如我的是 www.pyjwyx.com和pyjwyx.com

可以看到我们的域名已经添加到了request合法域名里

这样我们就可以成功的加载到数据了

然后点餐系统就可以提交发布了。

到这里我们的点餐系统和点餐小程序就可以成功的供外界使用了，后面会更新更多Java和小程序的课程出来，请持续关注。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/46830
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号