3. 前端

这里介绍的是idea开发工具下的项目打包

3.1 项目打包

一定要在指定项目路径下打开 Terminal，不然会打错项目的包.

右击项目名称，然后点击 Open in Terminal：

在下面的 Terminal窗口中，输入打包命令： npm run build，然后回车即可开始打包：

打包成功：

3.2 部署

该前端项目路径下找到 dist文件夹，即已打包好的代码和静态文件都在里面。

将 dist文件夹上传至服务器

阿里云服务器：可以通过共享的那个磁盘进行复制拷贝直接上传；
将 dist文件夹放在 nginx目录下的 html文件夹中

3.3 修改 nginx 配置文件

在nginx目录下的conf文件夹中找到 nginx.conf 配置文件，先备份一下（以防自己乱配配错了），然后双击点开 nginx.conf

根据自己的情况修改配置文件：

3.4 访问

在 nginx 启动的情况下，部署并配置好文件后，即可根据 公网IP+:端口号 或 域名，在浏览器上访问，如下：

http://xx.xxx.xxx.xx:8004/

如果能正常打卡前端项目的首页，即部署成功。至于能不能跟后端连通，还得部署好后端和数据库。

4. 后端

这里介绍的是idea开发工具下的项目打包

4.1 项目打包

先点开右边的 maven缩小工具栏，先双击 clean清一下缓存，然后再双击 package 进行打包：

4.2 部署

该后端项目路径下找到 xxx.war 打包文件。

将 xxx.war 打包文件上传至服务器

阿里云服务器：可以通过共享的那个磁盘进行复制拷贝直接上传；
将 xxx.war 打包文件放在Tomcat目录下的 webapps文件夹中：

在Tomcat目录下的 bin文件夹中双击 startup.bat即可启动Tomcat，运行Tomcat后会自动将打包文件解压：

4.3 修改 Tomcat 配置文件

进入tomcat的conf目录下，找到server.xml文件进行备份，然后再配置.

5. 数据库

5.1 与MySQL建立连接

点击连接，在下拉列表中选择 MySQL
在弹出的对话框中输入连接名，然后点击左下角的 “测试连接” ，如果成功会弹出 “连接成功” 提示框，然后点击提示框中的 “确认”按钮，再点击右下角的 “确认”按钮，即新的连接已创建成功：

左边会出现刚刚创建的连接，双击新建的连接名，即可自动连接打开：

5.2 将项目的数据迁移导入服务器中

先将本机数据库中数据转储为SQL文件：双击要迁移的数据库名，连接后再右击，然后选中 ”转储 SQL 文件“ -----》 ”结构和数据…“，然后选择转储的SQL文件保存的路径位置.

将该 SQL文件上传至服务器，在服务器中的 Navicat中新建一个同名的数据库：
- 在新建的roseLin连接名选中右击，然后在弹出的右键菜单中选择 ”新建数据库…“；
- 在弹出的 ”新建数据库“ 对话框中填入和本机转储的数据库一致的数据库名，字符集和排序规则可以根据自己需求选择，也可以不填，然后点击确认；
双击新建好的数据库名，连接后再右击，然后在弹出的右键菜单中选择 ”运行SQL文件…“；
在弹出的 ”运行 SQL 文件“对话框中，点击右侧 ”…“ 按钮，选择要运行的SQL文件，然后点确定再点击开始，即可将数据库完整复制过来；

5.3 创建新用户

这里之所以会介绍如何创建新用户，是因为我后端项目连接数据库不是用的 MySQL的root用户和密码连接登录，是我之前在本机自建的用户roselin，故将数据库的数据迁移到服务器时，也要创建同样的用户roselin 用于后端连接数据库.

后端连接数据库部分代码：
......
datasource:type: com.alibaba.druid.pool.DruidDataSourcedruid:#    MySQL配置url: jdbc:mysql://localhost:3306/zssy_ydpd_dev?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&allowMultiQueries=true&allowPublicKeyRetrieval=trueusername: roselinpassword: roselin......

