SpringBoot+Vue+MySQL+Redis在Windows机器上一键安装部署

整体安装部署流程:

  1. 初始化依赖服务和程序目录;
  2. 编写安装及卸载bat脚本;
  3. 通过Inno Setup将程序目录打包成exe;

Inno Setup下载地址:https://jrsoftware.org/isdl.php
Inno Setup文档:https://jrsoftware.org/ishelp/

1、初始化目录

将所需依赖和程序放入install目录,所需依赖尽量选择解压版,这样注册服务即可直接使用。如下图示,JDK、Nginx、MySQL、Redis等均为解压版。

Jenkins打包部署Vue项目至远程服务器

Jenkins打包部署Vue项目与打包部署后端项目原理是一样的,唯一的区别在于打包和部署的脚本上。

参考:Jenkins打包部署gitee项目至阿里云ECS服务器

具体配置步骤如下:

1、创建项目及配置
进入项目文件夹,点击“新建Item”,输入前端项目任务名称创建Freestyle project项目。

基础配置如下图示:

Vue环境安装及配置

名词概念:

npm(node package manager) Nodejs下的包管理器;

nvm(node version manager) Nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs;

nrm(npm registry manager) npm镜像源管理工具;

Nodejs安装

nodejs下载地址:https://nodejs.org/en/

选择安装路径直接下一步安装即可,安装完成后检查:

node -v 查看node版本
npm -v    查看包管理器版本

Vue项目埋点方案

前端埋点主要分为以下三类
代码埋点:在需要埋点的地方添加埋点逻辑代码或自定义属性实现。
可视化埋点:使用可视化的工具进行埋点,即无痕埋点。前端页面加载时根据埋点配置,自动调用接口上传埋点数据。
无埋点:前端自动采集全部事件并上报埋点数据。

可视化埋点和无埋点方案前期投入较大,故在此考虑使用代码埋点的方案。

代码埋点又分为两类:
命令式埋点:在需要埋点的地方添加埋点逻辑代码。缺点:工作量大,且会侵入业务逻辑代码。
声明式埋点:在需要埋点的地方新增自定义属性,通过识别自定义属性绑定事件,采集并上传埋点数据;

Axios如何实现同步请求(async与await)

Axios介绍

Axios是一个基于promise的网络请求库,可以用在浏览器和 node.js中。

Axios本质上也是对原生XHR的封装,只不过它是Promise的实现版本。

主要特点:
从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

在axios中,所有的请求都是异步发送的。所以单独用axios是实现不了同步的,需要结合async与await关键字使用。