点击菜单栏中的 “用户” ，然后再点击下面的 “新建用户” ：
在 “常规”栏中填入相关信息，用户名和密码可以自定义，主机名根据需要填写：
在 “服务器权限”栏中勾选该新用户可以拥有的权限：
在 ”权限“栏中点击 ”添加权限“，在弹出的 ”添加权限“的对话框中先在左侧选择要授权于新用户的数据库，并勾选右侧其可以拥有的操作权限，然后勾选好后点击下面的 ”确认“按钮：（可以添加多个数据库权限）
最后点击左上角的保存即可：
查看：点击菜单栏中的 ”用户“ 即可查看到刚刚新创建的用户

6. 使用公网IP/域名访问

nginx 和 Tomcat 都要启动，然后在浏览器的地址栏输入 公网IP+:端口号 或 域名 直接访问。

切记：若要随时都能访问该项目，nginx 和 Tomcat 要一直处于运行状态，不能关闭服务器。

7. 将页面挂在到微信公众号上

因为只是做个项目部署着玩，所以关于微信公众号部分只涉及到测试号，正式的微信公众号还未挂载过项目页面.

7.1 测试号申请

官方申请微信公众号测试号的地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

登录成功后就可以获取到测试号的信息：

7.2 设置外网域名

1.配置接口配置信息

在页面找到接口配置信息那一栏：

URL：通过IIS发布消息接口（接口编写方式如下），并把接口地址填入URL中。必须以 http:// 或 https:// 开头，分别支持80端口和443端口，最好就是使用域名，不要使用公网IP（例如：https://xxxxxx.ngrok.io/api/ydpd/app/wxBind）；

使用 ngrok 将内网映射成外网可以访问的域名，参考第二部分的软件安装的第2.7节

具体后端接口代码如下，接口地址例子：https://xxxxxx.ngrok.io/api/ydpd/app/wxBind，app是Controller，wxBind是Action。

/*** APP微信相关*/
@RestController
@RequestMapping("/app")
@Api(tags = "APP微信相关接口")
public class AppWxController {....../*** 微信认证*/@RequestMapping("wxBind")@ApiOperation(value = "认证微信", notes = "认证微信")public String wxBind(@ApiParam(value = "signature", required = true) @RequestParam(name = "signature", required = true) String signature,@ApiParam(value = "timestamp", required = true) @RequestParam(name = "timestamp", required = true) String timestamp,@ApiParam(value = "nonce", required = true) @RequestParam(name = "nonce", required = true) String nonce,@ApiParam(value = "echostr", required = true) @RequestParam(name = "echostr", required = false) String echostr) {System.out.println("result"+wxMpService.checkSignature(timestamp, nonce, signature));return wxMpService.checkSignature(timestamp, nonce, signature) ?  echostr: signature;}......
}

Token：可随意填写，但是必须和接口所传的Token值保持一致

后端关于微信接口的配置代码：

wx:mp:appid: wx********   # 要和测试号给的 appID、appsecret 和 token 信息一致secret: 8****c7a*****ec3b450***4bd7token: wxappaesKey:

2.配置JS接口安全域名

在页面找到JS接口安全域名那一栏：

JS接口安全域名：用于项目对微信接口进行API接口请求（可以是域名，也可以是 IP+端口号，但不需要填写http或https）

为了防止在项目中调用微信接口时出现 config:invalid url domain 的问题，JS接口安全域名要与项目页面请求路径域名一致；

比如，项目发起的请求是 http://xxx.xxx.xx/api/ydpd/app/wxSign，则JS接口安全域名就要填入：xxx.xxx.xx

3. 体验接口权限表配置

注意：不要填 http或https，直接填写域名或 IP:端口号

7.3 自定义公众号上的菜单栏

官网微信开放文档：https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html

微信公众平台技术文档–>自定义菜单，在该页面底部，可以发现有“使用网页调试工具调试该接口”，可以使用它进行创建菜单

先通过 appid 和 secret 获取 access_token（如下图），appid 和 secret 在测试号管理的测试号信息栏里可以查看到：
获取到 access_token 后，在接口类型中选择 “自定义菜单”，把获取到的 access_token 和菜单脚本【可参考微信公众平台技术文档中的自定义菜单中的脚本格式】填写到参数列表中。
然后打开关注的测试微信公众号，就可以在公众号的菜单栏中看到 “中三移动盘点” 这个模块。

7.3 访问

在页面找到测试号二维码那一栏，然后使用微信扫描二维码关注该测试公众号，关注后即可在该测试号上查看自己的项目。关注成功后，稍等一会就会显示出用户列表。如下：

以上内容是自己整理总结的，若有不对的地方，欢迎大家指出，一起学习交流。

第一篇：前后端分别部署教程 ---- 第一部分服务器
第二篇：前后端分别部署教程 ---- 第二部分相关软件安装

前后端分别部署教程 ---- 第三部分项目部署和挂载到微信公众号相关推荐

阅读源码的三种境界 (转码农翻身微信公众号)
"没有经验的技术差底子薄的初级程序员,如何阅读项目源码? " "有人阅读过 mybatis 的源码吗 ?就看一个初始化过程就看的已经头晕眼花了,小伙伴们支支招吧!&quo ...
SAP系统和微信集成的系列教程之八：100行代码在微信公众号里集成地图搜索功能
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自 ...
html5 jssdk,微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK
本文是连载JSSDK+H5的书,这里是第一篇揭秘----如何部署JSSDK 部署JSSDK不会太难,有时候需要一点后台知识,但也不是太难的那种,本节主要是用PHP作为后台参考语言,为了照顾初学者,把代 ...
(教程) 个人微信公众号做查券机器人怎么关联优惠券小程序？
淘客在注册微信公众号时,如果注册的是个人的未认证的订阅号公众号,导航菜单是无法添加网址链接的,虽然做查券返利不影响,但是用户无法直接进入到用户中心, 那么用户使用体验会大打折扣. 下面个人订阅号怎么关 ...
微信公众号php提交表单,PHP教程：使用YII2框架实现微信公众号中表单提交功能...
<PHP教程:使用YII2框架实现微信公众号中表单提交功能>要点: 本文介绍了PHP教程:使用YII2框架实现微信公众号中表单提交功能,希望对您有用.如果有疑问,可以联系我们. 相关主题: ...
前后端分离的探索（三）
文桥,13级机械系学生.在LSGO软件技术团队负责前端部分,本图文是介绍目前流行的前后端分离技术的第三篇,希望大家能够对这块有所了解. 当我们培养了对一门技术的认知,并通过一系列项目对这门技术进行了打 ...
微信公众号开发系列教程一（调试环境部署续：vs远程调试）
微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...
微信公众号页面支付接口java,[Java教程]微信公众号支付（三）：页面调用微信支付JS并完成支付...
[Java教程]微信公众号支付(三):页面调用微信支付JS并完成支付 0 2015-09-15 15:00:30 一.调用微信的JS文件 1.首先要绑定[JS接口安全域名],"公众号设置&q ...
C#微信公众号开发系列教程三（消息体签名及加解密）
http://www.cnblogs.com/zskbll/p/4139039.html C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C ...

前后端分别部署教程 ---- 第三部分项目部署和挂载到微信公众号

3. 前端

3.1 项目打包

3.2 部署

3.3 修改 nginx 配置文件

3.4 访问

4. 后端

4.1 项目打包

4.2 部署

4.3 修改 Tomcat 配置文件

5. 数据库

5.1 与MySQL建立连接

5.2 将项目的数据迁移导入服务器中

5.3 创建新用户

6. 使用公网IP/域名访问

7. 将页面挂在到微信公众号上

7.1 测试号申请

7.2 设置外网域名

7.3 自定义公众号上的菜单栏

7.3 访问

前后端分别部署教程 ---- 第三部分项目部署和挂载到微信公众号相关推荐

最新文章

热门文章

前后端分别部署教程 ---- 第三部分项目部署和挂载到微信公众号

3. 前端

3.1 项目打包

3.2 部署

3.3 修改 nginx 配置文件

3.4 访问

4. 后端

4.1 项目打包

4.2 部署

4.3 修改 Tomcat 配置文件

5. 数据库

5.1 与MySQL建立连接

5.2 将项目的数据迁移导入服务器中

5.3 创建新用户

6. 使用 公网IP/域名 访问

7. 将页面挂在到微信公众号上

7.1 测试号申请

7.2 设置外网域名

7.3 自定义公众号上的菜单栏

7.3 访问

前后端分别部署教程 ---- 第三部分项目部署和挂载到微信公众号相关推荐

最新文章

热门文章

6. 使用公网IP/域名访问